Question

I have 2 sets of AJAX code on one page that’s looks like this

$(document).ready(function(){
$("form#submit").submit(function() {
///Lots of stuff here
});
});

$(document).ready(function() {
    function myrequest(e) {
    ///Lots of stuff here
    });
    $('#fetchFields').click(function(e) {
        e.preventDefault();
        myrequest();
    });
});

I am trying to just execute the second one but I can’t figure out why the first code is being executed. I am executing the second code with this.

<button id="fetchFields">Fetch</button>

This button is located within a form.

Answer 1

If the button is in the form it will submit the form, calling the submit handler you bound to the form, if you don’t want the button to submit the form add type=button to it.

<button type="button" id="fetchFields">Fetch</button>