Formular-action-Attribut in JavaScript
-
Form
action-Attribut in JavaScript - Ein weiteres Beispiel für die Verwendung von Formularaktions-JavaScript
- Alternative Methode zur Verwendung des Formularaktionsattributs in JavaScript
Dieser Artikel erklärt das action-Attribut von JavaScript. Es greift auf das Formular zu, ruft Werte aller Felder ab, validiert Formulardaten und sendet sie an das richtige Ziel. Schauen wir uns an, was diese Aktionsattribute sind und wie sie funktionieren.
Auf diese Weise können wir ein Formular erstellen.
<form action="/signup" method="post" id="signup">
</form>
Form action-Attribut in JavaScript
Das Attribut action gibt an, wohin die Formulardaten beim Absenden gesendet werden sollen.
Syntax:
<form action="URL">
Aktionsattributwerte
- Absolute URL - sie verweist auf eine andere Website (wie
action="https://www.delftstack.com/tutorial/javascript") - Relative URL – sie verweist auf eine Datei innerhalb einer Website (wie
action="example.htm")
Beispiel für ein Formularaktionsattribut unter Verwendung von HTML
Senden Sie die Formulardaten an einen angegebenen Link, um die Eingabe beim Absenden zu verarbeiten.
<form action="https://www.delftstack.com" method="get">
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname"><br><br>
<input type="submit" value="Submit">
</form>
Ein weiteres Beispiel für die Verwendung von Formularaktions-JavaScript
Das folgende Beispiel enthält einen HTML-Code aus der Verwendung eines form action-Attributs.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form action javascript</title>
<style>
form label
{
display: inline-block;
width: 100px;
}
form div
{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="p-2">
<form id="myForm">
<div>
<label>Name:</label>
<input id="name" name="name" type="text">
</div>
<div>
<label>Email:</label>
<input id="email" name="email" type="email">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
</div>
</body>
<script>
// setting action on window onload event
window.onload = function () {
setAction('action.php');
};
// this event is used to get form action as an alert which is set by setAction function by using getAction function
document.getElementById('submit').addEventListener('click', function (e) {
e.preventDefault();
getAction();
});
// this function is used to set form action
function setAction(action) {
document.getElementById('myForm').action = action;
return false;
}
// this function is used to get form action assigned by setAction function in an alert
function getAction() {
var action = document.getElementById('myForm').action ;
alert(action);
}
</script>
Wir haben eine benutzerdefinierte Formularaktion mit JavaScript im obigen Code hinzugefügt.
Alternative Methode zur Verwendung des Formularaktionsattributs in JavaScript
Die gleichen Ergebnisse sind mit dem onsubmit-Ereignis erreichbar, wenn ein Benutzer das Formular absendet.
Syntax:
<element onsubmit="myScript">
Beispiel:
<form onsubmit="myFunction()">
<div>
<label>Name:</label>
<input id="name" name="name" type="text">
</div>
<div>
<label>Email:</label>
<input id="email" name="email" type="email">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
Im obigen Beispiel wird anstelle des Attributs Formularaktion das Ereignis onsubmit verwendet, um Formulardaten zu übermitteln.