Czy można wyczyścić formularz i zresetować (przeładować) stronę jednym przyciskiem?

Question

Mam formularz na stronie, na której użytkownik wpisuje coś, a następnie wynik jest zwracany i wyświetlany na stronie. Czy mogę mieć przycisk, który jednocześnie usunie wyniki wyszukiwania i formularz?

Wiem, że można użyć przycisku <input type="reset" value="Reset"/> w formularzu, aby zresetować formularz, a także użyć następującego kodu, aby ponownie załadować stronę.

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

Czy to możliwe, aby mieć przycisk robić obie rzeczy tj wyczyścić wyniki wyszukiwania i zresetować formularza? Czy można to zrobić za pomocą JavaScript, jeśli tak, to w jaki sposób?

Dzięki

Answer 1

Jeśli chcesz korzystać z obu opublikowanych fragmentów, możesz je po prostu połączyć.

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

(Tam, teraz można przyjąć moją odpowiedź XD)

Answer 2

używając JQuery, zrób coś takiego na stronie;

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

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

, a następnie po prostu użyj drugiego wejścia, formularze zostaną automatycznie odświeżone po załadowaniu strony.

Answer 3

jestem fanem @ sugestią MikeyHogarth od czasu nazywa się to niezależnie od tego, w jaki sposób strona jest odświeżana. Jest to jeden z tych rzadkich przypadków, w których prosty javascript jest prostszy niż jquery, więc chciałem tylko dodać kod do tego.

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

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

używa atrybutu nazwa formularza, a jeśli wolisz za pomocą atrybutu id formularz użyć zamiast tego:

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

Answer 4

można po prostu przekierować stronę do bieżącej lokalizacji z tym kodem:

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

---

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