TUTOS.EU

Bouton en javascript. Ici pour poster un formulaire

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

Exemple de base pour une page en hmtl

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

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

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