11523 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Ajouter texte dans un placeholder sans modifier le HTML

Bonjour à tous et à toutes,

Je souhaiterai ajouter le texte "Votre e-mail" dans un placeholder d'un formulaire d'inscription (ligne 37 du code ci-dessous), sans modifier le HTML (car le code ci-dessous est généré dynamiquement et je n'ai pas la main dessus).
Voici le code HTML :
<div id="node-1326" class="dp-node dp-node-newsletter dp-node-1326 clearfix node-item node-newsletter node-item-tagged" data-item-tags="">
    <div class="clear"></div>
    <h3>Inscrivez-vous</h3>
    <hr>
    <div class="node-item-content node-item-content-">
        <div class="node-item-teaser"></div>
        <p></p>
        <form id="newsletter" class="form-vertical" enctype="application/x-www-form-urlencoded" action="" method="post">
            <div class="form-group">
                <label for="newsletters" class="optional">Lettres d'informations auxquelles je souhaite m'inscrire :</label>
                <select id="newsletters" name="newsletters[]" multiple="multiple" class="" style="display: none;"></select>
                <div class="btn-group">
                    <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="-- Aucune --" aria-expanded="false"><span class="multiselect-selected-text">-- Aucune --</span> <b class="caret"></b></button>
                    <ul class="multiselect-container dropdown-menu">
                    </ul>
                </div>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#newsletters').multiselect({
                            nonSelectedText: '-- Aucune --',
                            includeSelectAllOption: true,
                            selectAllText: 'Tout sélectionner',
                            numberDisplayed: 1,
                            allSelectedText: 'Toutes les lettres',
                            nSelectedText: 'lettres sélectionnées'
                        });
                    });
                </script>
            </div>
            <div class="form-group">
                <label for="mail" class="required">Mon adresse e-mail</label>
                <div class="input-group" style=""><span class="input-group-addon"><i class="fa fa-at"></i></span>
                    <input type="email" value="" id="mail" class="form-control " placeholder="" name="mail" required="">
                </div>
            </div>
            <input type="submit" name="submit_newsletter" id="submit_newsletter" value="S'inscrire" class="btn btn-primary">
        </form>
        <p></p>
    </div>
</div>

Je pense qu'on peut faire ça grâce au JS (d'où ma question dans cette section); cependant, comme je n'ai jamais écris une ligne de code en JS... Smiley lol

Je vous remercie par avance pour vos réponses.
Bonne journée Smiley cligne
@farang
Smiley merci Merci beaucoup. Ça fonctionne!
Petite question : J'ai 2 fois un formulaire d'inscription à la newsletter (un dans le corps et l'autre dans le footer). Ton code a permis d'ajouter "Votre e-mail" dans le 1er formulaire. Que faut-il faire pour que ça le mette aussi dans le 2nd formulaire, celui du footer (ou autrement dit, dans toute la page HTML) ?

Sinon, pour répondre à ton interrogation, dans ma page HTML, j'ai des éléments qui sont appelés dynamiquement (via des variables du type {%variable%}) (c'est du Twig, je crois). Je peux pas modifier le code HTML qui est généré grâce à ces variables, mais le reste de la page, oui. Du coup, je peux appeler un fichier JS avec le code Javascript que tu m'as donné.
Je sais pas si j'ai été clair Smiley langue Smiley lol
Bonjour,
donc nous voulons mettre le même placeholder à tous les input de type "mail" de la page, peu importe le nombre de formulaires.
Dans ce cas on fait une boucle pour parcourir tous les input de la page, et si un input est de type "mail", on lui affecte la valeur du placeholder désiré :

var inputs = document.getElementsByTagName("input");
for(var i=0; i<inputs.length; i++){
if(inputs.getAttribute("type")=="mail"){
inputs[i].placeholder = 'Votre e-mail';
}
}

Autre option, si le second mail (du footer) a une ID différente du premier input de type email (normalement, ID est unique), disons que son ID est mailfooter, il suffit d'affecter les deux l'un après l'autre :

document.getElementById('mail').placeholder = 'Votre e-mail';
document.getElementById('mailfooter').placeholder = 'Votre e-mail';

là on peut mettre des placeholders différents si on veut, ou pas.

OK pigé pour ta page, une partie du code HTML est généré automatiquement, compris

[/i]
Désolé, mais là pour le coup, ça ne fonctionne pas. Smiley decu
J'ai remplacé le code que tu m'avais donné dans ton 1er message par celui de ton second message, mais ça ne fonctionne pas.
J'ai donc collé le 2nd code après le 1er, mais... pas mieux Smiley decu

Sinon, les 2 formulaires auront la même ID.
bacasable a écrit :

Un id doit être unique Smiley cligne

En théorie, oui. Là, c'est le même formulaire appelé dynamiquement via une (même) variable à 2 endroits différents (une première fois dans le corps de la page et une seconde fois dans le pied de page) => Même ID
Ça reste invalide, même généré dynamiquement, et tu vas avoir des problèmes avec tes scripts si tu fais cela. Comme javascript qui va récupérer uniquement ton premier id et ignorer le second Smiley cligne
J'ai un collègue qui a trouvé pour ceux que ça intéresse. Voici le code à placer en JS :
$("input[type=email]").attr('placeholder', 'Votre mail');

En tout cas, merci pour votre aide Smiley cligne
Sujet clos
Aller à