包含带表单帖子的jQuery输入？

Question

I have a field within a form for users to enter an address. After they enter the address, it's sent with jQuery.ajax to a remote API to be verified and parsed to individual fields. The result is a jsonp object that I manipulate to extract the fields I need.

My goal is to include the address with its multiple parts so that it can be processed along with the rest of the fields in the form. The only way I could come up with so far was to add hidden fields populated with the correct values. This feels sort of clunky though, so I was wondering if there is a better way of going about it.

Currently, the user enters the address in a single line, similar to this:

<form method="POST" id="myForm">
  <input type="text" id ="address>
  <div class="recipients"></div>
  <input type="submit">
</form>

The ajax is fired when they focusout of the address field, and on the successful return of the jsonp object the necessary fields are extracted, then inserted into the form:

success: function(data) {
    var results = data.results[0];
    var address1 = results.Address1;
    var address2 = results.Address2;
    var city     = results.Locality;
    var state    = results.AdministrativeArea;
    var zip      = results.PostalCode;
    var addLines = "<input type='hidden' name='address1' value='"+address1+"'>";
    addLines += "<input type='hidden' name='address2' value='"+address2+"'>";
    addLines += "<input type='hidden' name='state' value='"+state+"'>";
    addLines += "<input type='hidden' name='city' value='"+city+"'>";
    addLines += "<input type='hidden' name='zip' value='"+zip+"'>";
    $(".recipients").append($(addLines));
    }

Is there a more elegant way of including the returned data into POST? Thanks for the help!

Answer 1

First of all, be careful not to have those hidden fields duplicated with your current code. It this is really called on every successfull AJAX call on focusout, you could get a lot of these if the user switches focus a couple of times.

That said, if you want to stick with sending all the clean data to the API in a separate call like you do now, I'd say you're taking the right approach. You should just include the hidden fields in your static html though instead of creating new ones on AJAX response because of the reason mentioned above. Now you can just update the values of those inputs on AJAX response. Quick example:

var addLines = "<input type='hidden' name='address1' value='"+address1+"'>"

becomes

$('#address1').val(address1); // assume id is 'address1'

If you still don't like the feel of this you could save the actual values in JS variables and do the POST yourself using jQuery again for example. Intercept the form submit, cancel it and create your own POST using the variables you kept along with other fields in the form. This is actually a lot clunkier and messier to maintain since you need to make sure your code now includes all relevant values from the form and will keep doing so when you add new fields.

I think I'd prefer the approach with hidden input fields, just 'prettier' updating.