TUTOS.EU

Bouton en javascript pour poster un formulaire

Créer un bouton avec du code Javascript qui permet de poster un formulaire

Dans cet exemple de base, le bouton appelle une fonction javascript fctPosterPage() qui poste le formulaire nommé FormMonFormulaire01 

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>

		<meta charset="utf-8" />

		<!-- Code javascript directement dans la page pour plus de lisibilité pour cet exemple -->
		<SCRIPT TYPE="text/javascript">

			function fctPosterPage(){
				document.FormMonFormulaire01.submit();
			}

		</script>
		
	</HEAD>

	<BODY>

		<div id="bloc_page">

			<FORM METHOD="POST" name="FormMonFormulaire01" ACTION="MonExemple01.php">
			Champ 01 : <input type="text" name="TxtChamp01" id="TxtChamp01"  value="Une entrée champ 01" ><br />
			<INPUT type="BUTTON" value="KeyWords"  ONCLICK="fctPosterPage()">
			</FORM>

		</div> <!-- div bloc_page -->
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Exemple plus complexe en php avec récupération de la variable postée, modification et affichage de la valeur dans un second champ.

Pour commencer le bouton est affiché à la fin du code par du code php.
Le bouton appel la fonction javascript fctPosterPage
fctPosterPage récupère la valeur d'un champ texte nommé TxtChamp01 via une fonction javascript recupValeurElement
La valeur de TxtChamp01 est alors collé dans TxtChamp02 puis le formulaire FormMonFormulaire01 est posté.

La valeur du champ TxtChamp02 est récupéré sur la page cible et affichée.

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>

		<meta charset="utf-8" />
		
		<LINK rel="stylesheet" type="text/css" href="../style.css">

		<title>Titre du site</title>
		<meta name="Description" content="Description du site"/>
		<meta name="author" content="Bob l'éponge" />
		<meta name="Keywords" content="a, b, c"/>

		<!-- déclaration des fichiers de scripts -->
		<script type="text/javascript" src="/js/commonscripts.js"></script>

		<!-- Code javascript directement dans la page pour plus de lisibilité pour cet exemple -->
		<SCRIPT TYPE="text/javascript">
			function recupValeurElement(IdElement)
			{
				if (document.getElementById)
				{
					return document.getElementById(IdElement);
				}
				else if (document.all)
				{
					return document.all[IdElement];
				}
			}

			function fctPosterPage(){
				varMaValeur = recupValeurElement("TxtChamp01").value;
				
				if (varMaValeur.length > 0){
					recupValeurElement("TxtChamp02").value = varMaValeur;
					document.FormMonFormulaire01.submit();
				}
			}

		</script>
		
	</HEAD>

	<BODY>

		<div id="bloc_page">
<?php

	$ValeurPosteeChamp02 = $_POST['TxtChamp02'];
				
	$ValeurPosteeChamp02 = trim($ValeurPosteeChamp02); //Retrait des espaces avant et après

	$search  = array('À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'à', 'á', 'â', 'ã', 'ä', 'å', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'î', 'ï', 'ð', 'ò', 'ó', 'ô', 'õ', 'ö', 'ù', 'ú', 'û', 'ü', 'ý', 'ÿ');
	$replace = array('A', 'A', 'A', 'A', 'A', 'A', 'C', 'E', 'E', 'E', 'E', 'I', 'I', 'I', 'I', 'O', 'O', 'O', 'O', 'O', 'U', 'U', 'U', 'U', 'Y', 'a', 'a', 'a', 'a', 'a', 'a', 'c', 'e', 'e', 'e', 'e', 'i', 'i', 'i', 'i', 'o', 'o', 'o', 'o', 'o', 'o', 'u', 'u', 'u', 'u', 'y', 'y');
	$ValeurPosteeChamp02 = str_replace($search, $replace, $ValeurPosteeChamp02); //Retrait des accents. Préférer str_replace à strtr en UTF-8
	$ValeurPosteeChamp02 = preg_replace('/([^.a-z0-9]+)/i', '_', $ValeurPosteeChamp02); //Tout ce qui n'est pas a-z0-9 etc..., le remplacer par _
	
	
	echo "<FORM METHOD=\"POST\" name=\"FormMonFormulaire01\" ACTION=\"MonExemple02.php\">\n";

	echo "Champ 01 : <input type=\"text\" name=\"TxtChamp01\" id=\"TxtChamp01\"  value=\"Une entrée champ 01\" ><br />\n";
	echo "Champ 02 : <input type=\"text\" name=\"TxtChamp02\" id=\"TxtChamp02\"  value=\"$ValeurPosteeChamp02\" ><br />\n";
	echo "<INPUT type=\"BUTTON\" value=\"KeyWords\"  ONCLICK=\"fctPosterPage()\">\n";
	echo "</FORM>\n";
	
?>
		</div> <!-- div bloc_page -->
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Article(s) suivant(s)

Récupérer les valeurs d'un formulaire envoyé par POST

Article(s) précédent(s)

Créer un bouton en HTML

Article(s) en relation(s)

Envoyer les données d'un formulaire et introduction au PHP

2