停止提交按钮刷新页面答案

【问题标题】：Stop submit button to refresh the page停止提交按钮刷新页面
【发布时间】：2019-02-09 18:13:48
【问题描述】：

我有一个<form> 标签，它有 2 个按钮和 2 个文本字段。我的表单中还有其他控件。

以下是表单标签：

<form>
  <input id="Text1" type="text" name="locationText" />
  <input id="Button1" type="submit" value="Search Location" />

  <input id="Text2" type="text" name="refText" />
  <input id="Button2" type="submit" value="Search Ref" />
</form>

当我搜索位置时，它工作正常。使用我提供的查询搜索位置下拉列表。但是，一旦我搜索位置，然后尝试搜索 Ref，页面就会刷新，之前的位置搜索就消失了。

我想在不刷新页面的情况下同时进行搜索。任何建议或帮助将不胜感激。

如何防止这种情况发生？谢谢！

编辑：

页面在第二张图片上刷新。

【问题讨论】：

由于您只有一个表单，因此您不需要两个按钮。只需一个按钮，让服务器端代码一次读取两个值，然后返回结果。不清楚是返回不同查询的两组结果，还是同一个搜索查询的参数？我们必须查看服务器代码。无论哪种方式，您都可以轻松地同时完成这两项工作。
@ADyson 嘿，感谢您的评论。它们是针对两个不同搜索选项的两个不同查询。如果我进行位置搜索，则更新位置下拉列表，如果我进行参考搜索，则更新参考下拉列表。如果我对两者都使用一个按钮，则效果很好。是否可以使用两个按钮并防止表单在搜索后刷新？
我猜 Ajax 是你最好的选择。请发布您的服务器端代码。
创建一个视图模型并强绑定到您的模型属性（如果您绑定到您的模型，您希望如何保留这些值）
如果您不想进行刷新，那么您可以使用 AJAX。你想要避免刷新的原因是什么？如果按照 MVC 推荐的方式将表单元素正确绑定到模型，那么无论如何刷新后都应该保留这些值。从您发布的小代码中，我感觉到您没有这样做。

标签： html asp.net asp.net-mvc-4

【解决方案1】：

您可以通过在表单提交时使用 preventDefault 来防止刷新。

示例代码：

<form onsubmit="event.preventDefault();">
</form>

希望这会有所帮助！

【讨论】：

【解决方案2】：

如果你使用的是javascript那么你不需要使用form标签，你可以使用按钮的onclick事件。

您可以执行其中一项来防止表单提交时刷新页面。

1- 将type=submit 更改为type=button

2- 在您的表单上使用：<form onsubmit="return false;">

【讨论】：