提交并获取数据而不刷新页面

Question

I'm new to php and mySQL. I've created a webpage, it's essentially a noticeboard. The page has a form to submit content and the content is shown below instantaneously. The content appears when the submit button is pressed, but now if I wanted to submit content immediately after the form still displays the echo that says submission was successful. Could someone point me in right direction to get the page functioning in a way that users can submit content one after the other without refreshing the page? Any help is greatly appreciated. Apologies for the messy code.

This is my input code:

        if(! $conn ) {
           die('Could not connect: ' . mysql_error());
        }

        if(! get_magic_quotes_gpc() ) {
           $name = addslashes ($_POST['name']);
           $proposal = addslashes ($_POST['proposal']);
        }else {
           $name = $_POST['name'];
           $proposal = $_POST['proposal'];
        }

       $email = $_POST['email'];

        $sql = "INSERT INTO db3". "(name, proposal, email, join_date ) 
            VALUES('$name','$proposal','$email', NOW())";

        mysql_select_db('_db');
        $retval = mysql_query( $sql, $conn );

        if(! $retval ) {
           die('Could not enter data: ' . mysql_error());
        }

       echo "<div class='msg-box' id='msg-box'>Entered data successfully</div>
";

        mysql_close($conn);

This is my form:

<form name="submission" method = "post" action = "<?php $_PHP_SELF ?>" >

      <fieldset>
         <input name = "name" type = "text" 
                       id = "name" placeholder="Name..." required autocomplete="off">

         <input name = "email" type = "text" 
                       id = "email" placeholder="[e-mail]..."  autocomplete="off">

         <textarea name = "proposal" type = "textarea" maxlength="1000" 
                       id = "proposal" placeholder="Your proposal goes here..." required autocomplete="off"></textarea>


      </fieldset> 

      <fieldset> 
         <input name = "add" type = "submit" id = "add" value = "Submit"> 
      </fieldset>

 </form>

This is my retrieval code:

  $conn = mysql_connect($dbhost, $dbuser, $dbpass);

  if(! $conn ) {
  die('Could not connect: ' . mysql_error());
  }

   $sql = 'SELECT id, name, proposal FROM db3 ORDER BY ID DESC ';

   mysql_select_db('_db');
   $retval = mysql_query( $sql, $conn );

   if(! $retval ) {
      die('Could not get data: ' . mysql_error());
   }

   while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) {
     echo 
      "<article>".
      " <div class='id'> ID :{$row['id']} </div>  ".

      " <section> <p> {$row['proposal']} </p></section> ".
        " <section class='name'><h3> {$row['name']} </h3></section> ".
       "</article>"
      ;   

    }


   mysql_close($conn);
   ?>

Answer 1

Use this code:

<script>
submitHandler: function(form) {
            $.ajax({
                url: '',
                type: 'POST',
                data: $("#submission").serialize(),
                success: function() {
                  alert('submitted data: '$("#submission").serialize());
            return false;

                }
            });
        }
    </script>

Please change the form line with this one:

<form name="submission" id="submission" method = "post" action = "<?php $_PHP_SELF ?>" >