Сброс формы не происходит после обновления страницы auot

Question

У меня есть 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(). Это ошибка, я получил

Uncaught TypeError: Cannot read property 'reset' of undefined

также попытался $('#textVal').val(''); опустошить текстовые поля. Но все же данные остаются в текстовых полях.

Примечание: форма сбрасывается, если пользователь нажал кнопку отправки перед обновлением. Кто-нибудь нуждается в более подробной информации, пожалуйста, дайте мне знать.

Любое решение для этого было бы оценено.

Answer 1

Попробуйте

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

Answer 2

Вся документация вы найдете о .reset() вводит в заблуждение. Он сбрасывает значения форм только в том случае, если нет набора атрибутов value.

Я сделал тест в этом jsfiddle: https://jsfiddle.net/bj2z2x14/.

Когда вы нажимаете кнопку «Отправить», я сначала показываю значение вашего скрытого поля «distance_unit», затем очищаю форму с помощью $('#form')[0].reset(); и повторно отображаю значение, которое по-прежнему установлено из-за атрибута value.

Если вы хотите, чтобы очистить поля, для которых вы укажете значение, вы должны сделать это вручную с чем-то вроде этого:

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

Это сбросит все входные данные в форме, за исключением кнопки отправки (так вы не теряете текст кнопки). Вы можете увидеть это в действии в этом jsfiddle: https://jsfiddle.net/bj2z2x14/1/