La transmission de valeurs d’une fenêtre à une autre.
On montre ici un exemple possible d’échange de données en javascript entre deux fenêtres (mère - fille).
La transmission de valeurs d’une fenêtre à une autre.
On montre ici un exemple possible d’échange de données en javascript entre deux fenêtres (mère - fille).
La transmission de valeurs d’une fenêtre à une autre.
On montre ici un exemple possible d’échange de données en javascript entre deux fenêtres (mère - fille).
Le code HTML de la fenêtre mère
mercredi 26 novembre 2008
par olivier ramos

On considère le code html du formulaire que l’on a envisagé dans l’exercice précédent. Maintenant on va rajouter le code javascript qui va permettre après l’enregistrement de pouvoir dialoguer avec une fenêtre popup permettant de faire la synthèse des résultats. La page html ainsi ouverte s’appelle fille.html et le dialogue mère-fille et fille-mère est rendu possible par les fichiers de scripts externes intitulés javascript.js et javascriptfille.js.

Le code du formulaire est quasiment inchangé. On a seulement rajouté :
- l’identifiant formulaire au formulaire,
- l’identifiant monsieur à l’option "Un homme",
- l’identifiant madame à l’option "Une femme",
- un identifiant à toutes les options de la liste déroulante relative aux loisirs,
- l’identifiant enregistrer au bouton "Enregistrer",
- l’identifiant effacer au bouton "Effacer".

Le but de cet ajout est de montrer, dans certains cas, une autre façon de désigner les objets (on utilise l’attribut id avec la méthode getElementById plutôt que le chemin hiérachique complet qui utilise l’attribut name ; parfois on mixe les deux méthodes).

Ainsi on a :

<form action="" id="formulairewebdev" >

<p id="civil">
Nom : <input type ="text" name="nom" value="" /><br/>
Prénom : <input type ="text" name="prenom" value="" /><br/>
Mot de passe : <input type="password" name="secret"  />
</p>

<p class="clair un">
Vous êtes  :
<input type="radio" name="genre" value="un homme" id="homme" checked="checked" />Un homme
<input type="radio" name="genre" value="une femme" id="femme"/>Une femme
</p>


<p class="clair deux">
<label for="loisir">
Quel est votre loisir préféré ?
</label>
<select name="loisir" id="loisir" >
 <option id="informatique" >informatique </option>
 <option id="sport">sport</option>
 <option id="cinema"> cinéma</option>
 <option id="musique">musique</option>
</select>
</p>


<p class="clair un">
Quelle langue parlez-vous ?<br/>
<input type="checkbox" checked="checked" name="francais" value="francais" />français
<input type="checkbox" name="anglais" value="anglais" />anglais
<input type="checkbox" name="allemand" value="allemand" />allemand
<input type="checkbox" name="espagnol" value="espagnol" />espagnol
</p>


<p class="clair deux">
Ecrivez ci-dessous un petit texte :
</p>

<div class="flotdroite">
<textarea name="projet" rows="5" cols="33">
</textarea>
</div>

<table class="formulaire">
 <tr >
 <td >Valider ces informations <br/>
 <input type="button" class="bouton" value="Enregistrer" id="enregistrer"/>
 </td>
 <td >Recommencer la saisie<br/>
 <input type="reset" class="bouton" value="Effacer" id="effacer"/>
 </td>
 </tr>
</table>

</form>

Le code HTML de la fille
mercredi 26 novembre 2008
par olivier ramos

Cette page sera ouverte dans une petite fenêtre et permettra de faire la synthèse et la modification des valeurs écrites dans la fenêtre mère. Son code est semblable à celui de sa mère. On notera que volontaire le type de saisie a changé dans certains cas (une zone d’options devient une liste déroulante et réciproquement)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-1" />
<title>La fenêtre fille</title>
<link rel="stylesheet" href="url/style.css" type="text/css" />
<script type="text/javascript" src="url/javascriptfille.js" ></script>
</head>
 
 <body>
<form  action="" id="formulairewebdev">

<p>
Bonjour
<select name="genre" id="genre" >
 <option id="monsieur">Monsieur</option>
 <option id="madame">Madame</option>
</select> <input type ="text" name="nomva" value="" size="11" />
 <input type ="text" name="prenomva" value="" size="11" />
</p>

<p>
Votre mot de passe est <input type ="text" name="secretva" value="" size="11" />
et votre loisir préféré est :<br/>
<input type="radio" name="loisirva" id="informatique" value="informatique" />l'informatique
<input type="radio" name="loisirva" id="sport" value="sport" />le sport
<input type="radio" name="loisirva" id="cinéma" value="cinéma" />le cinéma
<input type="radio" name="loisirva" id="musique" value="musique" />la musique<br/>
 
</p>

<p>
Vous parlez 
<input type="checkbox" name="francais" value="francais" />le français,
<input type="checkbox" name="anglais" value="anglais" />l'anglais,
<input type="checkbox" name="allemand" value="allemand" />l'allemand,
<input type="checkbox" name="espagnol" value="espagnol" />l'espagnol.

</p>

