Repliquer des valeurs champs formulaire à d'autres formulaire su

Fermé
traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 - 9 sept. 2015 à 20:38
Konseil Messages postés 643 Date d'inscription samedi 29 août 2015 Statut Membre Dernière intervention 13 novembre 2018 - 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.

1 réponse

Konseil Messages postés 643 Date d'inscription samedi 29 août 2015 Statut Membre Dernière intervention 13 novembre 2018 427
9 sept. 2015 à 21:08
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
traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 6
10 sept. 2015 à 11:43
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
Konseil Messages postés 643 Date d'inscription samedi 29 août 2015 Statut Membre Dernière intervention 13 novembre 2018 427
10 sept. 2015 à 17:17
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
traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 6 > Konseil Messages postés 643 Date d'inscription samedi 29 août 2015 Statut Membre Dernière intervention 13 novembre 2018
10 sept. 2015 à 20:53
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
Konseil Messages postés 643 Date d'inscription samedi 29 août 2015 Statut Membre Dernière intervention 13 novembre 2018 427
10 sept. 2015 à 21:33
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