Apparition d'un formulaire ou d'un submit après validation par un bouton ou une selection

MiWi · Août 1, 2008, 5:45

Bonjour,

Le titre de mon sujet est long, et je crois qu’il résume assez bien l’affaire.

Mais je m’explique quand même.j’ai créer un formulaire, mais il est incomplet. En effet j’aimerais quand sélectionnant un bouton radio apparaissent un bouton submit “Ajouter”.

Ensuite dans mon premier formulaire j’ai un autre formulaire, avec d’autre bouton radio et un type text. Ce que j’aimerais, c’est pouvoir après avoir cliquer sur ajouter pouvoir faire réapparaitre ce formulaire, tout en gardant le premier formulaire (j’espère que c’est assez clair, sinon, merci de me dire.).

Après m’être renseigner, j’ai penser à onclick, mais j’ai pas su faire réapparaitre mon formulaire.

Merci d’avance pour une futur aide.
Edité le 04/08/2008 à 15:39

kookiz33_1_1 · Août 1, 2008, 6:07

Pour faire disparaitre un élément :


document.getElementById('IdDeTonElement').style.visibility = 'hidden';

Pour le faire apparaitre :


document.getElementById('IdDeTonElement').style.visibility = 'visible';

Si c’est juste un élément (genre une boite de texte), tu peux appeler directement ce code avec son id. Si c’est un groupe d’éléments (un formulaire entier par exemple), mets le tout dans une div, et appelle le code avec l’id de la div
Edité le 01/08/2008 à 18:08

MiWi · Août 1, 2008, 6:21

Merci pour ces informations. 9a permet bien de faire ce que je souhaite dans un premier temps et pour l’apparition du bouton “ajouter”.
Mais par contre, une fois que pour faire apparaitre ou disparaitre le bouton Ajouter, c’est selon 2 bouton radio.
Et donc, une fois que je clic sur celui qui me permet de faire apparaitre mon bouton ajouter, ça marche, mais si sans F5 je sélectionne l’autre bouton, “Ajouter” ne veut pas disparaitre.
Y’a t’il un moyen que cela ce fasse sans rafraichir?

kookiz33_1_1 · Août 1, 2008, 7:25

Tu peux nous montrer ton code pour voir ? Ca sera plus simple

MiWi · Août 4, 2008, 10:28


<LABEL>Type : </LABEL>
    MPTS
    <input type="radio" name="type" value="mpts" class="OPTION" 
onCnlick="document.getElementById('ajt').style.visibility = 'visible';"/>
    SPTS
    <input type="radio" name="type" value="spts" class="OPTION" 
onClick="document.getElementById('ajt').style.visibility = 'hidden';">
  <p>

<p>
  <input type="submit" id="ajt" name="ajout" value="ajouter"  >
</p>

MPTS permet de faire apparaitre le bouton ajouter.
SPTS permet de le faire redisparaitre (à la base le bouton n’apparait pas!!!)


<form id="formInform" name="formInform" id="FormInform" method="post" action="">
  <label> Chaine
  <input type="text" name="chaine" size="20" id="chaine"/>
  </label>
  <p>
    <LABEL>Codage : </LABEL>
    MPG4
    <input type="radio" name="codage" value="mpg4" class="OPTION" />
    MPEG2
    <input type="radio" name="codage" value="mpeg2" class="OPTION" >
  <p>
    <LABEL>Définition : </LABEL>
    SD
    <input type="radio" name="def" value="SD" class="OPTION" />
    HD
    <input type="radio" name="def" value="HD" class="OPTION" >
  <p>
    <LABEL>Systeme : </LABEL>
    MPG4
    <input type="radio" name="syst" value="PAL" class="OPTION" />
    MPEG2
    <input type="radio" name="syst" value="NTSC" class="OPTION" >
  <p>
</form>

Ce formulaire apparait déjà sur la page, si on selectionne MPTS il faudrait qu’il se remette encore une fois à la suite pour pouvoir rentrer de nouvelles données.

N’hésite pas si tu comprends pas.

Je rajoute, que je n’excelle pas dans la programmation, mais que je me débrouille (enfin presque!!!) lol.
Edité le 04/08/2008 à 10:30

kookiz33_1_1 · Août 4, 2008, 10:49

Normal que ton bouton “Ajouter” refuse de réapparaitre, tu as mit “onCnlick” au lieu de “onClick” pour MPTS

MiWi · Août 4, 2008, 11:05

c’est là où je me sens ridicule…
je voudrais que le bouton n’apparaisse pas dès le début. j’ai essayer style=“display:none” mais du coup, il n’apparait plus du tout!!! j’ai penser mettre un iput type “hidden” mais où est-ce que je le mets en submit?

