Atributo action de formulario en JavaScript
-
Formulario
actionAtributo en JavaScript - Otro ejemplo usando JavaScript de acción de formulario
- Forma alternativa de usar el atributo de acción de formulario en JavaScript
Este artículo explica el atributo action del formulario de JavaScript. Accede al formulario, obtiene los valores de todos los campos, valida los datos del formulario y los envía al destino correcto. Veamos qué son estos atributos de acción y cómo funcionan.
Podemos crear un formulario de esta manera.
<form action="/signup" method="post" id="signup">
</form>
Formulario action Atributo en JavaScript
El atributo action especifica dónde enviar los datos del formulario cuando se envían.
Sintaxis:
<form action="URL">
Valores de atributo action
- URL absoluta: apunta a otro sitio web (como
action="https://www.delftstack.com/tutorial/javascript") - URL relativa: apunta a un archivo dentro de un sitio web (como
action="example.htm")
Ejemplo de atributo de acción de formulario usando HTML
Envíe los datos del formulario a un enlace dado para procesar la entrada al enviar.
<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>
Otro ejemplo usando JavaScript de acción de formulario
El siguiente ejemplo incluye un HTML que utiliza el atributo form action.
<!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>
Hemos agregado una form action personalizada usando JavaScript en el código anterior.
Forma alternativa de usar el atributo de acción de formulario en JavaScript
Los mismos resultados se pueden lograr utilizando el evento onsubmit cuando un usuario envía el formulario.
Sintaxis:
<element onsubmit="myScript">
Ejemplo:
<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>
En el ejemplo anterior, el evento onsubmit se usa para enviar datos de formulario en lugar del atributo form action.