0

How can I take a array values and populate already existing text fields. For an example, array would have 5 values and there would be 5 text fields.

Array [ tom, Matt, Lucy, Suzanna, Hank ]
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">
1
  • Write a function that loops over your inputs and adds the next item from the array. Commented Apr 8, 2016 at 20:47

3 Answers 3

1

You should be able to use something like the following to iterate through your <input> elements and pop off each name until they have each been exhausted :

// Your array
var array = ['Tom', 'Matt', 'Lucy', 'Suzanna', 'Hank'];

// Loop through the array and target the next available textbox
for(var input in document.getElementsByName('firstName')){
    // If there are any names to use, use one
    if(array.length > 0){
       // Pop the next name off of your array and set the value
       // of your textbox
       input.value = array.pop();
    }
}

If you have any issues actually using the above example to set the values, you can always use a slightly different loop to handle things :

// Your array
var array = ['Tom', 'Matt', 'Lucy', 'Suzanna', 'Hank'];

// Store your input elements
var inputs = document.getElementsByName('firstName');
// Loop through the array and target the next available textbox
for(var i = 0; i < inputs.length; i++){
        // If there are any names to use, use one
        if(array.length > 0){
           // Pop the next name off of your array and set the value
           // of your textbox
           inputs[i].value = array.pop();
        }
}

You can see a working example in action here and what the output using the data you provided might look like below :

enter image description here

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

Comments

0

You could iterate over the array as a whole, or just simply access every array value one by one

Comments

0

you can do that in a bunch of different ways. e.g

give the fields a class and use jquery to add the value to them

<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">

then you can use jquery or javascript to add the value to them:

var currIndex = 0;
$(document).ready(function(){
    $(".damn").each(function(){
        $(this).val(myarray[currIndex++]);
    });
});

UPDATE: You can also use the approach created by Rion Williams up there.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.