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 — user2033671
– user2033671, Commented Feb 9, 2016 at 14:48

john Smith · Accepted Answer · 2016-02-09 14:50:35Z

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 9, 2016 at 14:50

answered Feb 9, 2016 at 14:40

john Smith

18k12 gold badges80 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

john Smith Over a year ago

just like in your code, i made a little function wrapping it, that will return a randomname

Community · Accepted Answer · 2017-05-23 12:07:32Z

0

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.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 9, 2016 at 14:52

Prechan

716 bronze badges

Collectives™ on Stack Overflow

Iterate through a form with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related