Menu dans javascript
Hors ligneAliancerhods Le 17/10/2014 à 09:32 Profil de Aliancerhods Configuration de Aliancerhods

Bonjour les amis,

Voici une question pour les pro car je ne suis pas un expert de javascript.

Mon formulaire comporte 3 champs

- champ (ville_du_client) est un menu alimenté par une liste de villes située dans la table "table_villes" en base de données.

- champ (date) est une date alimentée par un calendrier

- champ (nbentrees) est un tableau deux dimensions.

Ce formulaire comporte 12 lignes de ces 3 champs.

Je souhaite ne plus afficher les douze lignes mais insérer un script javascript qui ajoute automatiquement trois champs supplémentaires à la demande.

Le code PHP avec 12x3 champs fonctionne. Le javascript fonctionne avec des champs simples.

Mais ça ne fonctionne plus quand je veux ajouter le menu, la date et le tableau car je ne sais pas comment faire fonctionner le menu, le calendrier et un tableau 2 dimension en javascript.

Merci de votre aide.


PS : désolé pour les puristes, mon code est en PHP englobant de l'html. J'espère qu'il reste clair cependant.


<?php

echo '

<form action=# method="POST">

<div id="champs_formulaire" >

<select name=ville_du_client[]>

';

$req=mysql_query("SELECT villes FROM table_villes ORDER BY villes",$idconnect);

while ($ligne=mysql_fetch_row($req))

{

if ($Filtre != "")

{

if ($ligne[0] == "Paris") echo '<option value="'.$ligne[0].'" selected>'.$ligne[0].'</option>';

else echo '<option value="'.$ligne[0].'">'.$ligne[0].'</option>';

}

else

echo '<option value="'.$ligne[0].'">'.$ligne[0].'</option>';

}

echo '</select>

<input onclick="CalendrierKvh(this);" name="date[]" readonly="readonly" style="cursor: text" />

<input type="text" name=nbentrees[][1] size="2">

</div>

<script type="text/javascript" >

var div = document.getElementById(\'champs_formulaire\');

function addInput(name)

{

var input = document.createElement("input");

input.name = name;

div.appendChild(input);

}

function addField()

{

div.appendChild(document.createElement("br"));

addInput("ville_du_client[]");

addInput("date[]");

addInput("nbentrees[]");

div.appendChild(document.createElement("br"));

}

</script>

<button type="button" onclick="addField()" >Ajouter champs</button>

<button type="submit">valider</button>

</form>';

Maréchal Lyautey a écrit :Celui qui ne fait pas tout pour être le premier, le devenir ou le rester, ne demeure pas le second mais tombe fatalement le dernier.
Hors ligneAnthony Le 20/10/2014 à 22:41 Profil de Anthony Configuration de Anthony

Fou du volant

Salut et bienvenue sur VIC Heureux

Je ne comprends pas bien ton problème, tu souhaites rajouter dynamiquement des champs de formulaire en effectuant un clic sur un bouton ?

En javascript, tu as plein de possibilités pour faire ça. Tu sais utiliser des librairies comme Jquery, ou tu souhaites utiliser du javascript natif ? (natif veut dire que c'est du code javascript pur, sans librairie additionnelle). Sourire

En javascript natif, tu peux utiliser la propriété innerHTML, qui te permet de rajouter du HTML sans te prendre la tête avec le DOM (parce que là, en utilisant les appendChild() et compagnie, tu vas en mettre des lignes de code ... Heureux)

Un exemple tout simple :

<form id="monformulaire" method="post"><input type="button" id="ajouter" value="Ajouter un champ texte" onclick="ajouterChampTexte()">
<script type="text/javascript">
function ajouterChampTexte()
{
    document.getElementById('monformulaire').innerHTML += '<p>Mon nouveau champ texte : <input type="text" name="champtexte[]" size="15"></p>';
}
</script>

Voilà bon c'est juste un exemple pas très propre pour te montrer ce que tu peux faire simplement en javascript. N'hésite pas Heureux

--

Hors ligneAliancerhods Le 21/10/2014 à 02:38 Profil de Aliancerhods Configuration de Aliancerhods

Merci Anthony pour la réponse rapide et bien documentée. Je sais que ma question n'est pas claire car ce qui se conçoit bien s'exprime clairement. Mon problème est que je ne conçois pas bien ni javascript, ni jquery.

Dans mon cas, il s'agit de passer une tonne de paramètres différents pour générer des select option, des accès à fonction javascript tels qu'un appel à un calendrier.

Si quelqu'un pouvait me donner quelques exemples simples de passage de paramètres qui me permettraient de me lancer çà m'aiderait.


Hors ligneAnthony Le 23/10/2014 à 15:10 Profil de Anthony Configuration de Anthony

Fou du volant

Le problème est que ta question est, en l'état actuel, trop vague pour pouvoir t'aider. Je t'ai donné un exemple qui te permet, à partir d'un clic sur un bouton, de rajouter un champ de type text à la volée. A toi d'adapter le code pour rajouter un <select> si tu veux, ou tout autre type de champ Sourire

--

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels