Codage javascript dans de l'html dans du PHP

Résolu/Fermé
Signaler
-
 Chris60 -
Bonjour,

J'aimerais utiliser OnFocus et OnBlur pour changer les minuscules en majuscules une fois qu'on quitte un champ mais je ne sais pas comment faire pour que ça fonctionne en codant du javascript, lui-même codé dans de l'html dans du php.

Mon code est :

<?php
$html_form = <<< END_HTML
<form method="POST" action="commande.php" name="contact_form">
<tr>
<td><input type="text" name="code" value=""></td>
</tr>
END_HTML;
echo $html_form;
?>

Le script affecté à cette opération (qui fonctionne en html) est :

<input type="text" name="code" value="" ONFOCUS="JavaScript:act_form_object=this" ONBLUR="JavaScript: setUpperCase()" MAXLENGTH="6">

avec :

<SCRIPT TYPE="text/javascript"><!--
function setUpperCase() {
if (act_form_object) {
act_form_object.value = act_form_object.value.toUpperCase();
}
return true;
}
-->
</SCRIPT>

dans la balise head.

Ce qui donne, en html :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript"><!--
function setUpperCase() {
if (act_form_object) {
act_form_object.value = act_form_object.value.toUpperCase();
}
return true;
}
-->
</SCRIPT>
</head>

<body>
<INPUT TYPE="Text" NAME="code" VALUE="" ONFOCUS="JavaScript:act_form_object=this" ONBLUR="JavaScript: setUpperCase()" MAXLENGTH="6">
</body>
</html>

D'avance merci.

20 réponses

Bonjour,
C'est un peu compliqué tout ça, tu mets des <tr> <td> sans les balises <table></table>
des <input en dehors de <form

et pourquoi mélanger le php à tout ça, je ne comprend pas trop ou alors tu ne nous a mis que de spetits bouts de ton code;

je t'ai fait ça qui fonctionne lorsque l'input perd le focus (on clique ailleurs)



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript"><!--
function setUpperCase(id_element) {
	var saisie=document.getElementById(id_element).value;
	document.getElementById(id_element).value=saisie.toUpperCase();
}
-->
</SCRIPT>
</head>

<body>
<form method="POST" action="commande.php" name="contact_form">
	<table>
		<tr>
			<td>Code</td>
		</tr>
		<tr>
			<td><input TYPE="Text" NAME="code" id="code" VALUE="" onBlur="JavaScript: setUpperCase('code')" MAXLENGTH="6">
		</tr>
	</table>	
			</body>
</html>
Bonjour,

C'est bien compliqué tout ça.

Tu mets des <tr> <td> sans balise <table>

des <input> en dehors des balises <form

Ou alors tu nous donnes seulement des bouts de ton code.

Je t'ai fait ça qui fonctionne lorsqu'on clique en dehors de l'input (on perd le focus), après c'est à toi de voir pour le déclencheur

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="javascript" type="text/javascript">
<!--
function setUpperCase(id_element) {
	var saisie=document.getElementById(id_element).value;
	document.getElementById(id_element).value=saisie.toUpperCase();
}
//-->
</SCRIPT>
</head>

<body>
<form method="POST" action="commande.php" name="contact_form">
	<table>
		<tr>
			<td>Code</td>
		</tr>
		<tr>
			<td><input TYPE="Text" NAME="code" id="code" VALUE="" onBlur="JavaScript: setUpperCase('code')" MAXLENGTH="6">
		</tr>
	</table>	
			</body>
</html>
Bonjour,
C'est un peu compliqué tout ça, tu mets des <tr> <td> sans les balises <table></table>
des <input en dehors de <form

et pourquoi mélanger le php à tout ça, je ne comprend pas trop ou alors tu ne nous a mis que de spetits bouts de ton code;

je t'ai fait ça qui fonctionne lorsque l'input perd le focus (on clique ailleurs)



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript"><!--
function setUpperCase(id_element) {
	var saisie=document.getElementById(id_element).value;
	document.getElementById(id_element).value=saisie.toUpperCase();
}
-->
</SCRIPT>
</head>

<body>
<form method="POST" action="commande.php" name="contact_form">
	<table>
		<tr>
			<td>Code</td>
		</tr>
		<tr>
			<td><input TYPE="Text" NAME="code" id="code" VALUE="" onBlur="JavaScript: setUpperCase('code')" MAXLENGTH="6">
		</tr>
	</table>	
			</body>
</html>
Messages postés
24
Date d'inscription
vendredi 26 octobre 2007
Statut
Membre
Dernière intervention
10 juillet 2014
1
Oui, je n'ai pas mis tout le code, mais juste ce qui pourrait permettre de régler mon problème.
C'est un formulaire en PHP et ton code en html ne peut malheureusement pas me servir.
Merci quand même.
Si ça peut t'aider je peux te donner tout le code :

<?php
/*-------------------------------------------------------------------------------
Copyrights 2007 (c) WebSpamProtect.com
-------------------------------------------------------------------------------*/

/////////// Settings ///////////
$YourEmail = "christian@souriredeboncoeur.com"; // Add your e-mail here
$Subject = "Formulaire de commande bottes de 7 lieues (données personnelles)"; // Add e-mail subject here
$ThanksMessage = "Merci, vos coordonnées nous sont bien parvenues.<br>Vous pouvez maintenant passer à la commande."; // Add your own 'thanks' message here
$ErrColor = "#FF0000"; // error text color
/////////// End Settings ///////

session_start();

$formAction = $_POST["action"];
$formError = array();

if ($formAction == 'submit') submitForm();

showHeader();

if ($formAction == 'submit' && !count($formError)) showThanks();
else showForm();

showFooter();

/*-------------------------------------------------------------------------------
Functions
-------------------------------------------------------------------------------*/

// You can add you own header here
function showHeader() {
$header = <<< END_HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="WebSpamProtect.com" />
</head>
<body background="7milesboot_bg.gif">
<p align="center"><u><br><font face="Arial, Helvetica, sans-serif"><strong>Etape 1 : envoi de vos coordonnées</strong></font></u></p>
<table width="641" border="0" align="center" bordercolor="#990000">
<tr>
<td width="23" height="34"><img src="Warning.gif" width="18" height="18" align="middle"></td>
<td width="631"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2">pour
pouvoir utiliser ce formulaire votre ordinateur doit <a href="https://www.microsoft.com/en-us/windows/">autoriser
certains cookies</a> (confidentialité </font><font face="Arial, Helvetica, sans-serif" size="2">"Haute"</font><font face="Arial, Helvetica, sans-serif" size="2">
</font><font face="Arial, Helvetica, sans-serif" size="2">maximum) et
la fonction <a href="https://support.google.com/answer/23852">javascript</a>
doit être activée, faute de quoi le code ne pourra pas être validé.</font></div></td>
</tr>
</table>
</font></p>
END_HTML;

echo $header;
}

// You can add you own footer here
function showFooter() {
$footer = <<< END_HTML
<p align="center"><a href="http://www.souriredeboncoeur.com/" style="text-decoration:none"><font face="Arial, Helvetica, sans-serif" color="#990000" size="1">Retour Ass. Sourire de bon coeur</font></a></p>
</body>
</html>
END_HTML;

echo $footer;
}

// thanks message output
function showThanks() {
global $ThanksMessage;

$html_thanks = <<< END_HTML
<div style="text-align:center;"><font face="Arial, Helvetica, sans-serif">
$ThanksMessage
<form name="form1" method="post" action="/form/index7m.htm">
<input type="submit" name="Submit" value=" Passer à la commande ">
<font color="#800000" size="4"></font>
</form>
</div>
END_HTML;

echo $html_thanks;
}

