Можно ли очистить форму и сбросить (перезагрузить) страницу одной кнопкой?

Question

У меня есть форма на странице, где пользователь вводит что-то, а затем возвращается результат и отображается на странице. Могу ли я иметь кнопку, которая одновременно очищает результаты поиска и форму?

Я знаю, что вы можете использовать кнопку <input type="reset" value="Reset"/> в форме для сброса формы, а также использовать следующий код для перезагрузки страницы.

<input type="button" value="Clear Results" onClick="window.location.reload()">

Возможно ли, чтобы кнопка выполняла обе функции, то есть очищала результаты поиска и сбрасывала форму? Можно ли это сделать с помощью JavaScript, если да, то как?

Спасибо

Answer 1

Если вам нужны функциональные возможности обоих опубликованных фрагментов, вы можете просто объединить их.

<input type="reset" value="Reset" onClick="window.location.reload()">

(Там, теперь вы можете принять мой ответ XD)

Answer 2

Я фанат предложения @ MikeyHogarth, поскольку оно называется независимо от того, как страница обновляется.Это один из тех редких случаев, когда я считаю, что простой javascript проще, чем jquery, поэтому я просто хотел добавить код для этого.

$(document).ready(function () {
    resetForms();
});

function resetForms() {
    document.forms['myFormName'].reset();
}

При этом используется атрибут имени формы, и если вы предпочитаете использовать атрибут идентификатора формы, используйте его вместо:

document.getElementById('myFormId').reset();

Answer 3

используя JQuery, сделайте что-то подобное на странице;

$(document).ready(function () {
    resetForms();
});

function resetForms() {
    for (i = 0; i < document.forms.length; i++) {
        document.forms[i].reset();
    }
}

и затем просто используйте ваш второй ввод, формы будут автоматически обновляться при загрузке страницы.

Answer 4

Вы можете просто перенаправить страницу в текущее местоположение с помощью этого кода:

$('[data-command="reset"]').click(function () {    
    window.location.href = window.location.href;
}

---

<input type="button" value="Clear Results" data-command="reset">