Un formulaire sans qu'il se réactualise HTML

Par Pierre Pidancet, il y a 7 ans

Les bases HTML/CSS

Bonjour,

je voudrais que le premier formulaire ne réactualise pas la page afin que le 2ème formulaire s'affiche

Merci d'avance pour vos réponses

<section id="abonnement"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Abonnement</h2> <h3 class="section-subheading text-muted"></h3> </div> </div> <?php if (isset($_POST['choix'])) { $abonnement = htmlspecialchars($_POST['abonnement']); if (isset($_POST['abonnement'])) { if ($abonnement == 1) { $prix = 19.90; } if ($abonnement == 12) { $prix = 218.90; } if ($abonnement == 24) { $prix = 417.90; } } /* if (isset($_POST['facen'])) { if ($_POST['facen']) { $facen = $_POST['facen']; $facen = implode($facen); $facen = floatval($facen); } else { $facen = '0'; } } if (isset($_POST['stoach'])) { if ($_POST['stoach']) { $stoach = $_POST['stoach']; $stoach = implode($stoach); $stoach = floatval($stoach); } else { $stoach = '0'; } } if (isset($_POST['presta'])) { if ($_POST['presta']) { $presta = $_POST['presta']; $presta = implode($presta); $presta = floatval($presta); } else { $presta = '0'; } } if (isset($_POST['sante'])) { if ($_POST['sante']) { $sante = $_POST['sante']; $sante = implode($sante); $sante = floatval($sante); } else { $sante = '0'; } } foreach($_POST['prenom'] as $valeur) { echo "La checkbox $valeur a été cochée<br>"; } if (isset($prix)) { $prix = floatval($prix); $final = $prix + $facen + $stoach + $presta + $sante; }*/ $prix; if(isset($_POST['option']) AND count($_POST['option']) <> 0) { foreach($_POST['option'] as $opt => $total) { //echo 'Options N° '.$opt.' à '.$total.' €<br />'; $prix += floatval($total); } //echo 'Total : '.$prix; } $abonnement= intval($abonnement); var_dump($abonnement); echo 'Abonnement : '.$abonnement.'<br>'; var_dump($prix); /*echo 'Prix : '.$prix.'<br>'; echo 'prix : '.$prix.'<br>'; echo 'facen : '.$facen.'<br>'; echo 'stoach : '.$stoach.'<br>'; echo 'presta : '.$presta.'<br>'; echo 'sante : '.$sante.'<br>'; $final= floatval($final); echo 'final : '.$final.'<br>'; var_dump($final);*/ } ?> <form method="post" action="" target="_parent"> <table> <tr> <p>Choix Abonnement :</p> <div> <input type="radio" id="abonnement" name="abonnement" value="1" checked> <label for="mois">Par mois</label> </div> <div> <input type="radio" id="abonnement" name="abonnement" value="12"> <label for="1an">Par an avec 1 mois offert</label> </div> <div> <input type="radio" id="abonnement" name="abonnement" value="24"> <label for="2ans">Tous les 2 ans avec 3 mois offerts</label> </div> </tr> <br> <h6>Déjà inclus : Gestion des clients et contacts/Gestion des animaux/Agenda et rendez-vous.</h6> <tr> <p>Choix des options :</p> <div> <input type="checkbox" id="facen" name="option[1]" value="5"> <label for="facen">Facturation et encaissement</label> </div> <div> <input type="checkbox" id="stoach" name="option[2]" value="5"> <label for="stoach">Stocks et achats</label> </div> <div> <input type="checkbox" id="presta" name="option[3]" value="5"> <label for="presta">Gestion des prestations</label> </div> <div> <input type="checkbox" id="sante" name="option[4]" value="5"> <label for="sante">Espace santé</label> </div> </tr> <tr> <td width="100%" colspan="2"> <input type="submit" value="Confirmer" name="choix" onclick="bascule()"> </td> </tr> </table> </form> <script type="text/javascript"> function bascule() { etat=document.getElementById('form').style.display; if(etat == 'none'){ document.getElementById('form').style.display="block"; } else{ document.getElementById('form').style.display="block"; } } </script> <div id="form" style="display: none"> <!-- formulaire --> <form method="POST" action="https://www.klikandpay.com/paiement/order1.pl" accept-charset="UTF8" id="knp-form" target="_top"> <table border="0" cellpadding="2" cellspacing="0" width="20%"> <meta charset="UTF-8"> <tr> <td width="50%">Nom:</td> <td width="50%"><input type="text" name="NOM" size="24" value=""></td> </tr> <tr> <td width="50%">Prenom:</td> <td width="50%"><input type="text" name="PRENOM" size="24" value=""></td> </tr> <tr> <td width="50%">Adresse:</td> <td width="50%"><input type="text" name="ADRESSE" size="24" value=""></td> </tr> <tr> <td width="50%">Code Postal:</td> <td width="50%"><input type="text" name="CODEPOSTAL" size="24" value=""></td> </tr> <tr> <td width="50%">Ville:</td> <td width="50%"><input type="text" name="VILLE" size="24" value=""></td> </tr> <tr> <td width="50%">Pays:</td> <td width="50%"><select size="1" name="PAYS"> <option value="FR" selected="selected">France</option> <option value="CA">Canada</option> <option value="CH">Suisse </option> <option value="BE">Belgique </option> </select> </td> </tr> <tr> <td width="50%">Tel:</font></td> <td width="50%"><input type="text" name="TEL" size="24" value=""></td> </tr> <tr> <td width="50%">E-mail:</font></td> <td width="50%"><input type="text" name="EMAIL" size="24" value=""></td> </tr> <tr> <td width="50%">Société :</font></td> <td width="50%"><input type="text" name="SOCIETE" size="24" value=""></td> </tr> <!-- langue --> <input type="hidden" name="L" value="FR"> <!-- l'id de l'entreprise --> <input type="hidden" name="ID" value="..."> <!-- Abonnement créer dynamiquement --> <!-- le prix --> <input type="hidden" name="creat_abo_amount" value="<?php echo $prix; ?>"> <!-- ne nombre de mois l'orde la répétition (la fréquence) --> <input type="hidden" name="creat_abo_frequency" value="<?php echo $abonnement?>"> <!-- D : journalier / W : hebdomadaire / M : mensuel --> <input type="hidden" name="creat_abo_frequency_type" value="M"> <input type="hidden" name="creat_abo_name" value="abonnementparmois"> <tr> <td width="100%" colspan="2"> <p align="center"><input type="submit" value="Envoyer" name="B1"></p></td> </tr> </table> </form> </div> </div> </div> </section>

2 réponses

Lartak, il y a 7 ans

Bonjour.

je voudrais que le premier formulaire ne réactualise pas la page afin que le 2ème formulaire s'affiche

Et donc ?
Tu postes ton sujet dans le forum HTML/CSS alors que ta demande concerne du Javascript, il devrait plutôt se situer daans le forum Javascript.
Pour commencer, tu ne sembles vraiment pas connaître le Javascript, pour deux raisons :

  • Lorsque tu veux affecter une valeur à une variable avec Javascript, il te faut précéder le nom de la variable par var, soit par exemple : var etat = document.getElementById('form').style.display;
  • Dans la condition, tu effectues le même comportement dans les deux cas, vu que tu appliques le comportement block exactement au même élément.

Ensuite, si tu veux écouter les évènements directement dans le html, je te recommanderais plutôt de faire quelque chose comme :

<form method="post" action="" onsubmit="bascule();">

Au lieu de :

<input type="submit" value="Confirmer" name="choix" onclick="bascule()">

Bien que personnellement je préfère largement gérer les évènement pour Javascript directement dans le code Javascript qui se situe dans un fichier js et non directement dans le code HTML.
Ensuite, pour éviter de reparcourir le DOM à chaque ligne dans ton code Javascript, tu devrais plutôt créer 2 variables, par exemple :

function bascule() { var form = document.getElementById('form'); var etat = form.style.display; if (etat === 'none') { form.style.display = 'block'; } else { form.style.display = 'none'; } }

Ce qui pourrait donner ceci.

Pierre Pidancet, il y a 7 ans

Merci beaucoup pour ton aide, sa marche parfaitement

Mais maintenant c'est mon code php qui ne veut plus s'executer ...