我有一个表单,在用户通过提交按钮发送消息后,会发出“成功发送”消息。
但是一秒钟后,表单的原始页面再次显示 因为提交会使页面刷新。
代码是:
<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>
javascript函数是:
<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;
}
}
asp.net代码是:
@{
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();
}
}
当我使用javascript将成功消息的visible属性设置为:“visible”时 我怎么能阻止刷新页面呢?
刷新也会删除我的成功消息。
由于
答案 0 :(得分:0)
如果你想提交一个这样的表格而没有页面刷新,我认为你需要使用Ajax。页面提交表单的唯一方法是刷新,除非你以其他方式将数据发送到ASP.net代码......一种方法是使用Ajax。 (另一个是使用iframe,但Ajax可能是更好的选择)。
看一下这个链接:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
它显示了如何使用ajax(通过jQuery)提交表单而不刷新页面。
希望这有帮助!
答案 1 :(得分:0)
在您的情况下,使用此函数的最简单方法是添加url标志以表示成功提交,然后在页面加载时检查它并显示确认消息,而不是在页面作为状态提交之前其中没有保存(如你所见)