// form output
function showForm() {
global $formError, $ErrColor;
$name = "";
$address = "";
$npalieu = "";
$tel = "";
$email = "";
$poids = "";
$session_id = session_id();

if ($formError) {
$name = htmlspecialchars(trim($_POST["name"]));
$address = htmlspecialchars(trim($_POST["address"]));
$npalieu = htmlspecialchars(trim($_POST["npalieu"]));
$tel = htmlspecialchars(trim($_POST["tel"]));
$email = htmlspecialchars(trim($_POST["email"]));
$poids = htmlspecialchars(trim($_POST["poids"]));
$message = htmlspecialchars(trim($_POST["message"]));
}

$html_form = <<< END_HTML
<form method="POST" action="commande.php" name="contact_form">
<input type="hidden" name="action" value="submit">
<table align="center">
<tr>
<td><font face="Arial, Helvetica, sans-serif">Civilité : </td>
<td><select name="anrede" id="anrede" size="1">
<option value="Inchangé">Sélectionnez</option>
<option value="Monsieur">Monsieur</option>
<option value="Madame">Madame</option>
<option value="Société">Société</option>
</select></td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Nom/Prénom : *</td>
<td><input type="text" name="name" value="$name" maxlength="255"> <span style="color:{$ErrColor};"> {$formError['name']}</td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Adresse : *</td>
<td><input type="text" name="address" value="$address" maxlength="255"> <span style="color:{$ErrColor};"> {$formError['address']}</td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">NPA/lieu : *</td>
<td><input type="text" name="npalieu" value="$npalieu" maxlength="255"> <span style="color:{$ErrColor};"> {$formError['npalieu']}</td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Tél. : *</td>
<td><input type="text" name="tel" value="$tel" maxlength="255"> <span style="color:{$ErrColor};"> {$formError['tel']}</td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Email : *</td>
<td><input type="text" name="email" value="$email" maxlength="255"> <span style="color:{$ErrColor};"> {$formError['email']}</td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Votre poids : *</td>
<td><input type="text" name="poids" value="$poids" maxlength="255"> <span style="color:{$ErrColor};"> {$formError['poids']}</td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Message : </td>
<td><textarea name="message" cols="30" rows="5">$message</textarea></td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Code de vérification : <br><font size="2" color="#990000">(code illisible ? <strong>:</strong> cliquez sur "ac-<br>tualiser" dans votre navigateur)</td>
<td><img border="0" src="wsp_get_captcha.php?s=$session_id" width="135" height="50"></a></td>
<td><font face="Arial, Helvetica, sans-serif"><font size="2"></td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif">Entrez le code ci-dessus : *<br><font size="2" color="#990000">(respecter la casse)</td>
<td><input type="text" name="code" value=""> <span style="color:{$ErrColor};">{$formError['code']}</td>
</tr>
<tr>
<td><br><font face="Arial, Helvetica, sans-serif">* champs obligatoires</td>
</tr>
<td colspan="2" align="right"><input type="submit" value=" Envoyer "></font></td>
</tr>
</table>
</form>
END_HTML;

echo $html_form;
}

// form handler
function submitForm() {
global $formError, $YourEmail, $Subject;

// get form fields
$anrede = trim($_POST["anrede"]);
$name = trim($_POST["name"]);
$address = trim($_POST["address"]);
$npalieu = trim($_POST["npalieu"]);
$email = trim($_POST["email"]);
$tel = trim($_POST["tel"]);
$poids = trim($_POST["poids"]);
$message = trim($_POST["message"]);
$code = trim($_POST["code"]);
$anrede = preg_replace("/[\n\r]+/", "", $anrede);
$name = preg_replace("/[\n\r]+/", "", $name);
$address = preg_replace("/[\n\r]+/", "", $address);
$npalieu = preg_replace("/[\n\r]+/", "", $npalieu);
$email = preg_replace("/[\n\r]+/", "", $email);
$tel = preg_replace("/[\n\r]+/", "", $tel);
$poids = preg_replace("/[\n\r]+/", "", $poids);
$forbidden = array("/MIME\-Version\:/i", "/Content\-Type\:/i", "/From\:/i", "/To\:/i", "/Cc\:/i", "/Bcc\:/i");
$anrede = preg_replace($forbidden, "", $anrede);
$name = preg_replace($forbidden, "", $name);
$address = preg_replace($forbidden, "", $address);
$npalieu = preg_replace($forbidden, "", $npalieu);
$email = preg_replace($forbidden, "", $email);
$tel = preg_replace($forbidden, "", $tel);
$poids = preg_replace($forbidden, "", $poids);
$message = preg_replace($forbidden, "", $message);

// validate form fields
if (!$name) $formError['name'] = "Veuillez entrer vos nom et prénom.";
if (!$address) $formError['address'] = "Veuillez entrer votre adresse.";
if (!$npalieu) $formError['npalieu'] = "Veuillez entrer vos NPA et lieu.";
if (!$email) $formError['email'] = "Veuillez entrer votre adresse e-mail.";
elseif (!preg_match('/^([A-Z0-9]+[._]?){1,}[A-Z0-9]+\@(([A-Z0-9]+[-]?){1,}[A-Z0-9]+\.){1,}[A-Z]{2,4}$/i', $email)) {
$formError['email'] = "Veuillez entrer une adresse e-mail valide.";
}
if (!$tel) $formError['tel'] = "Veuillez entrer votre no de tél.";
if (!$poids) $formError['poids'] = "Veuillez entrer votre poids.";
if (!checkConfirmationCode($code)) $formError['code'] = "Code incorrect ou manquant.";
if (count($formError)) return;

// build and send e-mail
$body = "Civilité : $anrede\n";
$body .= "Nom/prénom : $name\n";
$body .= "Adresse : $address\n";
$body .= "NPA/lieu : $npalieu\n";
$body .= "Email : $email\n";
$body .= "Tél. : $tel\n";
$body .= "Poids : $poids\n";
$body .= "IP: ".$_SERVER['REMOTE_ADDR']."\n";
$body .= "Message:\n$message\n";
$headers = "From: $email\r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "X-Mailer: PHP\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
@mail($YourEmail, $Subject, $body, $headers);
}

function checkConfirmationCode($code) {
if (!$code || ($code != $_SESSION['verification_code'])) return false;
return true;
}

?>

Le bout de code que j'ai donné se trouve à la ligne 156.
Merci d'avance.
Bonjour,

Tout d'abord excuses mopi pour les 3 posts identiques, j'avais l'impression que CCM était planté, j'ai recommencé 3 fois.

Je vois que c'est le PHP qui génere le formulaire HTML,

alors pourquoi ne pas t'inspirer de ce que je t'ai passé pour modifier le formulaire, rajouter id= et appel de fonction dans l'input concerné

et pour la fonction javascript par exemple après:
$html_form = <<< END_HTML
tu rajoutes:

<SCRIPT TYPE="text/javascript"><!--
function setUpperCase(id_element) {
	var saisie=document.getElementById(id_element).value;
	document.getElementById(id_element).value=saisie.toUpperCase();
}
-->
</SCRIPT>
Messages postés
24
Date d'inscription
vendredi 26 octobre 2007
Statut
Membre
Dernière intervention
10 juillet 2014
1
Merci.
J'ai essayé mais malgré ça, les lettres saisies en minuscules le restent désespérement quand on sort du champ.
Une autre idée ? Ou correction ?
Bonsoir,

Quand tu dis sort du champ:
c'est bien qd tu cliques en dehors du champ dans un autre champ par exemple ?

Pour voir si tu appelles bien la fonction Javascript, tu rajoutes:

<SCRIPT TYPE="text/javascript"><!--
function setUpperCase(id_element) {
	var saisie=document.getElementById(id_element).value;
          alert("Caracteres saisis:  "+saisie);
	document.getElementById(id_element).value=saisie.toUpperCase();
}
-->
</SCRIPT>


Tu devrais voir apparaitre une boite d'alerte qd tu cliques en dehors du champ après y avoir saisi qqs caracteres
Messages postés
24
Date d'inscription
vendredi 26 octobre 2007
Statut
Membre
Dernière intervention
10 juillet 2014
1
Oui, quand je sors du champ. Quand je clique dans un autre champ ou ailleurs dans le formulaire.
Je viens d'essayer mais... pas d'alerte.
Messages postés
24
Date d'inscription
vendredi 26 octobre 2007
Statut
Membre
Dernière intervention
10 juillet 2014
1
Tu peux voir le formulaire à l'adresse suivante : http://www.souriredeboncoeur.com/form/commande.php
Personnellement je ne connais que peu le php. J'ai trouvé ce code sur un site traitant de ce langage informatique.
Le problème est que ce formulaire génère un captcha dans lequel toutes les lettres sont en majuscules et je voudrais éviter à l'internaute débutant de devoir mettre les majuscules.
Ca peut paraître bête mais j'ai déjà vu pas mal de captchas dans lesquels la casse n'a aucune importance.
Toutefois je ne me sens pas capable de changer complètement le code et, comme j'ai trouvé cette solution qui devrait permettre de transformer les minuscules en majuscules, je me suis dit que c'est exactement ce qu'il me fallait.
Rebonsoir,

Je ne peux pas acceder à ta pge.

As tu bien mis onBlur="JavaScript: setUpperCase('code')"

dans le <input concerné ?

Sinon, je suppose que tu traites ce formulaire ensuite, donc a ce moment la ne peux tu pas mettre d'office en majuscules par une fonction php ce que tu reçoit.

par exemple
$code_majuscule=strtoupper($_POST['code']);
Messages postés
24
Date d'inscription
vendredi 26 octobre 2007
Statut
Membre
Dernière intervention
10 juillet 2014
1
Non, je ne l'avais pas mi.
Cette fois ça fonctionne.
Super.
Désolé pour le lien : le "." a été pris avec.
Regarde http://www.souriredeboncoeur.com/form/commande.php
Encore merci et bonne fin de soirée.
Resalut,
Je viens d'essayer le code sur Firefox et ça ne fonctionne pas : rien ne se passe. Alors que sur I.E., c'est nickel.
Une idée ?
D'avance merci.
Bonsoir,

Un retour ?

