Have Geek Brain

GetJSON is triggered by a button inside the form

I'm having trouble figuring out why I have to put a button that fires the getJSON method outside of the form for the request to work.

If a button is placed on a form, the getJSON method returns no results.

The base code uses an XHR request when the Submit button is clicked based on the selected value. I reproduced this question here: http://jsfiddle.net/z6caj/

Many thanks,

+2


a source to share


3 answers


You can actually make an ajax request on the dropdown using the onchange event eg.



$('#state').change(function(){

     //do stuff

}
+1


a source


Clicking the button will submit the form in the normal way (when placed inside the form). return false

at the end of the click handler and it should work as expected. Alternatively, disallow the submission by submitting a form handler return false

:



$("form").submit(function() {
    return false;
});
+3


a source


Because this is a submit button and you are not doing anything to prevent the default action.

So the JS starts up (setting the Ajax request) and then the form is submitted (leaving the page and discarding the request).

See http://docs.jquery.com/Tutorials:How_jQuery_Works (section starting with "For clicks and most other events")

+2


a source






More articles:


All Articles