阻止页面刷新以将成功消息保留在页面上

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

If you want to submit a form like that and not have the page refresh I think you need to use Ajax. The only way to page can submit the form is by refreshing, unless you send the data to your ASP.net code some other way... one way is using Ajax. (Another is using an iframe, but Ajax is probably the better option).

Take a look at this link:

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

It shows how to submit a form without refreshing the page using ajax (through jQuery).

Hopefully this helps!

Answer 2

在您的情况下，使用此功能的最简单方法是添加url标志以表示提交成功，然后在页面加载时检查它并显示确认消息，而不是在页面提交之前未保存（如您所见）