Calcul javascript + envoi par un formulaire

hache.z · 17 Décembre 2010

Bonjour,
je suis un peu novice avec le php + javascript et je suis en train de travailler sur ce formulaire de commande , qui marche très bien, mis à part 3 choses:

Lorsque je teste la commande, je ne reçois pas l'information "total"= montant total de la commande.
Deuxio, en ce qui concerne le nombre de boites, j'aimerai qu'il soit indiqué, à reception de la commande, "1 boite" plutôt que "49.50". Actuellement je reçois la valeur "value" plutôt que "name", c'est un peu embêtant. Mais j'ai besoin de laisser le montant dans "value", pck que le javascript l'utilise pour calculer le total....

Troisièmement, j'ai des chiffres en gif qui s'affichent pour "sécuriser" le formulaire, et une fois sur deux, 1 des 4 chiffres ne s'affiche pas. J'ai tout essayé, ré-enregistrer les gif, les changer en jpg, bref, sans réussite!

merci d'avance pour vos réponses!

Code:

<?
//---------------------------------------------------------------------------------------

	$DOCUMENT_ROOT=$_SERVER["DOCUMENT_ROOT"];
	$PHP_SELF=$_SERVER["PHP_SELF"];

//---------------------------------------------------------------------------------------



//Caracteres speciaux
// les ' & < / etc font toujours peter les script php, donc un tit script s'impose pour transformer ces caractères en code HTML
function correctString($texte) {
  $t=htmlspecialchars ( $texte,  ENT_QUOTES);
  return nl2br($t);
}



// Si le formulaire a été validé, on recupere les donnees
// isset($_REQUEST['Submit'] --> ça veut dire : si le bouton de ton formulaire qui s'appelle Submit a été validé ( voir le code du formulaire : name="Submit" <input type="submit" name="Submit" value="Envoyer" />
// and isset($_POST['nom']) --> ça veut dire : et le champs 'nom' contient une donnée, alors on execute le script
if( isset($_REQUEST['Submit']) and isset($_POST['nom']) ) { 
  $societe=$_POST['societe']; // on recupere le champs nom
  $nom=$_POST['nom']; // on recupere le champs nom
  $prenom=$_POST['prenom']; // on recupere le champs prenom
  $adresse=$_POST['adresse']; // on recupere le champs rue
  $ville=$_POST['ville']; // on recupere le champs rue
  $codepostal=$_POST['codepostal']; // on recupere le champs code postal
  $email=$_POST['email']; // on recupere le champs mail
  $telephone=$_POST['telephone']; // on recupere le champs téléphone
  $nombreboites=$_POST['nombreboites']; // on recupere le champs prenom
  $commentaire=$_POST['commentaire']; // on recupere le champs prenom
  $delai=correctString($_POST['delai']); // on recupere le champs sujet et on le passe dans la fonction qui traite les caractères spéciaux
  $total=$_POST['total']; // on recupere le champs otal
  $type=correctString($_POST['type']);// on recupere le champs sujet et on le passe dans la fonction qui traite les caractères spéciaux
  $nbr1=$_POST[nbr1]; // no dans champs caché généré par php
  $nbr=$_POST[nbr]; // no saisi par l'utilisateur



  //PREPARATION DU MAIL ///////////////////////////////////////////////////////////////
  // Ce mail est au format HTML, on retrouve donc nos balise préférées table, tr, td etc...
  // c'est ce message que tu va recevoir dans ta boite de messagerie

	/* sujet */
	$subject = "Formulaire de commande";
	
	/* message */
	$message = '
	<html>
	<head>
	 <title>Formulaire de commande</title>
	</head>
	<body>
	  <table width="330" border="0" cellspacing="2" cellpadding="2" class="p">
	  	<tr>
            <td width="100"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Type de commande:</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$type.'</p></td>
          </tr>
		  <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Société :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$societe.'</p></td>
          </tr>
          <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Nom :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$nom.'</p></td>
          </tr>
          <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Prenom :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$prenom.'</p></td>
          </tr>
		  <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">E-mail :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$email.'</p></td>
          </tr>
		  <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Telephone :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$telephone.'</p></td>
          </tr>
		  <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Adresse de facturation :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$adresse.'</p></td>
          </tr>
          <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Ville :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$ville.'</p></td>
          </tr>
		  <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Code postal :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$codepostal.'</p></td>
          </tr>
		   <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Nombre de boîtes commandées :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$nombreboites.'</p></td>
          </tr>
          <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Envoi :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$delai.'</p></td>
          </tr>
		  <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Total de la commande :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$total.'</p></td>
          </tr>
          <tr>
            <td width="250"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">Commentaire :</p></td>
            <td width="230"><p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;">'.$commentaire.'</p></td>
          </tr>
        
        </table>
	</body>
	</html>
	';
	
	/* Pour envoyer un mail au format HTML, vous pouvez configurer le type Content-type. */
	$headers  = "MIME-Version: 1.0\r\n";
	$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
	
	/* D'autres en-têtes */
	$headers .= "To: TEST <adresse@gmail.com>\r\n";
	$headers .= "From: TEST <adresse@gmail.com>\r\n";

	
	/* et hop, à la poste */
	mail($to, $subject, $message, $headers);

	//$msg ="Votre message a été envoyé avec succès !<br />Il sera traité dans les plus brefs délais.<br />Merci !";


  // tout c'est bien passé, tu redirige l'utilisateur sur une page de confirmation de l'envoi de son formulaire
  header ('location: http://www.siteweb.ch/ok.html');



///////////////////////////////////////////////////////////////////////////////////////////////////
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulaire de commande</title>
<script language="JavaScript">
<!--
//dans la fonction, tu recupere les éléments que t'as mis dans onSubmit (nom, prenom etc...)
  function Envoyer(type,societe,nom,prenom,email,adresse,ville,codepostal,telephone,nombreboites,delai,total,commentaire) {
	if(nom.value=="") { alert('Merci de compéter le champ vide');nom.focus();return false }
	if(prenom.value=="") { alert('Merci de compéter le champ vide');prenom.focus();return false }
	if((email.value.indexOf('@',0) == -1)||(email.value.indexOf('.',0) == -1)||(email.value=="")) { alert('Problèmes avec votre adresse e-mail !'); email.focus();return false }
	if(nombreboites.value=="0") { alert('Merci de compéter le champ vide');nombreboites.focus();return false }
	if(type.value=="") { alert('Merci de compéter le champ vide');type.focus();return false }
	if(telephone.value=="") { alert('Merci de compéter le champ vide');telephone.focus();return false }
	if(adresse.value=="") { alert('Merci de compéter le champ vide');adresse.focus();return false }
	if(ville.value=="") { alert('Merci de compéter le champ vide');ville.focus();return false }
	if(codepostal.value=="") { alert('Merci de compéter le champ vide');codepostal.focus();return false }
	if(delai.value=="") { alert('Merci de compéter le champ vide');delai.focus();return false }
	if(total.value=="") { alert('Merci de compéter le champ vide');total.focus();return false }

	return true
}
//-->
function calculate(f){
var prod=Number(f['nombreboites'].value);
var quan=Number(f['delai'].value);
var tot=prod+quan;
f['total'].value=tot==0?'':tot.toFixed(2);
}
</script>

<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#333;
}
body {
	background-color: #FFFFFF;
}

