Remplir un form (ou autre) avec une fonction ?

Version imprimable

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:

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:

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

10/12/2012, 10h27
SylvainPV

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.
10/12/2012, 21h21
PauseKawa

Bonsoir,

Merci pour la réponse.
J'avais en effet noter cela (+=) mais je n'ai toujours d'affiché...
11/12/2012, 11h24
SylvainPV
Code:

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:

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

là c'est mieux
Code:

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.

Bonsoir,

Que de bons conseils... Dire que je les utilisent moi même (:oops:)
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:

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).

@+