Je viens de retrouver le code, chez moi ça fonctionne sous IE et sous Firefox.

Mais attention les caractères sont mis en majuscule quand le champ perd le focus, il faut donc clicker ailleurs en dehors du champ.

Mon code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript"><!--
function setUpperCase(id_element) {
	var saisie=document.getElementById(id_element).value;
	document.getElementById(id_element).value=saisie.toUpperCase();
}
-->
</SCRIPT>
</head>

<body>
<form method="POST" action="commande.php" name="contact_form">
	<table>
		<tr>
			<td>Code</td>
		</tr>
		<tr>
			<td><input TYPE="Text" NAME="code" id="code" VALUE="" onBlur="JavaScript: setUpperCase('code')" MAXLENGTH="6">
		</tr>
	</table>	
			</body>
</html>


@lain
Salut,
Oui, un retour.
J'ai essayé mon formulaire sous FF par hasard et j'ai bien dû me rendre à l'évidence : ça ne marche pas.
Bon je me suis également aperçu que je n'avais rien mis dans le <head> mais ça marche quand même sous IE.
Alors j'ai essayé de corriger tout ça, j'ai mis le code ad hoc dans le <head>, uploadé, mais... ça ne marche toujours pas.
En fait j'ai aussi constaté qu'il y avait 2 <head> dans ce formulaire (qui n'est pas de moi).
J'ai donc essayé de mettre le code dans l'autre <head> mais ça ne marche toujours pas.
Je me suis donc dit que j'allais essayer dans les 2 : pas de miracle, ça ne marche pas non plus.
J'ai ensuite pensé qu'il s'agissait de l'extension qui est .php chez moi et .htm ou .html chez toi.
J'ai uploadé ton exemple avec les deux extensions sur mon site et... ça marche (avec FF donc).
C'est à n'y rien comprendre. Est-ce parce que c'est codé en une bonne partie en php ? Je ne sais pas.
Si tu arrives à quelque chose, je t'en serais reconnaissant.
Merci d'avance.
Meilleures salutations.
Bonsoir,

si le code concerné est celui du lien: http://www.souriredeboncoeur.com/form/commande.php

Alors il y d'autres erreurs

j'ai détecté plusieurs fois <body> <html>

Tu a aussi mis pour la fonction JS Uppercase

les <!-- --> alors qu'il faut <!-- //--> pour encadrer du JS
Salut,
Oui, il s'agit bien du code du lien que tu as mentionné (voir le code complet plus haut).
Je ne peux que mettre que le problème est résolu, puisque ton script fonctionne en dehors de mon site.
Toutefois je n'ai toujours pas trouvé la solution.
Je vais donc essayer de poser la question à l'auteur du formulaire (WebSpamProtect.com ).
Attention, l'idée de mettre un setUpperCase est de moi :-)).
Merci et bonne continuation.
Bonjour,

As tu essayé en mettant <!-- //--> à la palce de <!-- --> de part et d'autre de la fonction setUpperCase ?

Si tu n'as pas de résultat du côté de ton développeur (WebSpamProtect.com ), comme je vois que c'est pour une asso caritative, reviens sur cette discution, je te donnerai un coup de main. (si tu n'est pas trop pressé). On communiquerait par mail , c'est plus facile pour envoyer les fichiers.

@lain
Salut,
Oui j'ai essayé avec le //--> mais ça n'a pas l'air de fonctionner.
J'ai envoyé un mail à WebSpamProtect hier matin et je n'ai encore rien reçu alors que normalement, ils me répondent dans les heures qui suivent.
Le code entier est mentionné plus haut dans ce thread.
Si tu veux t'amuser à trouver la faille je t'en remercie d'avance.
Merci aussi pour ton sens humain.
Meilleures salutations.
Bonsoir,

Vers le milieu de ta page lignes 90:
ça c'est en trop:
</body>
</html><html>
<body>


Mais j'ai l'impression que ta page est crée avec un include comm pied de page et cela inclue une page html avec les balises <html> <body>

Ca ne gène pas forcément pour ton problème.

par contre pour la fonction javascript:

ligne 79:

 <td><input type="text" name="code" id="code" value="" onBlur="JavaScript:setUpperCase('code');" MAXLENGTH="6"> <span style="color:#FF0000;"></td>


avec ça ça marche sur FF et IE (il manquait id="code" ).

@lain
Merci Alain,
Cette fois ça marche.
Je souffle enfin. Je peux mettre un vrai "Résolu", lol.
Toute ma gratitude ;-).
Bonne suite à toi.
Christian.