How can reset/clear/refresh a form upon submit

Question

I'm have trouble resetting a from after submission. Currently I'm relying on auto refreshing the page to. I've never used php but I managed to hack something a php form set up with a MySQL database.

This form is hidden in a div which toggles in and out in visibility. So the webpage acts like a noticeboard the form is on the same page.

I have used a JQuery function to reset the form. But currently the div still displays the echo.

$(document).ready(function() {
  $('submit').click(function() {
    $('submission')[0].reset(); 
    });
});

My current set up is this:

        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 mvmv3". "(name, proposal, email, join_date ) 
            VALUES('$name','$proposal','$email', NOW())";

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

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

        echo "Entered data successfully\n";

        mysql_close($conn);
     }else {
        ?>


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

      <fieldset>
         <input name = "name" type = "text" 
                       id = "name" required autocomplete="off">
         <input name = "email" type = "text" 
                       id = "email" autocomplete="off">
         <textarea name = "proposal" type = "textarea" size="100"cols="40" rows="20"
                       id = "proposal" placeholder="Your proposal goes here..." required autocomplete="off"></textarea>


      </fieldset> 

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

 </form>
    <?php
        }
    ?>   

What is the best way to go about this? Could I perhaps make the echo disappear after 4 seconds?

Answer 1

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 mvmv3". "(name, proposal, email, join_date ) 
        VALUES('$name','$proposal','$email', NOW())";

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

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

    // WRAP THE "ECHOED" OUTPUT IN A DIV ELEMENT (WITH CLASS &/OR ID) 
    // SO YOU CAN EASILY REFERENCE IT IN JS
    echo "<div class='msg-box' id='msg-box'>Entered data successfully</div>\n";

    mysql_close($conn);
 }else {
 }

JAVASCRIPT

    $(document).ready(function() {

        $('submit').click(function() {
          $('submission')[0].reset(); 

            // FADE-OUT THE DIV 3 SECONDS AFTER CLICKING THE BUTTON USING window.setTimeout... 
            // THIS ASSUMES THAT YOUR FORM IS NOT SUBMITTING NORMALLY (AJAX OR SO)
            /*
            setTimeout(
                function(){ 
                    $("#msg-box").fadeOut(500); 
                }, 
            3000);
            */
          });


        // FADE-OUT THE DIV 3 SECONDS AFTER PROCESSING THE FORM-DATA USING window.setTimeout... 
        // THIS ASSUMES THAT YOUR FORM HAS SUBMITTED NORMALLY (VIA POST OR GET)
        // AND THE MESSAGE IS DISPLAYED BY PHP AFTER PROCESSING...
        setTimeout(
            function(){ 
                $("#msg-box").fadeOut(500); 
            }, 
        3000);
    });

Answer 2

Use something like

      $('input').val('');

to clear all you input fields