How to submit form without reloading the page

Question

I have been cracking my head over this. I have a form that I need to submit via jquery without reloading the page. ` Somehow , the form will not submit unless I remove the callback function. But I also need this callback function to prevent the form from reloading. Any idea please? Thanks

<form id="myForm" method="post" action="some.php">
        <input type="file" name="filename" />
        <input type="button" id="button" />
    </form>

    <script>
       $(document).ready(function(){
           $(document).on("click", "#button", function(){
        //Perform some operations then submit the form
        $("#myForm").submit(function(e){  //Somehow, this part of the code is not running unless
            e.preventDefault();           // I remove the callback function
            alert("form submitted!");    // I also need the callback function to prevent page reloading                           
                });
           });
       });
    </script>

please, take a look in [these](http://stackoverflow.com/questions/25094763/ajax-form-cannot-prevent-page-reload-with-event-preventdefault/25094921#25094921) answers — Sergey, Aug 02 '14 at 22:54
Your code's a bit muddled. You're binding the submit event when the form is submitted by the button click, which makes no sense. I'd try removing the outer event registration (click) — Mitya, Aug 02 '14 at 22:54

score 0 · Answer 1 · answered Aug 03 '14 at 01:24

   <script type="text/javascript">
    $(document).ready(function(){
    $("#button").click(function(e){
    e.preventDefault();
    var site_url = "page url that you hope to load";
    $("#content").load(site_url);//#content is that div your page'll be load
    });
    });

    </script>
    //try this one,

How to submit form without reloading the page

1 Answers1