Formulaire html+javascript
Fermé
crator
-
18 juin 2012 à 08:58
Alain_42 Messages postés 5358 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 19 juin 2012 à 13:15
Alain_42 Messages postés 5358 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 19 juin 2012 à 13:15
A voir également:
- Formulaire html+javascript
- Formulaire de réclamation facebook - Guide
- Alias du formulaire - Forum Programmation
- Telecharger javascript - Télécharger - Langages
- Image cliquable html ✓ - Forum Internet / Réseaux sociaux
- Javascript round ✓ - Forum Javascript
7 réponses
Alain_42
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
901
18 juin 2012 à 13:40
18 juin 2012 à 13:40
inspires toi de ces deux pages pour passer des valeurs entre page appelante A et popup page B
<html>
<!-- Page A.html -->
<head>
<script type="text/javascript">
//ce javascript doit être dans le head de la page A
function ouvrir_fenetre(url){
window.open(url,"page_B.html","menubar=yes, status=yes, scrollbars=yes, menubar=yes, width=500, height=500");
}
</script>
</head>
<form name="form1" method="post" action="">
Nom: <input type="text" name="nom" id="nom" value="" /><br /><br />
Prenom: <input type="text" name="prenom" id="prenom" value="" /><br /><br />
<input type="button" name="envoyer" id="envoyer" value="Envoyer" onclick="ouvrir_fenetre('B.html');"/>
</form>
</html>
<html>
<!-- Page B.html -->
<head>
<script type="text/javascript">
//ce javascript doit être dans le head de la page B
//fonction lecture page A et ecriture page B
function lit_ecrit(){
//1 ier champ
var champ_A1=readValueFromParent('nom'); //lecture dans la page appelante A
document.getElementById('nom_recu').value=champ_A1;
//2 ième champ
var champ_A2=readValueFromParent('prenom'); //lecture dans la page appelante A
document.getElementById('prenom_recu').value=champ_A2;
}
//fonction recup valeurs depuis fenêtre apelante
function readValueFromParent(id1){
var valeur=window.opener.document.getElementById(id1).value;
return valeur;
}
</script>
</head>
Valeurs reçues du formulaire page A:<br /><br />
<form name="form1" method="post" action="B.html">
Nom: <input type="text" name="nom_recu" id="nom_recu" value="" /><br /><br />
Prenom: <input type="text" name="prenom_recu" id="prenom_recu" value="" />
</form>
<script type="text/javascript">
// cette partie de javascript doit être après le formulaire !
lit_ecrit(); //on lance la fonction
</script>
</html>
Alain_42
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
901
18 juin 2012 à 14:23
18 juin 2012 à 14:23
la fonction readValueFromParent(id1) est appelée plusieurs fois dans la fonction lit_ecrit() qui lui passe en argument 'nom' ou 'prenom' etc...
et la page B.html est en fait le popup
et la page B.html est en fait le popup
<head>
<script type="text/javascript">
//ce javascript doit être dans le head de la page A
function ouvrir_fenetre(url){
var win=window.open(site,"pop","width=400,height=900, directories: no,menubar: no,status: no, location: no,scrollbars:auto,resizable: yes");
win.focus();
}
</script>
</head>
<form action="javascript:popup(page.html)">
<br> <table name="identification" border=0>
<tr><td>Utilisateur:</td> <td><input type=text name=login ></td></tr>
<tr><td>Mot de passe:</td> <td><input type=password name=password ></td>
</table>
<fieldset>
<input type=radio name=space value="x"> x
<input type=radio name=space value="y"> y
<input type=radio name=space value="z"> z
</fieldset>
Version: <select name="choix">
<option value='1'>choix 1</option>
<option value='2'>choix 2</option>
</select>
<input type=submit value="Valider">
</form>
<html>
<!-- Page B.html (le popup )-->
<head>
<script type="text/javascript">
//ce javascript doit être dans le head de la page B
//fonction lecture page A et ecriture page B
function lit_ecrit(){
//1 ier champ login
var champ_A1=readValueFromParent('login'); //lecture dans la page appelante A
document.getElementById('login_recu').value=champ_A1;
//2 ième champ bouton radio
var champ_A2=readValueFromParent('radio'); //lecture dans la page appelante A
//check et disabled du bt radio correspondant
switch (champ_A2){
case 'x':
document.getElementById('space_x').checked=true;
document.getElementById('space_x').disabled=true;
break;
case 'y':
document.getElementById('space_y').checked=true;
document.getElementById('space_y').disabled=true;
break;
case 'z':
document.getElementById('space_z').checked=true;
document.getElementById('space_z').disabled=true;
break;
}
}
//fonction recup valeurs depuis fenêtre apelante
function readValueFromParent(id1){
var valeur=window.opener.document.getElementById(id1).value;
return valeur;
}
</script>
</head>
Valeurs reçues du formulaire page A:<br /><br />
<form name="form1" method="post" action="B.html">
Login: <input type="text" name="login_recu" id="login_recu" value="" /><br /><br />
<fieldset>
<input type="radio" name="space" id="space_x" value="x"> x
<input type="radio" name="space" id="space_x" value="y"> y
<input type="radio" name="space" id="space_x" value="z"> z
</fieldset>
Version: <select name="choix">
<option value='1'>choix 1</option>
<option value='2'>choix 2</option>
</select>
</form>
<script type="text/javascript">
// cette partie de javascript doit être après le formulaire !
lit_ecrit(); //on lance la fonction
</script>
</html>
Alain_42
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
901
18 juin 2012 à 15:34
18 juin 2012 à 15:34
e fait de disable le Select devrait se faire en live, es-ce possible avec un onchange
c'est à dire si on bouton radio coché on disabled le select "choix" du dessous ?
c'est à dire si on bouton radio coché on disabled le select "choix" du dessous ?
Alain_42
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
901
18 juin 2012 à 16:07
18 juin 2012 à 16:07
après si tu connais un moyen d'ouvrir la fenêtre avec mes options sans que ce soit dans un pop-up ça m'arrangerais =)
Permalink (#3)
oui
1- soit en appelant une page php
2- soit avec avec window.location.href
tjs mes deux pages exemple pour la solution 2
Permalink (#3)
oui
1- soit en appelant une page php
2- soit avec avec window.location.href
tjs mes deux pages exemple pour la solution 2
<html>
<!-- page1.html -->
<head>
<script type="text/javascript">
//ce javascript doit être dans le head de la page A
function ouvrir_fenetre(url){
//on lit les valeurs pour les envoyer via l'URL
var nom=document.getElementById('nom').value;
var prenom=document.getElementById('prenom').value;
var requete="var1='"+nom+"';var2='"+prenom+"';";
//on url-encode cette chaine
requete=escape(requete);
window.location.href = url+"?"+requete;
}
</script>
</head>
<form name="form1" method="post" action="">
Nom: <input type="text" name="nom" id="nom" value="" /><br /><br />
Prenom: <input type="text" name="prenom" id="prenom" value="" /><br /><br />
<input type="button" name="envoyer" id="envoyer" value="Envoyer" onclick="ouvrir_fenetre('page2.html');"/>
</form>
</html>
<html>
<!-- page2.html -->
<head>
</head>
Valeurs reçues du formulaire page A:<br /><br />
<form name="form1" method="post" action="B.html">
Nom: <input type="text" name="nom_recu" id="nom_recu" value="" /><br /><br />
Prenom: <input type="text" name="prenom_recu" id="prenom_recu" value="" />
</form>
<script type="text/javascript">
// /// ce javascript doit être après le formulaire !!!!!!
var var1=""; var2="";
var requete = window.location.search ;
if (requete) {
requete=requete.substring(1) ;
//on « url-décode » cette chaine :
requete = unescape(requete) ;
//et enfin, puisqu'on a pris soin de générer du javascript, on l'exécute :
eval(requete);
}
document.getElementById('nom_recu').value=var1;
document.getElementById('prenom_recu').value=var2;
</script>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Alain_42
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
901
18 juin 2012 à 16:41
18 juin 2012 à 16:41
le ratio "x" étant sélectionné le select doit rester bloqué sur "choix 1", mais pour les autre ratio "y" et "z", l'utilisateur doit avoir le choix
<head>
<script type="text/javascript">
//ce javascript doit être dans le head de la page A
function ouvrir_fenetre(url){
//on lit les valeurs pour les envoyer via l'URL
var login=document.getElementById('login').value;
var liste_radio = document.forms["form1"].elements['space'];
var valeur_radio;
for (var i = 0; i < liste_radio.length; i++) {
if (liste_radio[i].checked) {
valeur_radio=liste_radio[i].value;
}
}
var choix=document.getElementById('choix').value;
var requete="var1='"+nom+"';var2='"+choix+"';";
//on url-encode cette chaine
requete=escape(requete);
window.location.href = url+"?"+requete;
}
function modif_select(){
//fonction appelée qq soit le bouron radio cliqué
var liste_radio = document.forms["form1"].elements['space'];
var valeur_radio;
for (var i = 0; i < liste_radio.length; i++) {
if (liste_radio[i].checked) {
valeur_radio=liste_radio[i].value;
}
}
if(valeur_radio =="x"){//si egal à x
var liste_select=document.getElementById('choix').options;
for(j=0;j<liste_select.length;j++){
if(j==0){
liste_select[j].selected=true;
}else{
liste_select[j].disabled=true;
}
}
}else{ //si un autre bouton radio (chagement de choix aprsèavoir initialemnt choisi x
var liste_select=document.getElementById('choix').options;
for(j=0;j<liste_select.length;j++){
liste_select[j].disabled=false;
}
}
}
</script>
</head>
<!-- ATTENTIION tu dois mettre les valeurs des argument des balises HTML entre " "-->
<form method="post" name="form1" action="">
<table name="identification" border="0">
<tr>
<td>Utilisateur:</td>
<td><input type="text" name="login" id="login" value="" /></td>
</tr>
<tr>
<td>Mot de passe:</td>
<td><input type="password" name="password" id="password" value="" />
</td>
</tr>
</table>
<fieldset>
<input type="radio" name="space" id="space_1" value="x" onclick="modif_select();" /> x
<input type="radio" name="space" id="space_2" value="y" onclick="modif_select();" /> y
<input type="radio" name="space" id="space_3" value="z" onclick="modif_select();" /> z
</fieldset>
Version: <select name="choix" id="choix" >
<option value="1">choix 1</option>
<option value="2">choix 2</option>
</select>
<input type="button" name="envoyer" id="envoyer" value="Envoyer" onclick="ouvrir_fenetre('page2.html');"/>
</form>
Alain_42
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
901
19 juin 2012 à 09:18
19 juin 2012 à 09:18
soit plus precis, qu'est qui ne "tourne pas" car chez moi sur Firefox ça fonctionne
attention il faut que dans ta balise <form tu ait name=""form1"
avec firefox dans outils/developpeur Web tu as la console d'erreurs très pratique pour debugger du JS
attention il faut que dans ta balise <form tu ait name=""form1"
avec firefox dans outils/developpeur Web tu as la console d'erreurs très pratique pour debugger du JS
Alain_42
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
901
19 juin 2012 à 13:15
19 juin 2012 à 13:15
mets qqs alert:
if (valeur_radio =="x"){
var liste_select=document.getElementById('choix').options;
alert("Nombre d'option dans select: "+liste_select.length);
for(j=0; j<liste_select.length ; j++){
if(j==0){
liste_select[j].selected=true;
}else{
liste_select[j].disabled=true;
}
}
18 juin 2012 à 14:03
je ne comprend pas bien pourquoi tu refait un formulaire avec comme action d'aller sur B.html
et juste pour savoir : tu appel la fonction lit_ecrit() mais tu doit faire référence à readValueFromParent(idl), et à quoi va correspondre idl ?
18 juin 2012 à 14:04