Formulaire html+javascript

crator -  
Alain_42 Messages postés 5413 Statut Membre -
Bonjour,

étant nouveau dans le monde du javascript, j'ai absolument besoin de connaissances pour mon stage, dans le plus cours délai.
j'ai une première fenêtre avec le formulaire en HTML, avec en action une deuxième page qui récupère les infos.
Les soucis sont :
- je ne parviens pas à accéder à la deuxième page
- récupérer mes infos
- cherche une fonction pour que lorsque la ratio "x" est sélectionné le choix de space soit desable 
<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>


petite fonction popup: 
		function popup(site) 
		{
			var win=window.open(site,"pop","width=400,height=900,	directories: no,menubar: no,status: no,	location: no,scrollbars:auto,resizable: yes");
	 		win.focus();
		}

et celle qui est censé récupérer les infos ... : 
		var space =document.getElementById('space');<br>
var choix=document.getElementById('choix');<br>
var login=document.getElementById('login');<br>



merci à l'avance !
A voir également:

7 réponses

Réponse 1 / 7
Alain_42 Messages postés 5413 Statut Membre 894
 
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>
0
crator
 
d'abord, un grand merci pour la rapidité de ta réponse

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 ?
0
crator
 
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 =)
0
Réponse 2 / 7
Alain_42 Messages postés 5413 Statut Membre 894
 
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 

<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>
0
crator
 
d'accord, je viens de comprendre que tu ne m'as pas compris =)
çà répond bien à ma question mais le fait de disable le Select devrait se faire en live, es-ce possible avec un onchange ?
0
Réponse 3 / 7
Alain_42 Messages postés 5413 Statut Membre 894
 
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 ?
0
crator
 
exactement,
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
0
Réponse 4 / 7
Alain_42 Messages postés 5413 Statut Membre 894
 
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 
<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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Alain_42 Messages postés 5413 Statut Membre 894
 
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>
0
crator
 
c'est une idée à la quelle je n'y avais pas pensé. Mais cela ne tourne pas chez moi ...
0
Réponse 6 / 7
Alain_42 Messages postés 5413 Statut Membre 894
 
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
0
crator
 
j'ai bien nommé mon formulaire "form1"
lorsque je change de ratio la fonction modif_select est bien apellé (j'ai mit un alert() pour en être sur), mais le disable ne s'active pas ....
0
crator
 
sous firefox, le résultat reste le même.
et je ne trouve pas la solution avec firebug ...
0
crator
 
en fait c'est ton deuxième for qui me pose problème : 
if (valeur_radio =="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;
		}
	}
0
Réponse 7 / 7
Alain_42 Messages postés 5413 Statut Membre 894
 
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;
		}
	}
0

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Contact LEBONCOIN
myalysee -
MPMP10 -

3 réponses