Textbox-Wert abrufen in JavaScript
In diesem Tutorial erfahren Sie mehr über die Textwert-Eigenschaft und die jQuery-val()-Funktion, um den Wert eines JavaScript-Textfelds abzurufen.
Die Textwert-Eigenschaft wird verwendet, um den Wert des Wertattributs des Eingabefelds zurückzugeben oder festzulegen. Das Wertattribut zeigt den Anfangswert des Eingabetextfelds an. Es kann benutzerdefinierte Werte oder Standardwerte haben.
Die jQuery-Methode val() dient zum Abrufen des Werts des Formularelements. Das Formularelement bedeutet hier die Elemente input, textarea und select. Es gibt das undefined zurück, wenn es für eine leere Sammlung aufgerufen wird. Die Funktion val() setzt oder gibt den Wert des Wertattributs der ausgewählten Elemente zurück.
Mit dieser Funktion können wir den Wert des Wertattributs für alle übereinstimmenden Elemente festlegen und den Wert des Wertattributs des ersten übereinstimmenden Elements zurückgeben. Denken Sie daran, dass diese Funktion hauptsächlich mit HTML-Formularelementen verwendet wird.
Der HTML-Code bleibt für alle Beispiele gleich (mit Ausnahme desjenigen, das das Element <form> verwendet), aber der JavaScript-Code wird sich ständig ändern, um verschiedene Methoden zu üben.
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title> Learning JavaScript Get Textbox Value</title>
</head>
<body>
Full Name: <input type="text" id="fullName" name="fullName" value="Mehvish Ashiq">
<button type="button" onclick="nameFunction()">Submit</button>
<p id="displayName"></p>
</body>
</html>
Verschiedene Möglichkeiten, um den Wert von JavaScript Textbox zu erhalten
Unten sind verschiedene JavaScript-Codeausschnitte angegeben, um den Wert des JavaScript-Textfelds abzurufen.
function nameFunction() {
var element = document.getElementById('fullName').value;
document.getElementById('displayName').innerHTML = element;
}
AUSGANG:
Die erste Methode, die wir lernen, um den Wert von Textbox zu erhalten, ist document.getElementById(). Es wählt das erste Element mit dem id-Attribut mit dem bestimmten Wert aus (hier ist es fullName), erhält seinen Wert mithilfe der .value-Eigenschaft und speichert ihn in der element-Variablen. Das document.getElementById() wird wieder verwendet, um den Inhalt eines Elements mit dem Wert displayName der ID zu ändern. Um den Inhalt zu aktualisieren, wird die Eigenschaft .innerHTML verwendet.
function nameFunction() {
// first element in DOM (index 0) with name="fullName"
var element = document.getElementsByName('fullName')[0].value
document.getElementById('displayName').innerHTML = element;
}
AUSGANG:
Der obige JavaScript-Code verwendet document.getElementByName, um die Liste aller Elemente mit dem angegebenen Namen (in diesem Fall fullName) zu erhalten. Der Wert des Elements bei Index 0 wird aus der Liste aller Elemente ausgewählt. Dies kann auch verwendet werden, wenn Ihr Element kein id-Attribut hat.
function nameFunction() {
document.getElementById('displayName').innerHTML =
document.forms[0].elements[0].value;
}
AUSGANG:
Der obige Code ändert den Inhalt eines Elements, dessen ID-Wert displayName ist, und weist den von Index 0 empfangenen Wert zu. Denken Sie daran, dass Sie ein <form>-Element in Ihrer HTML-Datei haben müssen, um den Wert nach Index zu erhalten.
function nameFunction() {
document.getElementById('displayName').innerHTML = $('input:text').val();
}
AUSGANG:
Das oben angegebene Code-Snippet stellt die jQuery-Methode val() dar, die verwendet wird, um auf den Wert der JavaScript-Textbox zuzugreifen. Diese Methode erhält den Wert des ersten input-Elements, dessen Typ text ist. Vergessen Sie nicht, jQuery in das <head>-Tag einzufügen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
