jQuery - defer form submit until function completes
Hello!
What I'm trying to do is capture form input, send it to a geocoder function, inject the results into the form, and then submit the form. I'm having trouble getting the form submission to wait for the results. This is what I have:
The bc_geocoder() function is supposed to insert latitude and longitude into the two respective hidden input fields. It works sometimes, but not all the time. I'm guessing that if the function doesn't complete almost instantly, the form submits before the values are inserted.
When I use event.preventDefault(), the form doesn't submit at all.
Thanks!
What I'm trying to do is capture form input, send it to a geocoder function, inject the results into the form, and then submit the form. I'm having trouble getting the form submission to wait for the results. This is what I have:
jQuery(".facility-search form").submit( function( event ) {
//event.preventDefault(); <- this doesn't seem to work, so I have it commented out.
bc_geocoder( function() {
jQuery(".facility-search form").submit();
});
});The bc_geocoder() function is supposed to insert latitude and longitude into the two respective hidden input fields. It works sometimes, but not all the time. I'm guessing that if the function doesn't complete almost instantly, the form submits before the values are inserted.
When I use event.preventDefault(), the form doesn't submit at all.
Thanks!
ASKER
Could it be that my event handler function is looping?
ASKER
Hi Padas. I don't really understand your comment. I know how to capture the data and manipulate it.
I just can't get the form to submit after I call event.preventDefault();
I just can't get the form to submit after I call event.preventDefault();
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I get what you're saying, but I need the geocoder function to trigger once all of the form has been submitted. Since all fields are optional, it's impossible for the function to know when the form is filled out completely unless by using listening to the submit event.
The geocoder function determines, by the user input, whether or not it should make a geocoder request. If the correct geo data isn't returned, it doesn't matter - a PHP script determines what to do with the data it receives.
I think my function was on a loop. In this case, shouldn't the following work?
The geocoder function determines, by the user input, whether or not it should make a geocoder request. If the correct geo data isn't returned, it doesn't matter - a PHP script determines what to do with the data it receives.
I think my function was on a loop. In this case, shouldn't the following work?
$(".facility-search form").bind( 'submit', function( e ) {
e.preventDefault();
bc_geocoder( function() {
$(this).unbind('submit').submit();
//jQuery(".facility-search form").submit();
});
});
What is the code for your form?
<form name="xyz" method="post" action="somepage">
The form needs to have a method of post or get
<form name="xyz" method="post" action="somepage">
The form needs to have a method of post or get
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This is my form:
The problem with your suggestion is that someone could do a State-only search, or enter only a keyword, for example, which would mean the geocoding is bypassed. I know there is probably a way around that, too, but would prefer to be able to just submit the form.
<form action="/facilities/" method="get">
<p><label><span>Zip Code</span><input type="text" name="zip" id="zip-search" placeholder="e.g. 20001" /></label></p>
<p><label><span>State</span><input type="text" name="state" id="state-search" placeholder="e.g. DC or District of Columbia" /></label></p>
<p><label><span>City</span><input type="text" name="city" id="city-search" placeholder="e.g. Washington" /></label></p>
<p><label><span>Keyword</span><input type="text" name="keyword" id="keyword-search" /></label></p>
<p>
<input class="button" type="submit" value="Search" />
<input id="lat-search" type="hidden" name="lat" />
<input id="lng-search" type="hidden" name="lng" />
</p>
</form>The problem with your suggestion is that someone could do a State-only search, or enter only a keyword, for example, which would mean the geocoding is bypassed. I know there is probably a way around that, too, but would prefer to be able to just submit the form.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Please see code attached to last comment.
You can capture form field data with jquery by using val. $('#someid').val() or $('[fieldname]').val(). Then when you submit data to your geo service, do it via a jquery post so you get an ajax response. Don't put your final submit button on the form until you get your response back.