Question

I want to submit the form without reloading the page and pass the data to a external php file using $.post. I am having problem on preventing the reload of the page on form submit. How can I cancel the reloading upon clicking the submit button?

Here is the code:

<script>
    $(document).ready(function(e){
        $("#formajax").live("submit", function(e){
            var $this = $(this);
            e.preventDefault();
            $.post("process.php", $this.serialize(), function(data){
                alert("DATA PASSED!");
            });
            return false;
        })
    })
</script>

<form method="post" action="" id="formajax">
    <input type="text" id="samplefield" name="samplefield" value=""/>
    <input type="submit" value="Submit"/>
</form>

Thanks!

Answer 1

I am unfamiliar with what the live method does with jQuery, but it seems to be the source of your problems. If you replace live with bind, in my testing, the page doesn’t reload and I get a “DATA PASSED” prompt.

    <script>
            $(document).ready(function(e){
                    $("#formajax").bind("submit", function(e){
                            var $this = $(this);
                            e.preventDefault();
                            $.post("index.php", $this.serialize(), function(data){
                                    alert("DATA PASSED!");
                            });
                            return false;
                    })
            })
    </script>

    <form method="post" action="" id="formajax">
            <input type="text" id="samplefield" name="samplefield" value=""/>
            <input type="submit" value="Submit"/>
    </form>