Input type = "submit" instead of input type = "button" with AJAX?

Question

I have an AJAX form that I customize using <input type="button"> with the jQuery.click action set.

The problem is that the form does not have <input type="submit" >, the form does not appear in the traditional way, so the form validators do not always work, and pressing the enter button does nothing.

If I add an input for input when it clicks (or type “hit”, etc.), the page will reload as if it were not an AJAX form.

What am I missing here?

Answer 1

Use the submit button. The submit button will be more compatible with the default behavior of the browser, for example by pressing the enter key. Then, at the submit event, just cancel the form submission and run your AJAX code.

 <form onsubmit="return false;"> <!--Blah Blah Blah--> <input type="submit"> </form> 

If you use jQuery you can use a cleaner method

 $('#form_id').bind('submit',function(e) { e.preventDefault(); //Will prevent the submit... //Add additional code here }); 

Answer 2

Rather, change the submit form and save the <input type="submit"> button:

 $("form").submit(function(e){ e.preventDefault(); // do ajax submition $.ajax({ url: "SomeURL", type: "POST", data: $(this).serializeArray(), success: function(data, status, xhr) { // do the success stuff }, error: function(xhr, status err) { // do the error stuff } }); }); 

Advantage . It’s good that this will work in all cases when you press ENTER on any of the input elements of the form or click the submit button. It will always work without exception.