Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

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

Avatar of Miguel Oz
Miguel Oz
Flag of Australia image

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.
Avatar of Robert Granlund

ASKER

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

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

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.
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial