不想刷新并保留最后插入的值
Posted
技术标签:
【中文标题】不想刷新并保留最后插入的值【英文标题】：don't want to refresh & retain last inserted values 【发布时间】：2012-12-06 19:19:06 【问题描述】：在我的 htm 页面中，我想使用一个按钮，通过使用函数提交我的表单。我在我的字段上使用验证，当我按下提交按钮时，它会显示错误消息但不保留最后一个值，它会刷新我的表单。我只是希望我输入的值将存在于那里，并且只有错误消息的字段将消失。所有其他字段都保留在那里。 这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--<meta http-equiv="refresh" content="text/html; charset=iso-8859-1" />-->
<!--
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-->
<title>Phone Registration</title>
<link rel="stylesheet" type="text/css" href="file:///C|/xampp/htdocs/track/css/view.css" media="all"/>
<script type="text/javascript" src="file:///C|/xampp/htdocs/track/javascript/view.js"></script>
<script type="text/javascript" src="file:///C|/xampp/htdocs/track/javascript/external.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function()
$( "#datepicker" ).datepicker();
);
</script>
</head>
<body id="main_body" >
<img id="top" src="file:///C|/xampp/htdocs/track/images/top.png" />
<div id="form_container">
<h3>
<a href="file:///C|/xampp/htdocs/track/phonereg.php">Phone Registration</a>
<a href="file:///C|/xampp/htdocs/track/officerreg.php">Officer Registration</a>
<a href="file:///C|/xampp/htdocs/track/customerreg.php">Customer Registration</a>
<a href="file:///C|/xampp/htdocs/track/taskentry.php">Task Entry</a>
</h3>
<form name="order" id="form_532698" class="appnitro" method="post" action="" >
<div class="form_description">
<h2>Phone Registration</h2>
</div>
<ul >
<li>
<span>
<label class="description">IMEI # : </label>
<input name="imei" id="imeinum" class="element text medium" type="text" maxlength="15" value=""/>
</span>
</li>
<li>
<span>
<label class="description" >Phone Number </label>
<input name="phone" id="phnum" class="element text medium" type="text" maxlength="11" value="" onblur="validate(this)"/>
</span>
</li>
<li>
<span>
<label class="description" >From Date </label>
<input id="datepicker" name="fdate" class="element text medium" maxlength="10" value="" type="text"/>
</span>
</li>
<li>
<span>
<label class="description" for="element_4">Active </label>
<input name="r1" id="rad" class="element radio" type="radio" value="Yes" checked="checked" />
<label class="choice">Yes</label>
<input name="r1" id="rad" class="element radio" type="radio" value="No" />
<label class="choice">No</label>
</span>
</li>
<li>
<input type="button" name="save" value="Save" />
</li>
<!--
<li class="buttons">
<input type="hidden" name="form_id" value="532698" />
<input class="button_text" type="submit" name="save" value="Save" id="" />
<input class="button_text" type="reset" name="cancel" value="Cancel" />
<input class="button_text" type="submit" name="search" value="Search" id="" />
<input class="button_text" type="submit" name="up" value="Update" id="" />
<input class="button_text" type="submit" name="del" value="Delete" id="" />
</li>
-->
</ul>
</form>
</div>
<img id="bottom" src="file:///C|/xampp/htdocs/track/images/bottom.png" />
<script type="text/javascript" language="JavaScript">
//submit form
document.order.submit();
</script>
</body>
</html>
请指导我如何做到这一点？我会感谢你的
【问题讨论】：
【参考方案1】：如果验证失败，您可以使用此代码阻止表单提交到服务器：
$("form").on("submit", function(event)
if(!isValidForm($(this))
event.preventDefault();
);
假设 isValidForm() 方法采用表单选择器，如果表单有效则返回 true，否则返回 false。
【讨论】：
【参考方案2】：使用e.preventDefault(); 或return false;
【讨论】：
你觉得会吗？ @VytautasButkus 是的，如果你使用return false;，它会做到吗？有任何疑问
@Mona 你会得到结果:)【参考方案3】：
在 $(function()) 中检查验证是否成功，如果不成功则返回 false。否则返回 true...
<script>
$(function()
$( "#datepicker" ).datepicker();
if(!validation)
return false;
return true;
);
</script>
【讨论】：
【参考方案4】：有两种主要的方法：PHP（服务器端）和 javascript（客户端）。
PHP 解决方案不是那么干净，您需要刷新页面，检查那里的值并在每个输入中设置正确的value（删除要删除的那些）
javascript/jQuery 解决方案更简洁：使用调用 javascript 函数的按钮代替 <input type='submit' />，检查每个输入（如果您需要服务器信息来检查它们，您可以使用 Ajax）并显示错误，仅设置那些错误的空白。
这两种方法都可以，但是javascript方法更容易控制/更新，而且由于它不刷新页面，所以对用户更友好。
【讨论】：
以上是关于不想刷新并保留最后插入的值的主要内容，如果未能解决你的问题，请参考以下文章