422
422

Reputation: 5770

Add form elements to one form element

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

Upvotes: 0

Views: 152

Answers (3)

Nick Craver
Nick Craver

Reputation: 630379

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

Upvotes: 0

bmarti44
bmarti44

Reputation: 1247

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.

Upvotes: 0

Aaron Hathaway
Aaron Hathaway

Reputation: 4315

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

Upvotes: 1

Related Questions