Copy and combine the values ​​of several input fields in the form into one input field

Question

copy / duplicate and combine the values ​​of several input fields with one

I have input fields for street, city, state and zip code, and the fifth is the full address. I am trying to get the full address [combined with a separator] with all four of the above fields populated with the full address.

Here is what I still have. The first instance (street address), but I need help to concatenate other fields ...

You can here Fiddle: http://jsfiddle.net/subigya/PeVAj/

type = "text / javascript">

<script type="text/javascript"> $('#street').bind('keypress blur', function() { $('#latlongaddress').val($(this).val()); }); $('#city').bind('keypress blur', function() { ..need help ... }); </script> <form method="post" action="#"> <div class="formitem"> <label for="name_of_salon">Name of Salon:</label> <input type="text" id="name_of_salon" name="name_of_salon" /> </div> <div class="formitem"> <label for="street">Street Address:</label> <input type="text" id="street" name="street" /> </div> <div class="formitem"> <label for="city"> City:</label> <input type="text" id="city" name="city" /> </div> <div class="formitem"> <label for="state">State:</label> <select name="state" size="1"> <option value="AK">AK</option> <option value="AL">AL</option> <option value="AR">AR</option> <option value="AZ">AZ</option> <option value="CA">CA</option> <option value="CO">CO</option> <option value="CT">CT</option> <option value="DC">DC</option> <option value="DE">DE</option> <option value="FL">FL</option> <option value="GA">GA</option> <option value="HI">HI</option> <option value="IA">IA</option> <option value="ID">ID</option> <option value="IL">IL</option> <option value="IN">IN</option> <option value="KS">KS</option> <option value="KY">KY</option> <option value="LA">LA</option> <option value="MA">MA</option> <option value="MD">MD</option> <option value="ME">ME</option> <option value="MI">MI</option> <option value="MN">MN</option> <option value="MO">MO</option> <option value="MS">MS</option> <option value="MT">MT</option> <option value="NC">NC</option> <option value="ND">ND</option> <option value="NE">NE</option> <option value="NH">NH</option> <option value="NJ">NJ</option> <option value="NM">NM</option> <option value="NV">NV</option> <option value="NY">NY</option> <option value="OH">OH</option> <option value="OK">OK</option> <option value="OR">OR</option> <option value="PA">PA</option> <option value="RI">RI</option> <option value="SC">SC</option> <option value="SD">SD</option> <option value="TN">TN</option> <option value="TX">TX</option> <option value="UT">UT</option> <option value="VA">VA</option> <option value="VT">VT</option> <option value="WA">WA</option> <option value="WI">WI</option> <option value="WV">WV</option> <option value="WY">WY</option> </select> </div> <div class="formitem"> <label for="zip">Zip:</label> <input type="text" id="zip" name="zip" /> </div> <div class="formitem"> <label for="address_of_salon">Full Address:</label> <input type="text" id="latlongaddress" name="address" /> </div> <div class="formitem"> <input type="submit" id="location_submit" name="location_submit" value="Add Location" class="addBtn" /> </div> 

Answer 1

Use + to concatenate Javascript:

 $('#latlongaddress').val($('#street').val() + ' ' + $('#city').val() + ', ' + $('#state').val() + ' ' + $('#zip').val() ); 

See jsFiddle .

Answer 2

Just for fun:

 $('#latlongaddress').val( $('#street,#city,#state,#zip').map(function(){ return $(this).val(); }).get().join(' ') ); 

eykanal's answer is better because it will work faster and easier to understand. Just actually use this for something like .val($('input')...