javascript 如何阻止表单在提交时重置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12487478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop form from resetting on submit
提问by Usman Mutawakil
I have a simple form that triggers an ajax call but as soon as the submit button is clicked the form resets and clears all entries. Do you know how to prevent this? I'd like to have control over when the form gets cleared.The code is below. I suspect I need to abandon the submit function and detect the "click" event on a button.
我有一个触发 ajax 调用的简单表单，但只要点击提交按钮，表单就会重置并清除所有条目。你知道如何预防吗？我想控制表单何时被清除。代码如下。我怀疑我需要放弃提交功能并检测按钮上的“点击”事件。
JQuery
查询
$("#Formid").submit(function(){loadAjax();});
HTML
HTML
<form id="Formid" method="put">
Name<BR/>
<input type="text" name="name"/><BR/><BR/>
Node Id<BR/>
<input type="text" name="node_id"/><BR/><BR/>
Type<BR/>
<input type="text" name="type"/><BR/><BR/>
Parent<BR/>
<input type="text" name="parent_id"/><BR/><BR/>
Longitude<BR/>
<input type="text" name="longitude"/><BR/><BR/>
Latitude<BR/>
<input type="text" name="latitude"/><BR/><BR/>
Description<BR/>
<textarea name="description" rows="5" cols="40">Insert description here</textarea><BR/><BR/>
<input type="submit" value="Add Node"/>
</form>
回答by undefined
You can use preventDefaultmethod of the event object.
您可以使用preventDefault事件对象的方法。
$("#Formid").submit(function(event){
loadAjax();
event.preventDefault()
})
回答by Danil Speransky
You can use e.preventDefault()or return false;within a jQuery event handler:
您可以在 jQuery 事件处理程序中使用e.preventDefault()或return false;：
$("#Formid").submit(function (e) {
loadAjax();
e.preventDefault(); // or return false;
});
e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.
e.preventDefault() 将阻止默认事件发生， e.stopPropagation() 将阻止事件冒泡，返回 false 将两者兼而有之。
回答by r3joe
Alternatively, you could use event.returnValue = false;
或者，您可以使用 event.returnValue = false;
$("#Formid").submit( function(e) {
loadAjax();
e.returnValue = false;
});
This works similarly to "return false;", except it will not exit the function.
这与“return false;”类似，只是它不会退出函数。
回答by MrNams
I have prevented form clearing for search form for my website mrnams.com
我已阻止对我的网站 mrnams.com 的搜索表单进行表单清除
View
看法
@using (@Html.BeginForm("Search", "Home", FormMethod.Post, new { @class = "navbar-form navbar-right pull-right" }))
{
<div class="input-group">
<input id="input-searchQuery" type="text" class="form-control" placeholder="Search this site" name="q">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
}
jQuery functions in View
视图中的 jQuery 函数
@section scripts{
<script type="text/javascript">
$(function () {
var queryReturned = '@ViewBag.SearchQuery';
$("#input-searchQuery").val(queryReturned);
});
</script>
}
And here is the controller.
这是控制器。
public class Home : Controller
{
public ActionResult Search(string q)
{
ViewBag.SearchQuery = q;
}
}
For demo visit https://mrnams.com/
如需演示，请访问https://mrnams.com/
