Question

我有一个iframe，其中包含带有文本字段的表单。此表单由php脚本创建。父页面连续刷新auto。

<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()重置表单。这是我得到的错误

未捕获的TypeError：无法读取未定义的属性“reset”

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

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

任何解决方案都将不胜感激。

Answer 1

尝试

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

Answer 2

您将找到关于.reset()的所有文档都会产生误导。仅当没有设置value属性时，它才会重置表单值。

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

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

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

value

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

页面auot刷新后不会发生表单重置

2 个答案: