Question

I am trying to post a form using ajax.

Right now, the code I have is

$("#sub").click(function() {     
    var tag = $("#tagbar").val();
    var opinion = $("#op").val();
    alert($("#expressform").serialize());
    $.post("dbfunctions.php", $("#expressform").serialize());
});

This works, but it takes a long time to post and add to the database (thats what dbfunctions does) compared to how long it took before, when I was using a form action and refreshing the page. Why is this?

Also, if I remove the alert, the script stops working completely. I can’t figure out anyway in which this makes sense.

Thanks

Answer 1

Make sure you cancel the default action of the button by returning false from the click handler:

$("#sub").click(function() {     
    $.post("dbfunctions.php", $("#expressform").serialize());
    return false;
});

Also instead of subscribing for submit button clicks, it’s better to subscribe to the submit event of the corresponding form directly:

$("#expressform").submit(function() {     
    $.post(this.action, $(this).serialize());
    return false;
});

This way you are no longer hardcoding any urls in your javascript files. You are simply unobtrusively AJAXifying your form.