Repliquer des valeurs champs formulaire à d'autres formulaire su

traderpierre Messages postés 316 Statut Membre -
Konseil Messages postés 641 Date d'inscription Statut Membre Dernière intervention - 10 sept. 2015 à 21:33

Bonjour,

Je souhaite soit :
1/ Créer des variables de session en javascript, adossées à champs formulaire avant d'exécuter le submit depuis le bouton envoyer.
2/ Ou Repliquer des valeurs champs d'un formulaire 1 aux autres champs des formulaires 2 et 3 qui se trouve sur la même page HTML

Le PHP s'exécute coté serveur donc après un submit "pas adpaté".
alors que le javascript s'éxécute coté client donc plus adapté à ce que je souhaite.

Je m'explique sur ma page HTML , j'ai trois formulaires
1 formulaire don Paypal;
1 formulaire Paiement par virement dont l'action submit est d'envoyer un email avec les instructions RIB pour le virement;
1 formulaire Paiement par chèque dont l'action submit est d'envoyer un email avec les instructions pour l'envoi du chèque;

Dans le 1er formulaire Paypal j'ai tous les champs civilite, prénom, nom, adresse, code postal, ville , email, et tel.

Dans les deux autres formulaire (2 et 3) j'ai des champs hidden avec civilité, prénom, nom et email.

Je souhaite que ces champs hidden reprennent les valeurs correspondante des champs du formulaire 1 "don PayPal" afin que l'internaute n'ai pas à les ressaisir.

J'ai pensé aux variables de session.

Mais je dois les obtenir avant que n'importe quel bouton submit soit activité.
Dès que les champs du 1er formulaire sont saisis.

Auriez-vous une solution "variable de session avant submit" ou autre.

En gros je souhaite que les valeur des champs du formulaire 1 soient répliquées
dans le champs hidden correspondant des deux autres formulaire 2 et 3.

Merci par avance pour votre aide précieuse.

Afficher la suite

1 réponse