<p>
Vous avez rédigé le texte suivant :<br/>
<textarea name="projet" rows="5" cols="33" >
</textarea>
</p>

</form>

</body>

</html>

Le code javascript de la mère
mercredi 26 novembre 2008
par olivier ramos

Les codes javascript liés aux fenêtres de la mère et de la fille, sont de bons exemples pour comprendre :
- l’utilisation des chemins hiérarchiques permettant d’accéder à un objet afin de modifier ses propriétés, 
- la programmation événementielle. Dans le cas considéré, un événement qui survient dans une fenêtre produit un changement immédiat d’un objet de l’autre fenêtre.

// Au chargement de la page.
window.onload=initialisation;

function initialisation() {
// Charge les options par défaut.
debut();
// Initialise les gestionnaires d'événements de tous les éléments du formulairewebdev.
document.getElementById("formulairewebdev").nom.onkeyup=function(){traiter_info1(this.value)};
document.getElementById("formulairewebdev").prenom.onkeyup=function(){traiter_info2(this.value)};
document.getElementById("formulairewebdev").secret.onkeyup=function(){traiter_info5(this.value)};
document.getElementById("homme").onclick=function(){traiter_info3(this.value)};
document.getElementById("femme").onclick=function(){traiter_info3(this.value)};
document.getElementById("loisir").onclick=function(){
// traiter_info6(this.value)}; est valable avec firefox, mais pas avec internet explorer.
traiter_info6(document.getElementById("loisir").options[document.getElementById("loisir").selectedIndex].text)
};
document.getElementById("formulairewebdev").francais.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").anglais.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").allemand.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").espagnol.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").projet.onkeyup=function(){traiter_info4(this.value)};
document.getElementById("enregistrer").onclick=function(){fille()};
document.getElementById("effacer").onmouseup=function(){effacerfille()};
}

// Efface les données de la fenêtre fille (un dixième après avoir effacé les données de la fenêtre mère).
function effacerfille() {
setTimeout("w.debutva()",100);
}

//Les fonctions traiter_info* permettent de transporter les données vers la fenêtre fille.
// *********************************************************************************
function traiter_info1(mot) {
w.document.getElementById("formulairewebdev").nomva.value=mot;
}
function traiter_info2(mot) {
w.document.getElementById("formulairewebdev").prenomva.value=mot;
}
function traiter_info3(mot) {
// w.document.getElementById("genre").value="Monsieur"; fonctionne avec firefox mais pas avec internet explorer.
if (mot=="un homme"){w.document.getElementById("genre").options[0].selected=true;}
if (mot=="une femme"){w.document.getElementById("genre").options[1].selected=true;}
}
function traiter_info4(texte) {
w.document.getElementById("formulairewebdev").projet.value=texte;
}
function traiter_info5(mot) {
w.document.getElementById("formulairewebdev").secretva.value=mot;
}
function traiter_info6(mot) {
if (mot=="informatique"){ w.document.getElementById("informatique").checked=true;}
if (mot=='sport'){ w.document.getElementById("sport").checked=true;}
if (mot=="cinéma"){ w.document.getElementById("cinéma").checked=true;}
if (mot=="musique"){ w.document.getElementById("musique").checked=true;}
}
function traiter_info61() {
alert('info61');
w.document.getElementById("sport").selected=true;
}
function traiter_info7(mot) {
if (mot=="francais"){ w.document.getElementById("formulairewebdev").francais.checked=document.getElementById("formulairewebdev").francais.checked;}
if (mot=="anglais"){ w.document.getElementById("formulairewebdev").anglais.checked=document.getElementById("formulairewebdev").anglais.checked;}
if (mot=="allemand"){ w.document.getElementById("formulairewebdev").allemand.checked=document.getElementById("formulairewebdev").allemand.checked;}
if (mot=="espagnol"){ w.document.getElementById("formulairewebdev").espagnol.checked=document.getElementById("formulairewebdev").espagnol.checked;}
}
// *********************************************************************************

// Ouvre la fenêtre fille.
function fille(){
w=self.window.open('fille.html',"Fiche_de_renseignements","menubar=no, status=no, scrollbars=no, menubar=no, width=450, height=300");
}

// Les options par défaut.
function debut(){
document.getElementById("formulairewebdev").nom.value="";
document.getElementById("formulairewebdev").prenom.value="";
document.getElementById("formulairewebdev").secret.value="";
document.getElementById("homme").checked=true;
// document.getElementById("formulaire").loisir.value="informatique"; fonctionne avec firefox mais pas avec internet explorer.
document.getElementById("informatique").selected=true;
document.getElementById("formulairewebdev").francais.checked=true;
document.getElementById("formulairewebdev").anglais.checked=false;
document.getElementById("formulairewebdev").allemand.checked=false;
document.getElementById("formulairewebdev").espagnol.checked=false;
document.getElementById("formulairewebdev").projet.value="";
}

Le code javascript de la fille
mercredi 26 novembre 2008
par olivier ramos

// Au chargement de la page.
window.onload=initialisation;

