页面自动刷新后不会发生表单重置答案

【问题标题】：Form reset not happen after page auot refreshed页面自动刷新后不会发生表单重置
【发布时间】：2016-02-12 02:03:09
【问题描述】：

我有一个 Iframe，它有一个带有文本字段的表单。这个表单是由 php 脚本创建的。父页面自动刷新，持续不断。

<form id="form"  method="post" action="test.php?vid='.$vid.'">
<table border="1" width="100%"  style="border-collapse:collapse">
<tr>
<th class="col-header list">Distance </th>
<th class="col-header list">Service</th>
<th class="col-header list">Recipient</th>
</tr>
<tr>
<td >
<input type="text" class="input" id="cdistance" name="cdistance" />
</td>
<td nowrap class="list">
<input type="text" class="input" id="service" name="service" />
</td>
<td nowrap class="list">
<input type="text" class="input" id="destination" name="destination" />
</td>
</tr>
<tr>
<td width="100%" colspan="3" style="background:#e0e0e0;">
<input type="submit" class="btn" name="add" id="add" value="Add New"/>
<input type="hidden" name="distance_unit" value="'.$distance.'" />
</td>
</tr>
</table>
</form>

为了避免用户输入的数据丢失（“点击提交之前”），我在父页面中使用查询代码来获取 Iframe 表单中输入的文本，并在页面刷新后将它们添加回文本字段。

我的问题是当用户在页面刷新文本字段未清除（表单未重置）但数据提交成功后点击提交按钮时。所以我尝试通过$('#form')[0].reset()重置表单。这是我得到的错误

未捕获的类型错误：无法读取未定义的属性“重置”

还尝试$('#textVal').val(''); 清空文本字段。但仍然是文本字段中的数据。

注意：如果用户在刷新之前点击提交按钮，则表单会被重置。有人需要更多详细信息，请告诉我。

对此的任何解决方案将不胜感激。

【问题讨论】：

您确定您的表单有id="form" 吗？ .reset() 应该可以工作，但您必须确保使用正确的选择器。
在此处发布您的表格。
@Growiel 是的，表单 ID 是正确的。
你能给我们提供一点你的 HTML 标记吗？
我在这里添加了部分表格。

标签： javascript php jquery html forms

【解决方案1】：

试试

$('#form').trigger("reset");

【讨论】：

即使你使用$('#form')通过id选择，你仍然必须使用$('#form')[0]来获取真正的HTMLFormObject而不是jQuery对象。
谢谢。搞糊涂了。
我试过 $('#form')[0].trigger("reset");并且没有工作。

【解决方案2】：

您会发现所有关于 .reset() 的文档都具有误导性。只有在没有设置value 属性时才会重置表单值。

我在这个 jsfiddle 中做了一个测试：https://jsfiddle.net/bj2z2x14/。

当您单击提交时，我首先显示您隐藏的“距离单位”字段的值，然后使用$('#form')[0].reset(); 清除表单并重新显示该值，由于value 属性，该值仍然设置。

如果要清除指定值的字段，则必须手动执行以下操作：

$('#form').find('input:not([type="submit"])').val('');

这将重置表单中除提交按钮之外的所有输入（因此您不会丢失按钮文本）。你可以在这个 jsfiddle 中看到它的实际效果：https://jsfiddle.net/bj2z2x14/1/

【讨论】：