• Trouver des éléments HTML par Collections d'objets HTML

    Par White Tendance dans JavaScript le 18 Octobre 2018 à 17:35

     

    Trouver des éléments HTML par Collections d'objets HTML

    Cet exemple trouve l'élément de forme avec id = « frm1 », dans la collection de formulaires, et affiche toutes les valeurs des éléments:

    Exemple

    var x = document.forms["frm1"];
    var text = "grange";
    var i;
    for (i = 0; i < x.length; i++) {
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("").innerHTML = text;

    Exemple

    <!DOCTYPE html>
    <html>
    <body>

    <h2>Recherche d'éléments HTML par  document.forms</h2>

    <form id="frm1" action="/action_page.php">
    First name: <input type="text" name="fname" value="Donald"><br>
    Last name: <input type="text" name="lname" value="Duck"><br><br>
    <input type="submit" style="background-color: #000000; color: #ffffff;"  value="Ne pas cliquer ici" >
    </form>

    <p>Cliquez sur "Essayez-le" pour afficher la valeur de chaque élément du formulaire..</p>

    <button onclick="clique()"><span style="background-color: #000000; color: #ffffff;"><strong>Essayez-le</strong></span></button>

    <p id="Porte"></p>

    <script>
    function clique() {
    var x = document.forms["frm1"];
    var text = "";
    var i;
    for (i = 0; i < x.length ;i++) {
    text += x.elements[i].value + "<br>";
    }
    document.getElementById("Porte").innerHTML = text;
    }
    </script>

    <button onclick="recharge()"><span style="background-color: #000000; color: #ffffff;">Rechargez la page</span></button>

    <script>
    function recharge() {
    location.reload();
    }
    </script>

    </body>
    </html>

     

     

    Résultat de l'exemple

    Recherche d'éléments HTML par document.forms

    First name:
    Last name:

    Cliquez sur "Essayez-le" pour afficher la valeur de chaque élément du formulaire..