calcul javascript + envoi par un formulaire

Répondre
hache.z
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 3
Inscription: 17 Déc 2010

calcul javascript + envoi par un formulaire

Message le Ven Déc 17, 2010 16:23

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: Tout sélectionner
<?
//---------------------------------------------------------------------------------------

   $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>
Dernière édition par hache.z le Ven Déc 17, 2010 19:23, édité 1 fois.
Haut

alaincassis
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 447
Inscription: 6 Aoû 2006

Re: calcul javascript + envoi par un formulaire

Message le Ven Déc 17, 2010 17:06

Le code on le met :
Code: Tout sélectionner
ICI  pour plus de lisibilité 
Haut
hache.z
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 3
Inscription: 17 Déc 2010

Re: calcul javascript + envoi par un formulaire

Message le Ven Déc 17, 2010 19:23

alaincassis a écrit:Le code on le met :
Code: Tout sélectionner
ICI  pour plus de lisibilité 

C'est fait. Alors une idée?
Haut

Leonick
WRInaute accro
WRInaute accro
 
Messages: 19592
Inscription: 8 Aoû 2004

Re: calcul javascript + envoi par un formulaire

Message le Sam Déc 18, 2010 12:08

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 ?
Haut
hache.z
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 3
Inscription: 17 Déc 2010

Re: calcul javascript + envoi par un formulaire

Message le Sam Déc 18, 2010 17:51

Leonick a écrit: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"...?
Haut

alaincassis
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 447
Inscription: 6 Aoû 2006

Re: calcul javascript + envoi par un formulaire

Message le Sam Déc 18, 2010 18:14

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

Leonick
WRInaute accro
WRInaute accro
 
Messages: 19592
Inscription: 8 Aoû 2004

Re: calcul javascript + envoi par un formulaire

Message le Sam Déc 18, 2010 21:29

chez ovh, si
Haut
le-bon-plan.com
WRInaute discret
WRInaute discret
 
Messages: 129
Inscription: 1 Juin 2007

Re: calcul javascript + envoi par un formulaire

Message le Dim Déc 19, 2010 17:57

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.
Haut
Répondre

Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Lectures recommandées sur ce thème :

Consultez la description détaillée des produits ou services de Google suivants : Google Compute

  • Calcul du taux de liens vers des pages internes
    Cet outil vous permet de calculer le taux de liens profonds vers un site web. Un lien profond est un lien qui ne pointe pas vers la page d'accueil mais au contraire vers une page interne du site. Les sites dont l'essentiel du référencement vient de leurs inscriptions dans des annuaires ont un taux de liens profonds faible ; à l'inverse, les sites de référence ont souvent un taux de liens profonds plus important, signe que leur contenu a suscité de nombreux liens spontanés.
  • Calcul de l'indice de co-occurrence
    Cet outil vous permet de calculer l'indice de co-occurrence de 2 ou 3 termes, ainsi que le ratio E/F. L'indice de co-occurrence mesure le relation entre les termes : plus cet indice est élevé, plus les termes sont reliés. Concrètement, plus l'indice est élevé, plus il est fréquent de trouver des documents qui contiennent les différents termes.
  • Calcul d'indice de densité
    Cet outil vous permet de calculer l'indice de densité d'un mot-clé d'une page web. Il est calculé à la fois pour la balise TITLE, la balise META description et l'ensemble du texte de la page.
  • Analyse des backlinks
    Cet outil vous permet d'analyser en détails la "popularité" de votre site sur Google. En plus du nombre de liens pris en compte par Google, il calcule le pourcentage de liens internes parmi tous les liens, et il affiche les premières URL trouvées.


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group Traduction par: phpBB-fr.com, mod SEO par phpbb-seo.com