Iterate through a form with JavaScript

Question

I would like to pick a random name out of a form that i can fill with names. I have a function to add more form field dynamicly.

Here is my code so far :

    <form>
        <div id="dynamicInput">
            <input class="inputs" type="text" name="input1" placeholder='Type name' required>
            <input class="inputs" type="text" name="input2" placeholder='Type name' required>
            <input class="inputs" type="text" name="input3" placeholder='Type name' required>
            <input class="inputs" type="text" name="input4" placeholder='Type name' required>
        </div>
            <input type="button" class="login login-submit" value="Add a member" onClick="addInput('dynamicInput');">
            <input type="button" name="login" class="login login-submit" value="Roll the wheel!" onClick="rollIt();">
    </form>

My Javascript functions are as follows :

function addInput(divName){

     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<input class='inputs' type='text' name='input" + counter + "' placeholder='Type name' >";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

function rollIt() {
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        console.log(inputs[i]);
    }
}

I have two questions :

My friends are laughin at my face because of the onClick usage. Is it that bad ?
How could i store the form values in a list ? I tried to show them with the rollIt function with no success.

Your friends probably subscribe to the "unobtrusive javascript" doctrine. With client side templating and MV* frameworks on the rise were starting to see javascript in the markup again. One helpful debugging thing that i do is `console.log(a=inputs[i]);`. This will store the last item in the console under the variable `a`, that way in your console you can play around and see what methods are available on `a`. Try `a.value` — , Feb 09 '16 at 14:48

john Smith · Accepted Answer · 2016-02-09T14:50:35.277

1

maybe something like this:

function randomName(){
    var inputs = document.getElementsByTagName('input');
    randomName = document.querySelector('[name="input'+(Math.floor(Math.random() * inputs.length) + 1)+'"  ]').value;
    return randomname;

}

this simply returns random value of input[name="input+x"]

ps: document.querySelector is not supported by all platforms so to be sure just add a getElementByAttribute function you can get everywhere around the web

edited Feb 09 '16 at 14:50

answered Feb 09 '16 at 14:40

john Smith

17,409
11
76
117

just like in your code, i made a little function wrapping it, that will return a randomname – john Smith Feb 09 '16 at 14:51

score 0 · Answer 2 · edited May 23 '17 at 12:07

About your question : My friends are laughin at my face because of the onClick usage. Is it that bad ?

In fact, don't put inline javascript is better for some reasons :

Separate presentation from controller layer. (HTML / JavaScript).
So maintainability is improved because of the first reason for you and mates.
Better way to debug your code. You don't have to check multiples files, only .js
According to this post, you can't put inline js in cache and so improve your user experience.

So try to avoid those inline onclick usages.

Iterate through a form with JavaScript

2 Answers2