kookiz33_1_1 · Août 4, 2008, 11:08

style=“visiblity:hidden”

MiWi · Août 4, 2008, 11:19

J’ai fait


 <input type="submit" id="ajt" name="ajout" value="ajouter" style="visiblity:hidden" >

mais quand je recharge ma page, le bouton s’affuche quand même

kookiz33_1_1 · Août 4, 2008, 11:21

A c’est moi qui ai fait une coquille cette fois :ane:

visibility, au lieu de visiblity
Edité le 04/08/2008 à 11:22

MiWi · Août 4, 2008, 11:35

Merci beaaaaaaaaaaaaaaaaaaaaaaaaaaaaucoup, il me reste plus qu’à trouver comment faire apparaitre une deuxième fois le deuxième formulaire lorsque mpts est coché…

kookiz33_1_1 · Août 4, 2008, 11:41

Un truc dans le genre ?


<script type="text/Javascript">

function MPTS()
{
	document.getElementById('ajt').style.visibility = 'visible';
	document.getElementById('SecondFormulaire').style.visibility = 'visible';
}

function SPTS()
{
	document.getElementById('ajt').style.visibility = 'hidden';
	document.getElementById('SecondFormulaire').style.visibility = 'hidden';
}


</script>

<LABEL>Type : </LABEL>
 MPTS
 <input type="radio" name="type" value="mpts" class="OPTION" 
onClick="javascript:MPTS()"/>
 SPTS
 <input type="radio" name="type" value="spts" class="OPTION" 
onClick="javascript:SPTS()">
 <p>

<p>
 <input type="submit" id="ajt" name="ajout" value="ajouter" style="visibility:hidden" >
</p>


<form id="formInform" name="formInform" id="FormInform" method="post" action="">
 <label> Chaine
 <input type="text" name="chaine" size="20" id="chaine"/>
 </label>
 <p>
 <LABEL>Codage : </LABEL>
 MPG4
 <input type="radio" name="codage" value="mpg4" class="OPTION" />
 MPEG2
 <input type="radio" name="codage" value="mpeg2" class="OPTION" >
 <p>
 <LABEL>Définition : </LABEL>
 SD
 <input type="radio" name="def" value="SD" class="OPTION" />
 HD
 <input type="radio" name="def" value="HD" class="OPTION" >
 <p>
 <LABEL>Systeme : </LABEL>
 MPG4
 <input type="radio" name="syst" value="PAL" class="OPTION" />
 MPEG2
 <input type="radio" name="syst" value="NTSC" class="OPTION" >
 <p>
 
 <div id="SecondFormulaire" style="visibility:hidden">
 <label> Chaine
 <input type="text" name="chaine2" size="20" id="chaine"/>
 </label>
 <p>
 <LABEL>Codage : </LABEL>
 MPG4
 <input type="radio" name="codage2" value="mpg4" class="OPTION" />
 MPEG2
 <input type="radio" name="codage2" value="mpeg2" class="OPTION" >
 <p>
 <LABEL>Définition : </LABEL>
 SD
 <input type="radio" name="def2" value="SD" class="OPTION" />
 HD
 <input type="radio" name="def2" value="HD" class="OPTION" >
 <p>
 <LABEL>Systeme : </LABEL>
 MPG4
 <input type="radio" name="syst2" value="PAL" class="OPTION" />
 MPEG2
 <input type="radio" name="syst2" value="NTSC" class="OPTION" >
 <p>
 </div>
 
</form>

MiWi · Août 4, 2008, 11:48

merci d’avoir répondu assez rapidement, mais c’est pas exactement ce que je voulais.

Je me réexplique,

Ce que j’aimerais, c’est après avoir cliquer sur “Ajouter” que mon deuxième formulaire


<form id="formInform" name="formInform" id="FormInform" method="post" action="">
 <label> Chaine
 <input type="text" name="chaine" size="20" id="chaine"/>
 </label>
 <p>
 <LABEL>Codage : </LABEL>
 MPG4
 <input type="radio" name="codage" value="mpg4" class="OPTION" />
 MPEG2
 <input type="radio" name="codage" value="mpeg2" class="OPTION" >
 <p>
 <LABEL>Définition : </LABEL>
 SD
 <input type="radio" name="def" value="SD" class="OPTION" />
 HD
 <input type="radio" name="def" value="HD" class="OPTION" >
 <p>
 <LABEL>Systeme : </LABEL>
 MPG4
 <input type="radio" name="syst" value="PAL" class="OPTION" />
 MPEG2
 <input type="radio" name="syst" value="NTSC" class="OPTION" >
 <p>

se “duplique”. Parce que je peux avoir rentrer des information une ou plusieurs fois
Edité le 04/08/2008 à 11:55

