Javascript to populate the input value of a hidden text field

With javascript, is there a way to have a hidden input field and have that value be populated by a handful of other input fields.  So I had a list of of first and last name inputs and there are three sets of fields that each have a different first and last name.  Can I then, on submit take those six names and comma separated them into the value of a hidden input?
So I guess the first and last name will be an array because there may be endless first and last names.
<input type ="text" class="first-name-1" name ="first-name[ ]" value="" />
<input type ="text" class="last-name-1" name ="last-name[ ]" value="" />

<input type ="text" class="first-name-2" name ="first-name[ ]" value="" />
<input type ="text" class="last-name-2" name ="last-name[ ]" value="" />

<input type ="text" class="first-name-3" name ="first-name[ ]" value="" />
<input type ="text" class="last-name-3" name ="last-name[ ]" value="" />


<input type="hidden" id="name" name="name" value="" />

<script>
 $('#name').attr('value', $('.first-name').valuel() + $('.last-name').valuel() );

Open in new window

LVL 9
Robert GranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Miguel OzSenior Software EngineerCommented:
Use the val function in Jquery, for example to get the first and last name 1:
$('#name').val($('.first-name-1').val() + $('.last-name-1').val() );

Open in new window


Note: For the final code see if you can just define a class for the target inputs, so you can grab all the names based on the 'DOM order with just a simple code.
Robert GranlundAuthor Commented:
I should actually be like this because the fields are added dynamically.  You can add as many first and last names as you want.  I need to make the following work because all of the classes are the same.
<input type ="text" class="first-name" name ="first-name[ ]" value="" />
<input type ="text" class="last-name" name ="last-name[ ]" value="" />

<input type ="text" class="first-name" name ="first-name[ ]" value="" />
<input type ="text" class="last-name" name ="last-name[ ]" value="" />

<input type ="text" class="first-name" name ="first-name[ ]" value="" />
<input type ="text" class="last-name" name ="last-name[ ]" value="" />

Open in new window

Brian TaoSenior Business Solutions ConsultantCommented:
Here you go:
var $first = $(".first-name"),
    $last = $(".last-name"),
    tmpArray = [];
for (var i = 0; i < $first.length; i++){
  tmpArray.push($first[i].value + " " + $last[i].value);
}
$("#name").val(tmpArray.join(","));

Open in new window

Julian HansenCommented:
My question is why do you want to do this?

If you are sending your form data to a processing script - it will have access to the first name data - what is the specific requirement of putting a generated value in a hidden field when that can be derived from the other data in the form?

Bearing in mind that you have to validate the data on the server anyway given that browser data can be tampered with and therefore cannot be trusted.
Chris StanyonWebDevCommented:
Have to agree with Julian on this one - it would make so much more sense to handle the data at the server side.

You might also want to consdier renaming your input fields. As you have it, your form would group all the firstnames together, and then all the lastnames together. Surely it would make more sense to group each first and last name together.

<input type ="text" class="first-name" name ="person[1]['first-name']" value="" />
<input type ="text" class="last-name" name ="person[1]['last-name']" value="" />

<input type ="text" class="first-name" name ="person[2]['first-name']" value="" />
<input type ="text" class="last-name" name ="person[2]['last-name']" value="" />

Open in new window

Then the loop becomes clearer:

foreach ($_POST['person'] as $person):
    echo $person['firstname'];
    echo $person['lastname'];
endforeach;

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.