Attribut action de formulaire en JavaScript

Muhammad Muzammil Hussain 18 mars 2022 JavaScript JavaScript Form
  1. Attribut action du formulaire en JavaScript
  2. Un autre exemple utilisant JavaScript d’action de formulaire
  3. Autre moyen d’utiliser l’attribut Form Action en JavaScript
Attribut action de formulaire en JavaScript

Cet article explique l’attribut action du formulaire JavaScript. Il accède au formulaire, obtient les valeurs de tous les champs, valide les données du formulaire et les envoie à la bonne destination. Voyons quels sont ces attributs d’action et comment ils fonctionnent.

Nous pouvons créer un formulaire de cette manière.

<form action="/signup" method="post" id="signup"> 
</form>

Attribut action du formulaire en JavaScript

L’attribut action spécifie où envoyer les données du formulaire lorsqu’elles sont soumises.

Syntaxe:

<form action="URL">

Valeurs d’attribut d’action

  1. URL absolue - elle pointe vers un autre site Web (comme action="https://www.delftstack.com/tutorial/javascript")
  2. URL relative - elle pointe vers un fichier dans un site Web (comme action="example.htm")

Exemple d’attribut d’action de formulaire utilisant HTML

Envoyez les données du formulaire à un lien donné pour traiter l’entrée lors de la soumission.

<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>

Un autre exemple utilisant JavaScript d’action de formulaire

L’exemple suivant inclut un code HTML issu de l’utilisation d’un attribut 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>

Nous avons ajouté une action de formulaire personnalisée en utilisant JavaScript dans le code ci-dessus.

Autre moyen d’utiliser l’attribut Form Action en JavaScript

Les mêmes résultats peuvent être obtenus en utilisant l’événement onsubmit lorsqu’un utilisateur soumet le formulaire.

Syntaxe:

<element onsubmit="myScript">

Exemple:

<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>

Dans l’exemple ci-dessus, l’événement onsubmit est utilisé pour soumettre des données de formulaire au lieu de l’attribut form action.

Vous aimez nos tutoriels ? Abonnez-vous à DelftStack sur YouTube pour nous aider à créer davantage de tutoriels vidéo de haute qualité. Abonnez-vous

Article connexe - JavaScript Form