kookiz33_1_1 · Août 4, 2008, 11:54

Dans ton cas, tu remplaces tes ??? par style.visibility = ‘visible’ pour afficher ton formulaire ou style.visibility = ‘hidden’ pour le masquer.

Il y a deux approches au problème :

Créer dynamiquement des formulaires dans ta page
Avantage : Tu peux afficher un nombre illimité de formulaires
Inconvénient : C’est difficile à mettre en place, aussi bien pour la création dynamique des formulaire que pour la récupération des données
Te limiter à x formulaires (en l’occurrence : 2)
Avantage / Inconvénients : exactement l’inverse de la solution précédente.

Pour cette seconde solution, l’idée est de créer tous tes formulaires dans ta page, puis de les mettre chacun dans une div. Tu peux ensuite masquer ou afficher ces div quand tu veux à l’aide de fonctions javascript, de la manière que j’ai indiqué dans mon premier message

MiWi · Août 4, 2008, 11:57

j’avais pas vu que tu avais lu mon post avant modification. Voilà, ce que j’aimerais c’est justement l’approche dynamique…

kookiz33_1_1 · Août 4, 2008, 11:59

En as tu vraiment besoin ? Quand tu cliques sur “Ajouter”, tu veux que ça ajoute un seul nouveau formulaire, ou que ça en ajoute un nouveau à chaque fois que tu cliques ? (genre si je clique 5 fois sur “Ajouter”, ça ajoute 5 formulaires…).
Edité le 04/08/2008 à 11:59

MiWi · Août 4, 2008, 12:07

Que ça en ajoute à chaque fois que je clique dessus.

Concrètement, je réalise une application qui permettra de remplir une base de donnée, il faut savoir que le M de MPS signifie Multi, en d’autre terme, il faut que je puisse rentrer plusieurs donnée, parce que ça évitera de remplir le premier formulaire à chaque fois sachant que ce sera la même adresse IP (lol, c’est pas beaucoup plus clair)

Mais pour faciliter l’utilisation, il serait préférable que ce qoit un clique = un nouveau formulaire, parce que ça peut être illimité, ça peut être rempli une ou plusieurs fois…

je peux pas faire un document.add('divFormInform') ???? un truc dans le genre?

kookiz33_1_1 · Août 4, 2008, 12:25

Le problème, c’est que pour pouvoir récupérer les données saisies, il faut que les éléments de chaque formulaires aient des “name” différents.

Je peux te proposer cette approche, même si ce n’est pas forcement la plus élégante :

<script type="text/Javascript">

function MPTS()
{
	document.getElementById('ajt').style.visibility = 'visible';
	document.getElementById('formulaires').style.visibility = 'visible';
}

function SPTS()
{
	document.getElementById('ajt').style.visibility = 'hidden';
	document.getElementById('formulaires').style.visibility = 'hidden';
}

var nbFormulaires = 1

function AjouterFormulaire()
{
	var formHTML = document.getElementById('formulaireReference').innerHTML;
 
	formHTML = formHTML.replace(/chaine0/g, 'chaine' + nbFormulaires);
	formHTML = formHTML.replace(/codage0/g, 'codage' + nbFormulaires);
	formHTML = formHTML.replace(/def0/g, 'def' + nbFormulaires);
	formHTML = formHTML.replace(/syst0/g, 'syst' + nbFormulaires);
	
	document.getElementById('formulaires').innerHTML += formHTML;

	nbFormulaires++;
}


</script>

<LABEL>Type : </LABEL>
 MPTS
 <input type="radio" name="type" value="mpts" class="OPTION" 
onClick="javascript:MPTS()"/>
 SPTS
 <input type="radio" name="type" value="spts" class="OPTION" 
onClick="javascript:SPTS()">
 <p>

<p>
 <input type="submit" id="ajt" name="ajout" value="ajouter" style="visibility:hidden" onclick="javascript:AjouterFormulaire()" >
</p>


<form id="formInform" name="formInform" id="FormInform" method="post" action="">
 <div id="formulaireReference">
<label> Chaine
 <input type="text" name="chaine0" size="20" id="chaine"/>
 </label>
 <p>
 <LABEL>Codage : </LABEL>
 MPG4
 <input type="radio" name="codage0" value="mpg4" class="OPTION" />
 MPEG2
 <input type="radio" name="codage0" value="mpeg2" class="OPTION" >
 <p>
 <LABEL>Définition : </LABEL>
 SD
 <input type="radio" name="def0" value="SD" class="OPTION" />
 HD
 <input type="radio" name="def0" value="HD" class="OPTION" >
 <p>
 <LABEL>Systeme : </LABEL>
 MPG4
 <input type="radio" name="syst0" value="PAL" class="OPTION" />
 MPEG2
 <input type="radio" name="syst0" value="NTSC" class="OPTION" >
 <p>
