CODEWITHSUNDEEP
phpjqueryjquery-mobile
fart-y-goer
fart-y-goer

Reputation: 739

Cancel form submit default behavior jQuery Mobile

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!

Upvotes: 0

Views: 707

Answers (1)

ian.aldrighetti
ian.aldrighetti

Reputation: 388

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>

Upvotes: 1

Related Questions