function initialisation() {
// Charge les valeurs saisies dans la fenêtre mère.
debutva();
// Initialise les gestionnaires d'événements de tous les éléments du formulairewebdev.
document.getElementById("formulairewebdev").genre.onclick=function(){
// traiter_info2(this.value)}; fonctionne avec firefox mais pas avec internet explorer.
traiter_info2(document.getElementById("genre").options[document.getElementById("genre").selectedIndex].text)};
document.getElementById("formulairewebdev").nomva.onkeyup=function(){traiter_info1(this.value)};
document.getElementById("formulairewebdev").prenomva.onkeyup=function(){traiter_info6(this.value)};
document.getElementById("formulairewebdev").secretva.onkeyup=function(){traiter_info5(this.value)};
document.getElementById("informatique").onclick=function(){traiter_info3(this.value)};
document.getElementById("sport").onclick=function(){traiter_info3(this.value)};
document.getElementById("cinéma").onclick=function(){traiter_info3(this.value)};
document.getElementById("musique").onclick=function(){traiter_info3(this.value)};
document.getElementById("formulairewebdev").francais.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").anglais.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").allemand.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").espagnol.onclick=function(){traiter_info7(this.value)};
document.getElementById("formulairewebdev").projet.onkeyup=function(){traiter_info4(this.value)};
}

//Les fonctions traiter_info* permettent de transporter les données vers la fenêtre mère.
// *********************************************************************************
function traiter_info1(mot) {
opener.document.getElementById("formulairewebdev").nom.value=mot;
}
function traiter_info2(mot) {
if (mot=="Monsieur"){ opener.document.getElementById("homme").checked=true;}
if (mot=="Madame"){ opener.document.getElementById("femme").checked=true;}
}
function traiter_info3(mot) {
// opener.document.getElementById("formulairewebdev").loisir.value=mot; fonctionne avec firefox mais pas avec internet explorer.
if (mot=="informatique")opener.document.getElementById("loisir").options[0].selected=true;
if (mot=="sport")opener.document.getElementById("loisir").options[1].selected=true;
if (mot=="cinéma")opener.document.getElementById("loisir").options[2].selected=true;
if (mot=="musique")opener.document.getElementById("loisir").options[3].selected=true;
}
function traiter_info4(texte) {
opener.document.getElementById("formulairewebdev").projet.value=texte;
}
function traiter_info5(mot) {
opener.document.getElementById("formulairewebdev").secret.value=mot;
}
function traiter_info6(mot) {
opener.document.getElementById("formulairewebdev").prenom.value=mot;
}
function traiter_info7(mot) {
if (mot=="francais"){ opener.document.getElementById("formulairewebdev").francais.checked=document.getElementById("formulairewebdev").francais.checked;}
if (mot=="anglais"){ opener.document.getElementById("formulairewebdev").anglais.checked=document.getElementById("formulairewebdev").anglais.checked;}
if (mot=="allemand"){ opener.document.getElementById("formulairewebdev").allemand.checked=document.getElementById("formulairewebdev").allemand.checked;}
if (mot=="espagnol"){ opener.document.getElementById("formulairewebdev").espagnol.checked=document.getElementById("formulairewebdev").espagnol.checked;}
}

// Les valeurs de la fenêtre mère.
function debutva(){
document.getElementById("formulairewebdev").nomva.value=opener.document.getElementById("formulairewebdev").nom.value;
document.getElementById("formulairewebdev").prenomva.value=opener.document.getElementById("formulairewebdev").prenom.value;
document.getElementById("formulairewebdev").secretva.value=opener.document.getElementById("formulairewebdev").secret.value;

// if (opener.document.getElementById("femme").checked){document.getElementById("formulairewebdev").genre.value="Madame";} fonctionne avec firefox mais pas avec internet explorer.
if (opener.document.getElementById("femme").checked){ document.getElementById("genre").options[1].selected=true;}
if (opener.document.getElementById("homme").checked){ document.getElementById("genre").options[0].selected=true;}

// if (opener.document.getElementById("formulairewebdev").loisir.value=="informatique"){ document.getElementById("informatique").checked=true;} fonctionne avec firefox mais pas avec internet explorer.
var choixloisir=opener.document.getElementById("loisir").options[opener.document.getElementById("loisir").selectedIndex].text;
if (choixloisir=="informatique"){ document.getElementById("informatique").checked=true;}
if (choixloisir=="sport"){ document.getElementById("sport").checked=true;}
if (choixloisir=="cinéma"){ document.getElementById("cinéma").checked=true;}
if (choixloisir=="musique"){document.getElementById("musique").checked=true;}

document.getElementById("formulairewebdev").francais.checked=opener.document.getElementById("formulairewebdev").francais.checked;
document.getElementById("formulairewebdev").anglais.checked=opener.document.getElementById("formulairewebdev").anglais.checked;
document.getElementById("formulairewebdev").allemand.checked=opener.document.getElementById("formulairewebdev").allemand.checked;
document.getElementById("formulairewebdev").espagnol.checked=opener.document.getElementById("formulairewebdev").espagnol.checked;
document.getElementById("formulairewebdev").projet.value=opener.document.getElementById("formulairewebdev").projet.value;
}

Le dialogue
mardi 27 janvier 2009
par olivier ramos