Question

I need to use jQuery’s keyup function to take the value from input html form elements and display said values in a div elsewhere.

The working code looks as follows:

$('#name').keyup(function() {
    var name = $(this).val();
    $('#name-in-document').html(name);
});

Since I have many identical instances of the above code block, I’d like to use a for loop to loop through an array of values. The catch is the name of the variable in the second line

var name = $(this).val();   

would come from the array.

I have tried the following loop, which does not work because (as I understand it) a Javascript variable cannot be named an array value:

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

    $("#"+inputsArray[i]).keyup(function() {

    var inputsArray[i] = $(this).val();
    $("#"+inputsArray[i]+"-in-document").html(inputsArray[i]);

    })

};

So I have two questions:

1. Is it true that I cannot use the array values to create a variable in the for loop?
2. Is there an alternate way to accomplish the same thing (getting the variable names from the array) that might work?

I am just beginning JavaScript and really appreciate any insight. Thank you!

Answer 1

For the alternative approach, I would recommend giving #name (and his friends) a class name, e.g.

<input class="js-key-up" id="name" />

Then you can do away with the array and the for loop altogether. Also, adding new HTML elements would not require adding items to the array.

HTML

<input class="js-key-up" id="phone">
<input class="js-key-up" id="name">
<input class="js-key-up" id="address">

<p id="phone-in-document"></p>
<p id="name-in-document"></p>
<p id="address-in-document"></p>

JavaScript
​

$('.js-key-up').keyup(function (e) {
    var id = $(this).attr('id');
    $('#' + id + '-in-document').html($(this).val());
});​

I’ve created a jsfiddle with the code in.