Réponse 1 / 1
Konseil Messages postés 641 Date d'inscription Statut Membre Dernière intervention 434
Salut, voici une base de travail.
```
<input type="radio" name="radio" value="paypal"> Paypal<br/>
<input type="text" id="p-nom" value="Mon Nom"><br/>
<input type="text" id="p-prenom" value="Mon Prenom"><br/><br/>
<input type="radio" name="radio" value="virement"> Virement<br/>
<input type="hidden" id="v-nom"><br/>
<input type="hidden" id="v-prenom">
<script>
function replicate(){
if(document.getElementsByName("radio")[1].checked==true){
document.getElementById("v-nom").value=document.getElementById("p-nom").value;
document.getElementById("v-prenom").value=document.getElementById("p-prenom").value;
}
}
document.addEventListener("change", replicate);
</script>
```
0
1. traderpierre Messages postés 316 Statut Membre 7
  
  Bonjour,
  Merci pour votre réponse mais apparemment ça ne fonctionne avec mes formulaires d'essais
  Pourriez-vous analyser ce qui cloche et me donner la solution.
  J'ai prérempli les champs pour faciliter un essais.
  
  Merci par avance.
  Ci-dessous mon code :
  _______________
  Dans le head : les fonctions suivantes
  <script type="text/javascript">
  
  // Fonction Réplication valeurs des champs
  
  function replicate(){
  if(document.getElementsByName("mode_paiement")!=['PayPal'].checked==true){
  document.getElementById("civilite_RIB").value=document.getElementById("civilite").value;
  document.getElementById("civilite_cheque").value=document.getElementById("civilite").value;
  document.getElementById("prenom_RIB").value=document.getElementById("first_name").value;
  document.getElementById("prenom_cheque").value=document.getElementById("first_name").value;
  document.getElementById("nom_RIB").value=document.getElementById("last_name").value;
  document.getElementById("nom_cheque").value=document.getElementById("last_name").value;
  document.getElementById("email_RIB").value=document.getElementById("email").value;
  document.getElementById("email_cheque").value=document.getElementById("email").value;
  }
  }
  document.addEventListener("change", replicate);
  
  // Fonction afficher coût réel du don
  
  function btn_show_Don(choix_select){
  var tr20 = document.getElementById('tr20');
  var tr50 = document.getElementById('tr50');
  var tr75 = document.getElementById('tr75');
  var tr100 = document.getElementById('tr100');
  //On masque les trois TR
  tr20.style.display='none';
  tr50.style.display='none';
  tr75.style.display='none';
  tr100.style.display='none';
  //En fonction de l'élément choisi..on affiche le TR
  switch(choix_select){
  case '20':
  tr20.style.display='';
  break;
  case '50':
  tr50.style.display='';
  break;
  case '75':
  tr75.style.display='';
  break;
  case '100':
  tr100.style.display='';
  break; }
  }
  
  // fontion afficher mode de paiement
  
  function btn_show_mode_paiement(choix_select){
  var trPaypal = document.getElementById('trPaypal');
  var trRIB = document.getElementById('trRIB');
  var trCheque = document.getElementById('trCheque');
  //On masque les trois TR
  trPaypal.style.display='none';
  trRIB.style.display='none';
  trCheque.style.display='none';
  //En fonction de l'élément choisi..on affiche le TR
  switch(choix_select){
  case 'PayPal':
  trPaypal.style.display='';
  break;
  case 'Virement':
  trRIB.style.display='';
  break; case 'Cheque':
  trCheque.style.display='';
  break; }
  }
  </script>
  ___________________________________
  
  Dans le body : mon tableau regroupant les 3 formulaires les champs sont préremplis pour faciliter l'essais :
  
  <table width="400">
  <tbody>
  <tr>
  <td class="Normal-10NoirGrasCentre" colspan="2"
  align="right" valign="top">
  <p class="TitreBleuCentre">C'est
  grâce à vous que nous pouvons agir.</p>
  <p class="TitreBleuGauche">Analyser,
  enquêter, dénoncer, agir et mobiliser : </p>
  <p class="TitreBleuGauche">Ce sont les
  adhérents qui font et qui financent le collectif justice
  pour tous. </p>
  <p class="TitreBleuGauche">Cette
  indépendance est le gage de notre liberté de
  parole et d'action, en toutes circonstances. </p>
  <p class="Normal-14NoirGrasCentreSurligne">Indépendant
  gâce à vous<br>
  Efficace avec vous
  </p><p class="TitreBleuCentre">66% de votre don
  est déductible de vos impôts</p>
  </td>
  </tr>
  <tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Civilité<br>
  
  <script language="javascript">
  var civilite =document.forms['form_don'].elements['civilite'].value;
  document.write("civilite");
  </script>
  </td><td class="Normal-10NoirGrasGauche" height="23"><span id="spryselect2"><LABEL for="civilite"></LABEL><select name="civilite" id="civilite" class="Normal-10NoirGrasGauche" onchange="civilite(this.value))"><option class="Normal-10NoirGrasGauche" >Sélectionnez votre civilité</option>
  <option value="Madame">Madame</option>
  <option value="Mademoiselle" selected="selected">Mademoiselle</option>
  <option value="Monsieur">Monsieur</option></select>
  <span class="selectRequiredMsg">Sélectionnez votre cilité.</span></span></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top"><p>Prénom<br>
  
  <script language='Javascript'>
  var prenom = document.getElementById('first_name').value();
  document.write(prenom);</script>
  
  </p><p> </p></td><td class="Normal-10NoirGrasGauche" height="23"><span id="sprytextfield1"><input type="text" name="first_name" id="first_name" size="30" class="Normal-10NoirGrasGauche" value="PouPou"><br><span class="textfieldRequiredMsg">Prénom obligatoire.</span><span class="textfieldMinCharsMsg">Nombre minimal de caractères non atteint.</span><span class="textfieldMaxCharsMsg">Le nombre maximum de caractères a été dépassé.</span></span></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Nom</td><td class="Normal-10NoirGrasGauche" height="23"><span id="sprytextfield2"><input type="text" name="last_name" id="last_name" size="30" class="Normal-10NoirGrasGauche" value="PoupouPidou"><br><span class="textfieldRequiredMsg">Nom obligatoire.</span><span class="textfieldMinCharsMsg">Nombre minimal de caractères non atteint.</span><span class="textfieldMaxCharsMsg">Le nombre maximum de caractères a été dépassé.</span></span></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Code Postal</td><td class="Normal-10NoirGrasGauche" height="23"><span id="sprytextfield3"><input type="text" name="zip" id="zip" size="30" class="Normal-10NoirGrasGauche" value="54290"><br><span class="textfieldRequiredMsg">Code postal obligatoire.</span><span class="textfieldInvalidFormatMsg">Code postal non valide.</span></span></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Ville</td><td class="Normal-10NoirGrasGauche" height="23"><span id="sprytextfield4"><input type="text" name="city" id="city" size="30" class="Normal-10NoirGrasGauche" value="Bayon"><span class="textfieldRequiredMsg">Ville obligatoire.</span><span class="textfieldMinCharsMsg">Nombre minimal de caractères non atteint.</span><span class="textfieldMaxCharsMsg">Le nombre maximum de caractères a été dépassé.</span></span></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Email</td><td class="Normal-10NoirGrasGauche" height="23"><span id="sprytextfield5"><input type="text" name="email" id="email" size="30" class="Normal-10NoirGrasGauche" value="100p@laposte.net"><br><span class="textfieldRequiredMsg">Email obligatoire.</span><span class="textfieldInvalidFormatMsg">Format email non valide.</span></span></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Adresse</td><td class="Normal-10NoirGrasGauche" height="23"><span id="sprytextfield6"><input type="text" name="address1" id="address1" class="Normal-10NoirGrasGauche" size="30" maxlength="200" value="8, Rue de la poupée qui tousse"><br><span class="textfieldRequiredMsg">Adresse obligatoire.</span><span class="textfieldMinCharsMsg">Nombre minimal de caractères non atteint.</span><span class="textfieldMaxCharsMsg">Le nombre maximum de caractères a été dépassé.</span></span></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Adresse suite</td><td class="Normal-10NoirGrasGauche" height="23"><input type="text" name="address2" id="address2" class="Normal-10NoirGrasGauche" size="30" maxlength="200" value="2ème étage à Droite"></td></tr><tr><td class="Normal-10NoirGrasDroite"
  align="right" valign="top">Téléphone</td><td class="Normal-10NoirGrasGauche" height="23"><span id="sprytextfield7"><input type="text" name="night_phone_b" id="night_phone_b2" class="Normal-10NoirGrasGauche" size="30" maxlength="20" value="0781011225"><br><span class="textfieldRequiredMsg">Téléphone obligatoire.</span><span class="textfieldMinCharsMsg">Nombre minimal de caractères non atteint.</span><span class="textfieldMaxCharsMsg">Le nombre maximum de caractères a été dépassé.</span><span class="textfieldInvalidFormatMsg">Format tel. non valide.</span></span></td></tr><tr>
  <td class="Normal-10NoirGrasDroite"
  align="right" valign="top" width="178">Montant
  du don<br>
  <INPUT TYPE="hidden" name="charset" value="utf-8">
  <input name="lc" value="FR" type="hidden">
  <input name="cmd" value="_xclick"
  type="hidden">
  <input name="business"
  value="compte.paypal@collectif-justice.net" type="hidden"><input
  name="item_name" value="Donation" type="hidden">
  <input name="no_shipping" value="1"
  type="hidden"><input name="no_note" value="1"
  type="hidden">
  <input name="currency_code" value="EUR"
  type="hidden"><input name="ah" value="0"
  type="hidden"><input name="tax" value="0" type="hidden"></td>
  <td class="Normal-10NoirGrasGauche" height="23"
  width="210">
  <table width="100%" border="0" cellspacing="0" cellpadding="2"> <TR>
  <td class="Normal-10NoirGrasGauche" height="0" width="100" align="LEFT">
  <label>
  <input name="amount" value="20" id="amount" onclick="btn_show_Don(this.value)" type="radio">20 €
  </label>
  </td>
  <td class="Normal-10NoirGrasGauche" height="0" width="100" align="LEFT">
  <label>
  <input name="amount" value="50" id="amount" onclick="btn_show_Don(this.value)" type="radio">50 €
  </label>
  </td>
  </TR>
  <TR>
  <td class="Normal-10NoirGrasGauche" height="0" width="200" align="LEFT">
  <label>
  <input name="amount" value="75" id="amount" onclick="btn_show_Don(this.value)" type="radio">75 €
  </label>
  </td>
  <td class="Normal-10NoirGrasGauche" height="0" width="200" align="LEFT">
  <label>
  <input name="amount" value="100" id="amount" onclick="btn_show_Don(this.value)" type="radio">100 €
  </label></td>
  </TR>
  </table></td>
  </tr>
  <tr id="tr20" style="display: none;">
  <td class="AllerteRougesSurligneeCentreCopie"
  colspan="2" align="right" valign="top">Un don
  de 20 € vous reviendra à 6,80 €<br>
  après déduction fiscale</td>
  </tr>
  <tr id="tr50" style="display: none;">
  <td class="AllerteRougesSurligneeCentreCopie"
  colspan="2" align="right" valign="top">Un don
  de 50 € vous reviendra à 17 €<br>
  après déduction fiscale</td>
  </tr>
  <tr id="tr75" style="display: none;">
  <td class="AllerteRougesSurligneeCentreCopie"
  colspan="2" align="right" valign="top">Un don
  de 75 € vous reviendra à 25,50 €<br>
  après déduction fiscale</td>
  </tr>
  <tr id="tr100" style="display: none;">
  <td class="AllerteRougesSurligneeCentreCopie"
  colspan="2" align="right" valign="top">Un don
  de 100 € vous reviendra à 34 €<br>
  après déduction fiscale</td>
  </tr>
  <tr>
  <td colspan="2" align="center"
  valign="top"><span id="spryselect1">
  <select name="mode_paiement" id="mode_paiement"
  onchange="btn_show_mode_paiement(this.value);replicate(this.value)"
  class="Normal-10NoirGrasCentre">
  <option selected="selected">Sélectionnez
  votre mode de paiement</option>
  <option value="PayPal">PayPal ou Carte
  Bancaire</option>
  <option value="Virement">Virement</option>
  <option value="Cheque">Chèque</option>
  </select>
  <span class="selectRequiredMsg"><br>
  Sélectionnez un élément.</span></span>
  </td>
  </tr>
  <tr id="trPaypal" style="display: none;">
  <td class="Normal-10NoirGrasCentre" colspan="3"
  align="center" valign="middle"><input
  src="images/BoutonPayPal.gif" name="submit"
  alt="PayPal ou carte de Crédit - la solution de paiement en ligne la plus simple et la plus sécurisée !"
  title="PayPal ou carte de Crédit - la solution de paiement en ligne la plus simple et la plus sécurisée !"
  border="0" type="image">
  <img alt=""
  src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif"
  border="0" height="1" width="1"></td>
  </tr>
  </tbody>
  </table></form><table width="400" border="0" cellspacing="0" cellpadding="0">
  
  <tr id="trRIB" style="display: none;">
  <td class="Normal-10NoirGrasCentre" colspan="3"
  align="center" height="199" valign="middle">
  <form name="RIB" method="post" action="envois_formulaires/envoi_RIB.php">
  <table border="1" cellpadding="3"
  cellspacing="0" width="100%">
  <tbody>
  <tr>
  <td class="Normal-10NoirGrasDroite"
  align="right" width="155">IBAN<br>
  Si vous copiez/collez</td>
  <td class="Normal-10NoirGrasGauche"
  width="227">FR76 3000 3006 0372 6999 609<br>
  FR763000300603726999609</td>
  </tr>
  <tr>
  <td class="Normal-10NoirGrasDroite"
  align="right">BIC</td>
  <td class="Normal-10NoirGrasGauche">SOGEFRPP</td>
  </tr>
  <tr>
  <td class="Normal-10NoirGrasDroite"
  align="right">Titulaire</td>
  <td class="Normal-10NoirGrasGauche">Collectif
  justice pour tous</td>
  </tr>
  <tr>
  <td class="Normal-10NoirGrasDroite"
  align="right" valign="TOP">Succursale Banque<br><span class="Normal-10NoirGrasGauche" ><span class="Normal-10NoirGrasGauche"><input type="hidden" name="civilite_RIB" id="civilite_RIB" value="document.forms['form_don'].elements['civilite'].value;"></span><span class="Normal-10NoirGrasGauche"><input type="hidden" name="prenom_RIB" id="prenom_RIB" value="<?php echo $_SESSION['prenom'];?>"></span><span class="Normal-10NoirGrasGauche"><input type="hidden" name="nom_RIB" id="nom_RIB" value="<?php echo $_SESSION['nom'];?>"></span><span class="Normal-10NoirGrasGauche"><input type="hidden" name="email_RIB" id="email_RIB" value="<?php echo $_SESSION['email'];?>"></span></span></td>
  <td class="Normal-10NoirGrasGauche">Société Générale<br>
  Agence de Billancourt (00699)<br>
  1B R de Chevannes<br>
  91610 BALLANCOURT SUR ESSONNE</td>
  </tr><tr><td class="Normal-10NoirGrasCentre"
  align="CENTER" colspan="2"><input type="submit" name="RIB_submit" id="RIB_submit" value="Recevoir ce RIB pour Virement" class="Normal-10NoirGrasCentreFondCyan"></td></tr>
  </tbody>
  </table>
  </form>
  </td>
  </tr>
  <tr id="trCheque" style="display: none;">
  <td class="Normal-10NoirGrasCentre" colspan="3"
  align="center" height="88" valign="middle">
  <form name="cheque" method="post" action="envois_formulaires/envoi_info_cheque.php">
  <table border="1" cellpadding="3"
  cellspacing="0" width="100%">
  <tbody>
  <tr>
  <td class="Normal-10NoirGrasDroite"
  align="right">Chèque à l'ordre de</td>
  <td class="Normal-10NoirGrasGauche"
  align="left">Collectif justice pour tous</td>
  </tr>
  <tr>
  <td class="Normal-10NoirGrasDroite"
  align="right" height="46" valign="top">A
  envoyer à cette adresse<br><span class="Normal-10NoirGrasGauche" ><span class="Normal-10NoirGrasGauche"><input type="hidden" name="civilite_cheque" id="civilite_cheque" value="<?php echo $_SESSION['civilite'];?>"></span><span class="Normal-10NoirGrasGauche"><input type="hidden" name="prenom_cheque" id="prenom_cheque" value="<?php echo $_SESSION['prenom'];?>"></span><span class="Normal-10NoirGrasGauche"><input type="hidden" name="nom_cheque" id="nom_cheque" value="<?php echo $_SESSION['nom'];?>"></span><span class="Normal-10NoirGrasGauche"><input type="hidden" name="email_cheque" id="email_cheque" value="<?php echo $_SESSION['email'];?>"></span></span></td>
  <td class="Normal-10NoirGrasGauche"
  align="left" valign="top"><span
  class="Normal-10NoirGrasGauche">Collectif justice pour tous<br>
  17, Avenue JOFFRE<br>
  91710 Vert le Petit</span></td>
  </tr><tr><td class="Normal-10NoirGrasCentre"
  align="CENTER" height="26" valign="top" colspan="2"><input type="submit" name="Cheque_Submit" id="Cheque_Submit" value="Recevoir les coordonnées pour l'envoi du chèque" class="Normal-10NoirGrasCentreFondCyan"></td></tr>
  </tbody>
  </table>
  </form>
  </TD> </TR>
  </table>
  
  0