</div>

 <div id="formulaires"></div>
 
</form>

Le formulaire “modèle” est dans la div “formulaireReference”. A toi de voir s’il doit s’afficher ou non. Le bouton “Ajouter” appelle la fonction Javascript “AjouterFormulaire()”. Celle-ci récupère le contenu de la div “formulaireReference”, et modifie les “name” de chaque élément du formulaire. Il copie enfin le code ainsi obtenu dans la div “formulaires” qui contiendra de fait les formulaires générés dynamiquement.

A la récupération des données, tu auras donc les données du formulaire de référence qui auront les noms “codage0”, “def0”, etc…, et les formulaires générés dynamiquement qui aurant les noms “codage1”, puis “codage2”, etc…

Il doit être possible de faire ça de manière plus “clean” en écrivant un code Javascript qui parcourt les éléments du formulaire et modifie dynamiquement leur propriété “name” (dans ma solution, tu seras obligé de modifier le code javascript à chaque fois que tu rajoutes un élément au formulaire), mais ça j’ai vraiment la flemme de te l’écrire

MiWi · Août 4, 2008, 1:51

Ca ne marche pas si je mets


<LABEL>Type : </LABEL>
 MPTS
 <input type="radio" name="type" value="mpts" class="OPTION" 
onClick="javascript:MPTS()"/>
 SPTS
 <input type="radio" name="type" value="spts" class="OPTION" 
onClick="javascript:SPTS()">
 <p>

<p>
 <input type="submit" id="ajt" name="ajout" value="ajouter" style="visibility:hidden" onclick="javascript:AjouterFormulaire()" >
</p>

c’est normal?
Edité le 04/08/2008 à 13:45

Je te montre le corps du code


<body>
<form id="formInsert" name="formInsert" method="post" action="">
  <label>
  <select name="listDerou" size="1" id="select">
    <option>Auto</option>
    <option>Manuel</option>
  </select>
  </label>
  <p>
    <label> Port
    <input name="port" type="text" id="port" value="" size="8" />
    </label>
  <p>
    <LABEL>Type : </LABEL>
   MPTS
 <input type="radio" name="type" value="mpts" class="OPTION" onClick="javascript:MPTS()"/>
 SPTS
 <input type="radio" name="type" value="spts" class="OPTION" onClick="javascript:SPTS()">
<p>

<p>
  <input type="submit" id="ajt" name="ajout" value="ajouter" style="visibility:hidden" onclick="javascript:AjouterFormulaire()" >
</p>
</form>

 <form id="formInform" name="formInform" id="FormInform" method="post" action="">
 <div id="formulaireReference">
<label> Chaine
 <input type="text" name="chaine0" size="20" id="chaine"/>
 </label>
 <p>
 <LABEL>Codage : </LABEL>
 MPG4
 <input type="radio" name="codage0" value="mpg4" class="OPTION" />
 MPEG2
 <input type="radio" name="codage0" value="mpeg2" class="OPTION" >
 <p>
 <LABEL>Définition : </LABEL>
 SD
 <input type="radio" name="def0" value="SD" class="OPTION" />
 HD
 <input type="radio" name="def0" value="HD" class="OPTION" >
 <p>
 <LABEL>Systeme : </LABEL>
 MPG4
 <input type="radio" name="syst0" value="PAL" class="OPTION" />
 MPEG2
 <input type="radio" name="syst0" value="NTSC" class="OPTION" >
 <p>
</div>

 <div id="formulaires"></div>
 
</form>
  
<p>
</body>

kookiz33_1_1 · Août 4, 2008, 1:56

Tu as mit le

<script type="text/Javascript">

function MPTS()
{
	document.getElementById('ajt').style.visibility = 'visible';
	document.getElementById('formulaires').style.visibility = 'visible';
}

function SPTS()
{
	document.getElementById('ajt').style.visibility = 'hidden';
	document.getElementById('formulaires').style.visibility = 'hidden';
}

var nbFormulaires = 1

function AjouterFormulaire()
{
	var formHTML = document.getElementById('formulaireReference').innerHTML;
 
	formHTML = formHTML.replace(/chaine0/g, 'chaine' + nbFormulaires);
	formHTML = formHTML.replace(/codage0/g, 'codage' + nbFormulaires);
	formHTML = formHTML.replace(/def0/g, 'def' + nbFormulaires);
	formHTML = formHTML.replace(/syst0/g, 'syst' + nbFormulaires);
	
	document.getElementById('formulaires').innerHTML += formHTML;

	nbFormulaires++;
}


</script>

?