Not page reload function is not working of jQuery

Question

jQuery code to not reload the page:

       $(document).ready(function(){

         $('#submit').click(function(){
        var page = $(this).attr('id');
        $('#content').load('content/submit.php');
          });
     });

Form submit

<input class="submit" id="submit" name="submit" type="submit" value="Submit">

submit.php:

<div id="content">
   <h2 style="color:#FF0000;"> Thanks For the Submission </h2> 
</div>

I don't know still its loading the page after clicking the submit button

Answer 1

This will help get you started a bit.

You need to prevent the normal form submit by preventing the default event on your button. Otherwise the page will reload due to form submitting.

You also need to send data to server. You can get all the form data using serialize()

$(function(){
    $('#submit').click(function(event){
           event.preventDefault();
           // collect the form data
           var data = $(this).closest('form').serialize();
            // send the data and load new content
            $('#content').load('content/submit.php', data, function(){
                 // new html now exists can run any code needed here
            });
    });
});