2. Konseil Messages postés 641 Date d'inscription Statut Membre Dernière intervention 434
  
  Ok, je viens de regarder ton code et il y a 2-3 choses à corriger.
  Dans la partie body:
  - "form_don" n'est pas déclaré, tu dois ajouter un tag
  <form name="form_don">
  au début de ton formulaire et le fermer à la fin du formulaire.
  
  - Tu dois d'abord afficher ton formulaire en html et ensuite utiliser le javascript pour modifier et interagir avec le formulaire.
  les scripts:
  
  <script language="javascript">
  var civilite =document.forms['form_don'].elements['civilite'].value;
  document.write("civilite");
  
  <script language='Javascript'>
  //!!!! j'ai enlevé les parenthèses que tu avais mis après value();
  var prenom = document.getElementById('first_name').value;
  document.write(prenom);</script>
  </script>
  
  sont à placer après le code HTML du formulaire.
  
  0
  1. traderpierre Messages postés 316 Statut Membre 7 > Konseil Messages postés 641 Date d'inscription Statut Membre Dernière intervention
    
    var civilite =document.forms['form_don'].elements['civilite'].value;
    document.write("civilite");
    
    Fonctionne uniquement sur champ prérempli au chargement de la page,
    si je change la civilité la variable ne se rafraichit pas, elle reste sur l'ancienne valeur du champs préempli
    
    ______________________________________
    
    var prenom = document.getElementById('first_name').value;
    document.write(prenom);
    
    Ne fonctionne pas, ni avec champs prérempli au chargement de la page, ni avec changement de la valeur du champ.
    _______________________________________
    
    Si pas de solutions,
    je pense que je vais scinder mon formulaire en deux page PHP
    La première page avec form de toutes les coordonnées (action="page2.php")
    ensuite sur page2.php regroupant form paiement paypal
    + session_start();
    // j'initialise les variables de session
    qui seront transmises sur des champs hidden avec par la valeur des variables de session adossées
    
    idem pour le formulaire de transmission email avec RIB
    
    Idem pour le formulaire de transmission email infos pour le chèque
    
    0
3. Konseil Messages postés 641 Date d'inscription Statut Membre Dernière intervention 434
  
  Chez moi, ça change bien la valeur du champ caché, j'ai essayé de modifier le prénom.
  remplace juste
  
  document.addEventListener("change", replicate);
  
  par
  
  document.addEventListener("keyup", replicate);
  
  0

Repliquer des valeurs champs formulaire à d'autres formulaire su

1 réponse

Discussions similaires

Newsletters