Leeres Eingabefeld mit JQuery
-
Klares Eingabefeld mit definierter
Klasse&Eingabe[Typ] -
Eingabefeld löschen Mit
input[type]alsSelector
Nach der Validierung eines Formulars müssen wir die Seite oft aktualisieren, wenn die Daten gepostet oder gespeichert werden. Dies ist aus Sicherheitsgründen erforderlich, da der folgende Benutzer die Anmeldeinformationen des vorherigen abrufen könnte.
In einer gut organisierten Webseite und einem Formular sorgen wir dafür, dass die Eingabefelder nach der ordnungsgemäßen Übermittlung zurückgesetzt werden. Leider wird auch diese Konvention so streng befolgt, dass Eingabefelder nach einer begrenzten Sitzungszeit ungültig werden und eine Aktualisierung erforderlich ist.
In diesem Artikel wird ein Codebeispiel verwendet, um einen weit verbreiteten Ansatz zum Löschen eines Eingabefelds kennenzulernen. Der Pluspunkt ist, dass es einfach zu implementieren ist.
Klares Eingabefeld mit definierter Klasse & Eingabe[Typ]
Hier richten wir zwei Eingabefelder ein; eine mit dem Typ text und die andere mit dem Typ Passwort. Wir werden also eine Schaltfläche erstellen, die eine Übermittlung sicherstellt.
Immer wenn auf die Schaltfläche geklickt wird, wird das spezifische Eingabefeld gelöscht. Springen wir also zum Codezaun.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
</script>
</html>
Ausgang:
Wie man sehen kann, wurde im Skript die jQuery("input[type='text']") initiiert und ihr folgte die .val("").
Dies zeigt, dass das Eingabefeld zunächst leer ist und nach der Übermittlung zurückgesetzt wird. In diesem Code haben wir das class="input" verwendet, um das spätere Löschen des Eingabefeldtextes zu ergänzen.
Eingabefeld löschen Mit input[type] als Selector
Hier ersetzen wir einfach $("input[type="password"]") durch $(:password). Und dieser Selektor wird die gleiche Aufgabe wie zuvor erfüllen. Springen wir zum Code-Snippet.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
$(document).ready(function() {
$(":password").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(":password").val("");
});
});
</script>
</html>
Ausgang:
