jQuery $.get() is not executed on form submission

Question

When a form is submitted, I want to asynchronously invoke an email-sending script order.php with some $_GET parameters.

The jQuery $.get() function doesn't execute and there are no errors displayed in console.

HTML markup:

<form name="submit" id="orderconfirm" action="somefile.php">
<input type="hidden" name="orderkey" id="orderkey" value="somekey"/>
<input type="text" name="email" id="orderemail"/>
<input type="submit" value="submit"/>
</form>

jQuery script:

$(document).ready(function() {

$('#orderconfirm').submit(function() {
   var key = $('#orderkey').val();
   var email = $('#orderemail').val();
   var url = 'order.php?key=' + key + '&mail=' + email;
   $.get(url);
});

});

It's really strange because a similar script (also $.get() with a simple URL) works just fine. I'm also sure that the order.php script works fine and the path is correct. The problem is that somehow $.get(url) is not executed and no request is sent.

The submit handler works fine too - for example an alert worked.

Any ideas?

Answer 1

Prevent default browser action by using preventDefault()

$(document).ready(function() {    
    $('#orderconfirm').submit(function(event) {
       event.preventDefault();
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url);
    });    
});

Documentation

Also you can use return false; to restrict the form submission

$(document).ready(function() {    
    $('#orderconfirm').submit(function(event) {
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url);
       return false;
    });    
});

To submit the form after $.get try this,

$(document).ready(function() {    
    $('#orderconfirm').submit(function(event) {
       event.preventDefault();
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url,function(){$('#orderconfirm').submit()});
    });    
});

Documentation

Answer 2

Because you don't prevent default browser behavior. Add event.preventDefault method:

$('#orderconfirm').submit(function(event) {
   event.preventDefault();
   var key = $('#orderkey').val();
   var email = $('#orderemail').val();
   var url = 'order.php?key=' + key + '&mail=' + email;
   $.get(url);
});

Answer 3

try this

$('#orderconfirm').submit(function(e) {
   e.preventDefault();

})

and use valid $.get

$.get( "order.php", {'key':key,'mail': email});

Answer 4

$(document).ready(function() {

$('#orderconfirm').submit(function(e) {
   e.preventDefault();
   var key = $('#orderkey').val();
   var email = $('#orderemail').val();
   var url = 'order.php?key=' + key + '&mail=' + email;
   $.get(url);
});

});

the problem happens with the default behavour from browser on form submission. you need to prevent the default from being executed. optionally you can even change the type of button from 'submit' and try.

Answer 5

Use return false or e.preventDefault() like,

$('#orderconfirm').submit(function(e) {
   e.preventDefault();
   var key = $('#orderkey').val();
   var email = $('#orderemail').val();
   var url = 'order.php?key=' + key + '&mail=' + email;
   $.get(url);
});

Answer 6

You have two ways to fix this.

1.Use e.preventDefault(); to prevent browser's default behavior from submitting the form.

    $('#orderconfirm').submit(function(e) { // 'e' here is new
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url);
       e.preventDefault(); // and this line is new
    });

2. Or just change the submit type to button.

    <input type="button" value="submit"/>

By the way, you can get values as parameters instead of string. jQuery.get()

$('#orderconfirm').submit(function(e) {
   var key = $('#orderkey').val();
   var email = $('#orderemail').val();
   var page = 'order.php';
   $.get(page, {mail: email, key: key}); // this line
   e.preventDefault(); 
});

Answer 7

Try this

$.get( "order.php", { key: key , mail: email } );