Member Avatar

I am trying to submit a form and get a result from an AJAX call. However, the error block is triggered when submitting the form.

If I change the <form> to a <div> and change the $("form#main_frm").submit(...) to $("#main_frm").click(...), it works. What am I doing wrong with form? Thanks in advance.

<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src=""></script>
    function process()
            type: "POST",
            dataType: "json",
            url: "process.php",
            data: "",
            success: function(data, textStatus, jqXHR)
            { $("#result").text(JSON.stringify(data)); },
            error: function(jqXHR, textStatus, errorThrown)
            { $("#result").append(errorThrown + ": " + textStatus); }
    <FORM METHOD=POST ID='main_frm'>
    <DIV ID='result'></DIV>

The problem i see here without looking at your code in detail is that your form is going to behave by generating a post and the page will reload. you need to prevent that behavior if you dont want the page to reload.

I may be able to take a closer look later, but just try this and see if it solves your problem

Member Avatar

That seems to work just fine, thanks!!!

My bit to add - just have a normal non submit button and wire up to the click event on that.