Remplir un form (ou autre) avec une fonction ? [Débutant(e)]

**PauseKawa** · 09/12/2012, 19h20

Bonjour,

Absolument ignare en Javascript je me trouve confronté à un petit souci : Je cherche à modifier une page html suivant la lecture d'un fichier texte.
Dans un premier temps j'ai ce code exemple, fonctionnel (plus ou moins sans doute pour vous).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test html</title>
<SCRIPT LANGUAGE="JavaScript">
function go(loc){
    document.getElementById('cwindow').src = loc;
}
</script>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<iframe id="cwindow" src="http://www.developpez.com/" name="cwindow" width="100%" height="730" frameborder="30"></iframe>
<form method="post">
    <input type="radio" onclick = "go('http://www.mappy.fr')")/><label for="Mappy">Mappy</label>
    <input type="radio" onclick = "go('http://www.developpez.com/')"/><label for="Developpez">Developpez</label>
</form>
</body>
</html>

A partir de là je souhaite lire un fichier texte de configuration (cela je pense l'avoir suite à mes recherches) pour ajouter les input.
Disons que je stocke la lecture dans un tableau voici ce que cela donne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test html</title>
<SCRIPT LANGUAGE="Javascript">
String tableauCameras[][] = {{"http://www.google.fr", "Google"},{"http://http://www.leboncoin.fr/", "Leboncoin"}};
function go(loc){
    document.getElementById('cwindow').src = loc;
}
function init(){
    go(tableauCameras[0][0]);
    var formobj = document.getElementById('cform');
    for(int i = 0; i < tableauCameras.length; i++)
    {
    formobj.innerHTML="<input type=\"radio\" onclick = \"go(\'"+tableauCameras[i][0]+"\')\")\/><label for=\""+tableauCameras[i][1]+"\">"+tableauCameras[i][1]+"<\/label>");
    }
}
</SCRIPT>
</head>
 
<body bgcolor="#000000" text="#FFFFFF" onload="init();">
<iframe id="cwindow" name="cwindow" src="" width="100%" height="730" frameborder="30"></iframe>
<form id="cform" method="post"></form>
</body>
</html>

Et bien sur cela ne fonctionne pas (idem avec windows en fin de script)
et je suppose que cela interviens après l'affichage de la page, non ?

Merci d'avance pour vos lumières

**SylvainPV** · 10/12/2012, 10h27

Bonjour,

Dans ta boucle tu réaffectes le contenu HTML à un seul élément (innerHTML = ) donc ta boucle ne sert à rien. innerHTML += par contre va concaténer à chaque loop ton nouveau HTML.

**PauseKawa** · 10/12/2012, 21h21

Bonsoir,

Merci pour la réponse.
J'avais en effet noter cela (+=) mais je n'ai toujours d'affiché...

**SylvainPV** · 11/12/2012, 11h24

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
String tableauCameras[][] = {{"http://www.google.fr", "Google"},{"http://http://www.leboncoin.fr/", "Leboncoin"}};

ça c'est pas du Javascript ! les variables ne sont pas typées et on ne déclare pas un tableau de cette façon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var tableauCameras = [["http://www.google.fr", "Google"],["http://http://www.leboncoin.fr/", "Leboncoin"]];

là c'est mieux

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
for(int i = 0;

biiip ! JS = pas de typage ; il faut mettre var

Enfin tu dois savoir que google.fr ne permet pas le chargement en iframe, le site est configuré ainsi. Tu peux essayer avec un autre exemple moins regardant.

Dernière chose, pour éviter de créer un topic à chaque erreur de syntaxe, je t'invite à regarder comment fonctionne la console d'erreurs Javascript (celle de Chrome est excellente) ; cela te permettra de débugger ton code bien plus facilement.

**PauseKawa** · 11/12/2012, 21h08

Bonsoir,

Que de bons conseils... Dire que je les utilisent moi même (

)
Grand merci SylvainPV car je me suis perdu, par manque de bases en javascript, dans ce sujet.

Voici ce que cela donne suivant vos conseils:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test html</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<iframe id="cwindow" name="cwindow" src="" width="100%" height="730" frameborder="30"></iframe>
<form id="cform" method="post"></form>
<script LANGUAGE="JavaScript">
var tableausites = [["http://www.leboncoin.fr/", "Leboncoin"],["http://www.mappy.fr", "Mappy"]];
function go(loc){
    document.getElementById('cwindow').src = loc;
}
function initpage(){
    document.getElementById('cwindow').src = tableausites[0][0]
    var formobj = document.getElementById('cform');
    for(var i = 0; i < tableausites.length; i++)
    {
        formobj.innerHTML +=  "<input name=Selection type=radio onclick=" + "go('" + tableausites[i][0] + "')><label for=" +tableausites[i][1] + ">" + tableausites[i][1] + "</label>";
 
    }
}
initpage();
</script>
</body>
</html>

Sans doute a revoir : Promis, j’apprends les bases pour la prochaine fois (créer tableausites à partir de la lecture d'un fichier).

@+

Remplir un form (ou autre) avec une fonction ? [Débutant(e)]

JavaScript

Discussions similaires

Partager

Partager