[JAVASCRIPT HTML] javascript appelant du html

Résolu/Fermé

shoezman13 Messages postés 15 Date d'inscription mardi 13 mai 2008 Statut Membre Dernière intervention 18 juin 2008 - 28 mai 2008 à 11:03
shoezman13 Messages postés 15 Date d'inscription mardi 13 mai 2008 Statut Membre Dernière intervention 18 juin 2008 - 28 mai 2008 à 14:45

Bonjour,
J'ai un formulaire en HTML, et pour afficher des menus pour la date de naissance, j'ai insérer du code php. ça marche nickel mais maintenant faut que je mette tout ça en template... donc est-ce qu'il y a un moyen de faire la meme chose en javascript? comme ça je peux tout garder sur le meme fichier (se serait plus facile).

<DIV><label class="require" for="date_n">Date de naissance : </label>

<select autocomplete="off" name="date_n_Day" id="date_n">
<?php
echo("\t\t\t\t\t<option value=\"\">Jour :</option>\n");
for($i=1 ; $i < 32 ; $i++)
{
echo("\t\t\t\t\t<option value=\"$i\">$i</option>\n");
}
?>
</select>
<select autocomplete="off" name="date_n_Month" id="date_n">
<?php
echo("\t\t\t\t\t<option value=\"\">Mois :</option>\n");
for($i=1 ; $i < 13 ; $i++)
{
echo("\t\t\t\t\t<option value=\"$i\">$i</option>\n");
}
?>
</select>
<select autocomplete="off" name="date_n_Year" id="date_n">
<?php
echo("\t\t\t\t\t<option value=\"\">Année :</option>\n");
for($i=2007 ; $i > 1899 ; $i--)
{
echo("\t\t\t\t\t<option value=\"$i\">$i</option>\n");
}
?>
</select></DIV>

faudrait que j'arrive a faire une boucle en javascript qui contient du html mais je sais pas si c'est possible en fait...

A voir également:

[JAVASCRIPT HTML] javascript appelant du html
Telecharger javascript - Télécharger - Langages
Editeur html - Télécharger - HTML
&Nbsp html ✓ - Forum Webmastering
Br html ✓ - Forum Webmastering
[HTML] -   á et les autres - Forum HTML

2 réponses

Réponse 1 / 2

GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
28 mai 2008 à 11:42

C'est tout à fait possible à faire. Et même de 3 manière différentes :
- La première consiste à créer le code HTML (comme tu le fait en PHP), et de le mettre directement dans l'objet SELECT.
- La deuxième consiste à créer directement les objets OPTIONS avec les fonctions fournit par Javascript
- La troisème consiste à créer directement le DOM du SELECT

Dans ton template, dans tout les cas :

<select autocomplete="off" name="date_n_Day" id="date_n_day">

- Première méthode :

/* Initialisation du contenu */
var content = '<option value="">Jour :</option>';
/* Boucle pour créer les différentes options du SELECT */
for(var i = 1; i < 32; i++){
  content += '<option value="' + i + '">' + $i + '</option>'); 
}
/* Récupération du SELECT (il faut bien que son identifiant soit unique) */
var select = document.getElementsById('date_n_day');
/* On remplace tout le contenu du SELECT par celui que l'on a créé (comme il etait vide, il n'y a pas de problème) */
select.innerHTML = content;

- Deuxième méthode :

/* Récupération du SELECT (il faut bien que son identifiant soit unique) */
var select = document.getElementsById('date_n_day');
/* Création et insertion de la première option
* new Option('Texte à afficher', 'value') */
select.options[0] = new Option('Jours', '');
/* Boucle pour créer les différentes options du SELECT */
for(var i = 1; i < 32; i++){
  select.options[i] = new Option(i, i); 
}

- Troisième méthode

/* Récupération du SELECT (il faut bien que son identifiant soit unique) */
var select = document.getElementsById('date_n_day');
/* Création de la première option */
var option = document.createElement('option');
/* Mise à jours du text à afficher */
option.innerHTML = 'Jours';
/* La valeurs et vide */
option.value = '';
/* Ajout de l'option au SELECT */
select.appendChild(option);
/* Boucle pour créer les différentes options du SELECT */
for(var i = 1; i < 32; i++){
var option = document.createElement('option');
  option.innerHTML = i;
  option.value = i;
  select.appendChild(option);
}

Je te garanti pas que cela marche directement (j'ai pas tester ce que j'ai écrit), mais les différent principes sont là.

shoezman13 Messages postés 15 Date d'inscription mardi 13 mai 2008 Statut Membre Dernière intervention 18 juin 2008 1
28 mai 2008 à 13:59

Merci pour ta réponse.
J'ai pu essayer tout ça, ça marchait pas du tout avant que je comprenne que j'avais oublié les balises {literal} :P
Sinon maintenant j'ai mes 3 menus déroulants (jours, mois, années) mais ils sont vides... j'ai beau essayer de changer des petits trucs par ci par là ça change rien... alors je vais replonger dessus mais si tu as une idée tu problème je reste à l'écoute.
(au fait pour bien tester le programme j'ai mis une méthode différente pour chaque menu et ils sont tous vides...)

PS: dans la console de firebug j'obtiens ça :

select has no properties
[Break on this error] select.options[0] = new Option("Jours", "");

Réponse 2 / 2

GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
28 mai 2008 à 14:08

select has no properties

En gros, ça veut dire que le document.getElementById() n'a rien retourné. Cela peut venir de plusieurs chose :
- il n'existe pas d'élement avec l'id fournit
- le script est exécuté avant que l'objet apparaisse
- ou alors, vu que j'ai fait une grosse boulette dans ce que j'ai écrit, ça peut être normal que ca marche pas. J'ai mis un "s" à getElementById().

EDIT : a part ce problèmes de "s" en trops, seul la première méthode que je t'ai donné contient des erreurs. Voila le code corrigé :

var content = '<option value="">Jour :</option>';
/* Boucle pour créer les différentes options du SELECT */
for(var i = 1; i < 32; i++){
  content += '<option value="' + i + '">' + i + '</option>';
}
/* Récupération du SELECT (il faut bien que son identifiant soit unique) */
var select = document.getElementById('date_n_day');
/* On remplace tout le contenu du SELECT par celui que l'on a créé (comme il etait vide, il n'y a pas de problème) */
select.innerHTML = content;

Les erreurs été surtout sur cette ligne:

content += '<option value="' + i + '">' + $i + '</option>');

$i n'existe pas, et j'ai une parenthese qui traine à la fin.

(Pour les deux autres méthode, il faut bien penser à enlever le "s" que j'ai mis en trop)

shoezman13 Messages postés 15 Date d'inscription mardi 13 mai 2008 Statut Membre Dernière intervention 18 juin 2008 1
28 mai 2008 à 14:45

ça y est ça marche impec!!! Pour les "s" en trop j'avais vu ça parce que j'ai essayé de comprendre ton code quand meme ça pouvait toujours servir alors j'ai pu voir que la fonction document.getElementById() est vraiment casse couille avec sa jumelle document.getElementsByName() ... ils sont pas capable de mettre la même orthographe? lool
Bon sinon après avoir modifié ce dont tu m'as parlé, j'ai remarqué que j'avais eu des problèmes de majuscule dans mes ID...
alala vive la programmation :P

En tout cas merci beaucoup, maintenant mon php m'attend pour récupérer tout ça^^
A bientot

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

la balise <br> ou <br />

&nbsp ; Quelle Fonction ?

Espace en HTML