Add form elements to one form element

Ok ,

Lets say I am creati开发者_运维问答ng a form. And its an address form,form elements as such :

field 1 / house number
field 2 / street name
field 3 / suburb 
etc etc etc

And someone fills in the form,:

1
smith street
townsville

What I want ( similar to stack overflows live form ) Is another form element, that propagates the form field entries LIVE but replaces spaces with text:

So it appears like: 1+snith+street+townsville

With a search button at the end. This then triggers the rest of the script we have already done, which basicaly grabs the lat and long of the address and displays a gmap.

Thats essentially it, but we would need that all this occurs, whilst on the form, and before submission.

Any help appreciated, have asked several other places. No joy, but always use StackOverflow.. Thanks Ozzy

$('#my_form input').change(function() {
  var new_text = '';
  $('#my_form input').each(function() {
    new_text += $.trim($(this).val()).replace(' ', '+') + '+';
  });
  $('#my_display').val(new_text);
});

here something that might work. . .

$(document).ready(function(){

  $('body').live('keypress', function (event) {

    if ($(event.target).hasClass('form-element')) {
      var text;
      $('#yourform input.form-element').each(function() {
        text += $(this).attr('value') + '+';
      });

      $('#yourtargetelementthatwillholdallthenames').attr('value', text.substring(0,text.length - 1))
    }

  });

});

i haven't tried this in a browser, but give it a shot. It might need some tweaking for your needs.

If you're submitting this for a search, use encodeURIComponent() instead so you encode everything needed, like this:

$("#form1 input[type=text]").bind("keyup change", function() {
  var vals = $("#form1 input[type=text]").map(function() { return this.value; });
  $("#otherField").val(encodeURIComponent(vals.join(" ")));
});