div#row {
margin-left: 25px;
margin-top: 25px;
margin-right: 20px;
margin-bottom: 35px;
text-align: left;
}

div#tableau {
margin-left: -8px;
}

.formw {
padding-left: 50px;
 text-align: left;

}
.label{
padding-left: 50px;
 text-align: left;
 width: 100px;

}
-->
</style></head>

<body>
<!--
Detail de la balise FORM :
Action : c'est la page qui va récupérer les données du formulaire et envoyer le mail (dans ce cas, c'est la même page)
onSubmit : petit script javasript qui va s'assurer que les données sont correctement formatées (tous les champs obligatoires remplis etc...)
this.le nom de ton champs input
pour voir le script javascript, ça se trouve dans le header, en dessous de la balise title 
-->  
<div id="row">
<img src="images/logo.jpg" width="200" height="86" alt="ogo" /><br><br>
	  <form action="formulaire.php" method="post" onSubmit="return Envoyer(this.type,this.societe,this.nom,this.prenom,this.email,this.telephone,this.adresse,this.ville,this.codepostal,this.nombreboites,this.delai,this.total,this.commentaire)">
	    <p>Formulaire
	   <br />
		<br>
        Pour des raisons de protection des donn&eacute;es, nous vous prions de bien vouloir recopier le code de 4 chiffres ci dessus.<em> (Si les chiffres ne s'affichent pas tous, recharger simplement la page en ouvrant &agrave; nouveau le formulaire. Le formulaire ne s'enverra pas si vous n'entrez pas correctement les 4 chiffres.)</em><br>
  <input type="hidden" name="nbr1" value="<?=$nbr?>" /> 
  <br>
	    <?
mt_srand((float) microtime()*1000000);
$nbr = mt_rand(1000, 9999); // affiche un nombre aléatoire entre 1000 et 9999 ? nombre à 4 chiffres
$verif1 = substr("$nbr", 0, 1); // extraire le 1er chiffre 
$verif2 = substr("$nbr", 1, 1); // extraire le 2ème chiffre
$verif3 = substr("$nbr", 2, 1); // extraire le 3ème chiffre
$verif4 = substr("$nbr", 3, 1); // extraire le 4ème chiffre
echo '<img src="images/form/'.$verif1.'.gif">'; // affiche l'image qui correspond au 1er chiffre
echo '<img src="images/form/'.$verif2.'.gif">'; // affiche l'image qui correspond au 2ème chiffre
echo '<img src="images/form/'.$verif3.'.gif">'; // affiche l'image qui correspond au 3ème chiffre
echo '<img src="images/form/'.$verif4.'.gif">'; // affiche l'image qui correspond au 4ème chiffre
?>
        <br><br>
  *Code à 4 chiffres :<br>
  <input name="nbr" type="text" size="4" maxlength="4" /> 
  
<br>
  <br>(Tous les champs noté * sont obligatoires)<br><br>
    	  *Type de commande:<br> 
	      <input type="checkbox" name="type" value="personnel" />
	      usage personnel
	      <br> 
          <input type="checkbox" name="type" value="commercial" /> 
          usage commercial<br>
        </p>
	    <div id="tableau"><table width="429" border="0" cellspacing="8">
	      
	      <tr>
	        <td> Société<br>
	      <input type="text" name="societe" size="22" /></td>
	        <td>*Nom :<br>
	      <input type="text" name="nom" size="22" /></td>
	        <td>*Prénom :<br>
	      <input type="text" name="prenom" size="22" /></td>
          </tr>
	      <tr>
	        <td>*Adresse :<br>
		  <input type="text" name="adresse" size="22" /></td>
	        <td>*Ville :<br>
		  <input type="text" name="ville" size="22" /></td>
	        <td>*Code postal :<br>
		  <input type="text" name="codepostal" size="11" /></td>
          </tr>
	      <tr>
	        <td>*E-mail :<br>
		  <input type="text" name="email" size="22" /></td>
	        <td>*Téléphone :<br>
		  <input type="text" name="telephone" size="22" /></td>
	        <td>&nbsp;</td>
          </tr>
        </table>
        </div>
	    <p>
<select name="nombreboites" onchange="calculate(this.form)">
<option value="0" name="0 boite">-- Nombre de boìtes --</option>
<option value="49.50" name="1 boite">1 boîte</option>
<option value="99" name="2 boites">2 boîtes</option>
<option value="148.50" name="3 boites">3 boîtres</option>
<option value="198" name="4 boites">4 boîtes</option>
<option value="247.50" name="5 boites">5 boîtes</option>
</select>
<br>
<select name="delai" onchange="calculate(this.form)">
<option value="8">-- Envoi --</option>
<option value="15" name="Courrier A">Courrier A</option>
<option value="8" name="Courrier B">Courrier B</option>
</select>
<br><br>
Coût total: <input type="text" name="total" readonly="readonly">
<br> 
<br>	    
		Commentaires :<br>
        	  <textarea name="commentaire" cols="50" rows="3"></textarea>
          <br>
           <br>
           Votre commande sera envoyée dès que nous seront en possession de votre paiement.
          <br>
           <br>
        	  <input type="submit" name="Submit" value="Envoyer" />
        </p>
</form></div>


</body>
</html>

alaincassis · 17 Décembre 2010

Le code on le met :

Code:

 ICI  pour plus de lisibilité

hache.z · 17 Décembre 2010

alaincassis a dit:
Le code on le met :

Code:

ICI pour plus de lisibilité

C'est fait. Alors une idée?

Leonick · 18 Décembre 2010

as-tu vérifié dans tes logs apache si une erreur est recensée pour l'affichage de ces images ?
est-ce que cela vient de ton script php ou juste du serveur apache ?

hache.z · 18 Décembre 2010

Leonick a dit:
as-tu vérifié dans tes logs apache si une erreur est recensée pour l'affichage de ces images ?
est-ce que cela vient de ton script php ou juste du serveur apache ?

Wow aucune idée.... comment puis-je voir mes "logs apache"...?

alaincassis · 18 Décembre 2010

Faut regarder sur le serveur si des fichiers error_log et access_log sont visibles dans un dossier appellé .....logs.

Avec un serveur dedié ou virtuel, aucun problème pour y accéder, mais pas sur que cela soit possible sur un mutu.

Leonick · 18 Décembre 2010

chez ovh, si

le-bon-plan.com · 19 Décembre 2010

Petite remarque sur ton code, de manière générale il est préférable de ne pas faire de calcul via javascript mais uniquement coté serveur surtout pour un site ou l'on passe des commandes.

Le code javascript étant exécuté coté client (sur le pc de l'utilisateur) celui ci peut très facilement modifié le résultat du calcul.

Je te conseille donc d'utiliser uniquement le javascript pour des contrôles de premiers niveaux (le champ a t-il ete rempli ?, nombre de caracteres ...) et d'effectuer tous tes traitements fonctionnelles cotés serveurs (calcul)

Bon courage pour ton développement.