Add form elements to one form element - php

Question

Ok ,
Lets say I am creating 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

Answer 1

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

Answer 2

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.

Answer 3

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(" ")));
});