Atributo action de formulario en JavaScript

  1. Formulario action Atributo en JavaScript
  2. Otro ejemplo usando JavaScript de acción de formulario
  3. Forma alternativa de usar el atributo de acción de formulario en JavaScript
Atributo action 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

  1. URL absoluta: apunta a otro sitio web (como action="https://www.delftstack.com/tutorial/javascript")
  2. 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.

Artículo relacionado - JavaScript Form