Javascript foreach d'entrée en forme de Nom et de Valeur

Je suis juste à pratiquer un peu de javascript et j'ai utilisé JQuery beaucoup! Je n'ai pas eu grande expérience de raw javascript et je veux l'apprendre comme je l'ai fait JQuery. J'ai un formulaire simple et une fonction javascript pour aller avec elle onsubmit et je veux obtenir le nom et la valeur de chaque entrée dans le formulaire avec ma fonction, mais il n'a pas l'air de travailler quelqu'un peut-il m'aider?

<!DOCTYPE html>
<html>
<head>
    <title>Foreach Practice</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Value = this.attribute('name').value;
                alert(Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="User" placeholder="Password" />
    <input type="submit" name="Submit" onclick="javascript:Get();" />
</form>
</body>
</html>
InformationsquelleAutor Moussa Harajli | 2013-04-08
  1. 6

    Cette question est probablement mieux adapté à l'examen du code, mais peu importe.

    > function Get() {

    Les noms de variables commençant par une majuscule sont, par convention, réservés pour les constructeurs. Aussi, les noms à indiquer que la fonction n', un générique de "get" fonction ne donne pas beaucoup d'un indice. Un meilleur nom, peut-être getFormValues.

    >     var Form = document.getElementById('Form');

    Il y a un document.les formes collection disponibles qui peuvent être utilisés comme une alternative à l'appel d'une méthode:

        var form = document.forms('Form');

>     for(I = 0; I < Form.length; I++) {

    Vous devez toujours déclarer les variables dans la portée (en notant que ECMAScript a seulement global, la fonction et l'évaluation de la portée, il n'y a pas de bloc de portée), en particulier les compteurs. Aussi, la forme du longueur attribut est le nombre de contrôles dans le formulaire. Puisque c'est un live de collecte, d'obtenir la longueur à chaque fois lorsque vous n'avez pas besoin de est potentiellement un gain de performance, afin de mettre en cache la valeur:

        for (var i = 0, iLen = form.length; i < iLen; i++) {

>         var Value = this.attribute('name').value;

    La valeur de ce est défini par la façon dont vous appelez une fonction. Si la fonction est appelée par un gestionnaire, selon le navigateur et la méthode de fixation, ce référence à l'élément dont l'auditeur a appelé la fonction. Dans ce cas, parce que la fonction est appelée par une ligne à l'écoute, ce n'a pas été définie donc par défaut à l'objet global.

    Vous pouvez facilement passer d'une référence à l'élément de l'auditeur si vous n':

    <input ... onclick="getFormValues(this);" ... >

    Maintenant votre fonction recevra une référence à l'élément et peut facilement obtenir une référence à la forme et itérer sur les contrôles. Enfin, il est rare d'avoir besoin d'accéder à une forme de contrôle de valeurs d'attribut, vous presque toujours envie d'accéder à des propriétés. Voici donc la ré-écrit de la fonction:

    function getFormValues(element) {
    var form = element.form;
    var controls = form.controls;

    for (var i=0, iLen=controls.length; i<iLen; i++) {
        alert(controls[i].name + ': ' + controls[i].value);
    }
    //Prevent form submission
    return false;
}

    Enfin, vous êtes mieux d'appeler l'auditeur de la forme plutôt que sur le bouton envoyer, depuis formulaires peuvent être transmis par d'autres moyens que de cliquer sur un bouton de soumission. Oh, et ne pas l'appeler tout contrôle de formulaire "soumettre" ou l'utilisation de tout nom qui est le même comme une forme de la méthode qu'il va remplacer le même nom de méthode. Vous vous en sortez avec elle ici en raison de la capitalisation, mais ce n'est pas beaucoup de défense.

    Le HTML correspondant peut être (notez que le formulaire n'a pas besoin d'un nom ou id):

    <form onsubmit="return getFormValues();">
    <input type="text" name="userName" placeholder="Username">
    <input type="password" name="userPassword" placeholder="Password">
    <input type="submit" name="submitButton">
</form>
    InformationsquelleAutor RobG
  2. 3

    Vous devez effectuer une itération à la forme du les enfants et l'utilisation getAttribute fonction permettant d'obtenir la valeur de l'attribut.

    Essayez ceci:

    function Get() {
    var Form = document.getElementById('Form');         
    var childs = Form.children;         
    for(I = 0; I < childs.length; I++) {                    
        var Value = childs[I].getAttribute('name');                             
        alert(Value);
    }
}
    • cela a également travaillé!
    • L'OP veut les contrôles de formulaire, le enfants collection obtiendrez tous les éléments enfants et n'est pas mis en œuvre dans tous les navigateurs à utiliser. Il y a beaucoup d'autres problèmes avec le code qui doit être traitée.
    InformationsquelleAutor Iswanto San
  3. 2

    Ceux qui cherchent la réponse à cela j'ai pensé qu'il ou simplement en utilisant aléatoire tente de réorganiser mon code mais ici il est.

    <!DOCTYPE html>
<html>
<head>
    <title>Foreach Tutorial</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Name = Form[I].getAttribute('name');
                var Value = Form[I].value;
                alert(Name + ' : ' + Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="Pass" placeholder="Password" />
    <input type="submit" name="Submit" onclick="Get();" />
</form>
</body>
</html>
    • Il serait plus utile si vous profitez de l'aide et de modifier votre réponse en conséquence.
    InformationsquelleAutor Moussa Harajli