Question

I am currently working on an MVC application where I use a lot of jQuery and html forms. However, recently I have noticed that these seem to contradict each other somewhat…

For example, I have to prevent the forms default submit to process my AJAX call, otherwise the server gets called twice which leads me to question the idea of using AJAX to submit the form. Wouldn’t it be better instead to just hook the $.ajax call to an <input type="button" /> than an <input type="submit" />?

So, is it contradictory to have a form that is submitted through ajax?

Answer 1

The reason you would put the ajax call on a submit button is so there is a natural fallback if the user has javascript disabled. You should have your backend logic detect if the request is an ajax request or just a straight up submit and be able to either send the data back if it’s ajax or process the request the ‘old school’ way if not.

Edit: For context.

<form action="/processForm.php" method="POST">
   <input type="submit" value="submit" />
</form>

Then your jQuery could look like this

$('form').bind('submit', function(e){
    e.preventDefault();
    //do your stuff
});

If the user has disabled javascript, the form will just submit to /processForm.php like normal.

You can detect if the form was sent via ajax or not with the following php (I don’t know if that’s what you’re using, but it’s what I’ve got).

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  /* handle ajax here */
}else{
  /* handle normal submit here */
}