Question

I’m pretty much an idiot when it comes to AJAX, so if this problem is really simple, please forgive me.

I have this little form:

<form id="location_ajax_request">
  <label for="location">Enter Your Location:</label>
  <input name="ajax_location" id="ajax_location" type="text" value="Irvine, CA, USA" />
  <input id="requestLocation" type="button" value="Click to Submit" />
  <p id="output"></p>
</form>

When requestLocation is clicked, a GET call to a php script returns something like:

<input type="radio" name="location_selected" value="0" />
<input type="hidden" name="location_x_0" value="-117.8253403" />
<input type="hidden" name="location_y_0" value="33.6868782" />
<input type="hidden" name="location_name_0" value="Irvine, CA, USA" />
[...]
<input type="button" id="confirmAddress" value="Confirm Address" />

Where the _0 is a count of items. If, for instance, someone had entered London, USA, they’d receive some 5 responses.

With jQuery, I grab the click of $('#confirmAddress') successfully using live() and attempt to grab the values of the inputs. I assume they somehow need to be checked for since inserted elements aren’t registered with the DOM. Say I’m trying to grab:

document.forms['location_ajax_request']['location_name_0'].value;

How do I first register it with the DOM as a valid object so it stops returning undefined?

Answer 1

Well if you are using jquery as the OP tags say:

$('input[name="location_name_0"]', '#location_ajax_request').val();