Question

I have a form that after the user sends his message by submit button, gives a ‘success sending’ message.

But after a second the original page with the form is showing again
because submit makes the page refresh.

The code is:

<label id="success" style="visibility:   hidden">Your request has been sent successfully</label>
<form method="post" id="messege" onsubmit="return checkAnswer()" style="font-size: medium; margin-top: 10%" dir="rtl">
<div class="clear"></div>
        <div class="content_item">


            <br><br>
          <div style="width:170px; float: right;">name</div>
          <div style="width:430px; float:left;"><p><input class="contact" type="text" id="your_name" value="" /></p></div>
            <br><br><br><br><br>
          <div style="width:170px; float:right;">email</div>
          <div style="width:430px; float:left;"><p><input class="contact" type="text" id="your_email" value="" /></p></div>
            <br><br><br>
          <div style="width:170px; float:right;">the messege</div>
          <div style="width:430px; float:left;"><p><textarea class="contact textarea" rows="8" cols="50" id="your_message"></textarea></p></div>
          <br style="clear:both;" />
</div>
</form> 

The javascript function is:

<script type="text/javascript">

    function checkAnswer() {
        var name = document.getElementById("your_name").value;
        if (name == "") {
            alert("!!! insert name");
            return false;
        }
        var email = document.getElementById("your_email").value;
        if (email == "") {
            alert("!!! insert mail");
            return false;
        }
        var message = document.getElementById("your_message").value;
        if (message == "") {
            alert("!!! insert massege");
            return false;
        }
        var ans = parseInt(document.getElementById("user_answer").value);
        if (ans != 12) {
            alert("!!! wrong answer");
            return false;
        }
        else {
            document.getElementById("success").style.visibility = 'visible';
            document.getElementById("messege").style.visibility = 'hidden';

            return true;
        }

    }

And the asp.net code is:

@{
    var db = Database.Open("MyProjectSite");

    var name="";
    var email="";
    var message="";
    var answer="";

     if(IsPost)
    {
        name=Request.Form["your_name"];
        email=Request.Form["your_email"];
        message=Request.Form["your_message"];
       var insertMessege="INSERT INTO messegesFromCustomers(name,email,content,isCustomer)"+"VALUES (@0,@1,@2,@3)";
       db.Execute(insertMessege,name,email,message,"לא");
       db.Close();
    }

}

When I set the visible property of the success message to:”visible” with javascript,
how could I prevent the refreshing of the page?

The refresh erases my success message too.

Thanks

Answer 1

In your case, the easiest way to work this function in is to add a url flag to signify the successful submission, then on page load check for it and display the confirmation message then, not before the page is submitted as the state of that is not saved (as you are seeing)