Comment afficher mon formulaire en jquery

Résolu/Fermé

alali - 10 déc. 2015 à 09:56
alali - 10 déc. 2015 à 17:40

Bonjour, je suis un debutant en jquery ,j'ai fait un champ select ou il ya des nombres,en fonction du nombre selectionné le nombre de champ s'affiche voici le code:
<tr><td> Choisir le nombre de beneficiare que vous souhaitez enregistrer :</td><td><select name='nb_coll' id='nb_coll' style='width:40px;' onChange='ajouterBeneficiaire()'> <option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option> <option value='4'>4</option><option value='5'>5</option></select></td></tr>

voici mon script jquery que je souhaiterai realiser:

function ajouterBeneficiaire()
{
var nbre = jQuery("#nb_coll").val();
var monDiv = '';

for(var i=1;i<=nbre;i++)
{
monDiv += '<div id="detail_equipe'+i+'" >'

+ '<div id="teamclinique'+i+'" >'

+ '<tr><td><label for="Coordinatefonction">Enfant beneficiare'+i+':</td><td></label><input name="fonction'+i+'" type="text" id="fonction'+i+'" /></td></tr>'

+ '<label for="Coordinateadr">Nom :</label><input name="nom'+i+'" maxlength="255" type="text" id="nom'+i+'"/>'

+ '<label for="Coordinateville">Prenom :</label><input name="Prenom'+i+'" maxlength="255" type="text" id="Prenom'+i+'" />'

+ '<label for="Coordinatephoto">date de naissance :</label><input name="datenais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'

+ '<label for="Coordinatephoto">Lieu de naissance :</label><input name="lieunais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'

+ '</div>';
}

jQuery("#nb_coll").ready(monDiv);

}
je ne sais plus comment avancer

A voir également:

Comment afficher mon formulaire en jquery
Afficher mot de passe wifi android - Guide
Formulaire de réclamation facebook - Guide
Le clavier de mon telephone ne s'affiche plus - Guide
Afficher appdata - Guide
Afficher calendrier outlook dans google agenda - Guide

5 réponses

Réponse 1 / 5

alali
10 déc. 2015 à 14:46

voici mon script jquery:

function ajouterBeneficiaire()
{
var nbre = jQuery("#nb_coll").val();
var monDiv = '';

for(var i=1;i<=nbre;i++)
{
monDiv += '<div id="detail_equipe'+i+'" >'

+ '<div id="teamclinique'+i+'" >'

+ '<tr><td><label for="Coordinatefonction">Enfant beneficiare'+i+':</td><td></label><input name="fonction'+i+'" type="text" id="fonction'+i+'" /></td></tr>'

+ '<label for="Coordinateadr">Nom :</label><input name="nom'+i+'" maxlength="255" type="text" id="nom'+i+'"/>'

+ '<label for="Coordinateville">Prenom :</label><input name="Prenom'+i+'" maxlength="255" type="text" id="Prenom'+i+'" />'

+ '<label for="Coordinatephoto">date de naissance :</label><input name="datenais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'

+ '<label for="Coordinatephoto">Lieu de naissance :</label><input name="lieunais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'

+ '</div>';
}
//c'est dans cette partie je n'ai aucune idee comment ca doit fonctionner ,c'est a dire si je clique sur 4,il doit s'afficher
Nom :<input name="nom'+i+'" maxlength="255" type="text" id="nom'+i+'"/>' puisse s'afficher 4 fois
$(monDiv).html()

//alert(nbre);exit;

}

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
10 déc. 2015 à 15:32

Tu y est presque.

Il faut que tu ajoutes un élément dans ton document html à l'intérieur duquel tu pourra insérer le contenu html généré.
Par exemple en ajoutant un simple div avec un identifiant :

<div id="beneficiaires"></div>

Tu peux ensuite insérer dans ce div le contenu html générée dans la variable javascript monDiv comme ceci :

$('#beneficiaires').html(monDiv) ;

Réponse 2 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
10 déc. 2015 à 12:39

Salut,

Puisque qu'il n'y a pas de question, je suppose que tu bloques sur l'affichage du div généré via javascript.

Puisque tu utilises jQuery, tu peux te servir de la méthode html() pour définir le contenu d'un élément de ta page : https://api.jquery.com/html/#html2

Bonne journée

Réponse 3 / 5

alali
10 déc. 2015 à 13:11

malgré le lien que vous m'avez donne j'ai du mal a m’en sortir

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
10 déc. 2015 à 14:18

Peux tu nous montrer ce que tu as essayé et préciser où est-ce que tu bloques ?

Réponse 4 / 5

alali
10 déc. 2015 à 16:10

toujours meme chose rien ne s'affiche

function ajouterBeneficiaire()
{
var nbre = jQuery("#nb_coll").val();
var monDiv = '';

for(var i=1;i<=nbre;i++)
{
monDiv += '<div id="beneficiaires><div id="detail_equipe'+i+'" >'

+ '<div id="teamclinique'+i+'" >'

+ '<tr><td><label for="Coordinatefonction">Enfant beneficiare'+i+':</td><td></label><input name="fonction'+i+'" type="text" id="fonction'+i+'" /></td></tr>'

+ '<label for="Coordinateadr">Nom :</label><input name="nom'+i+'" maxlength="255" type="text" id="nom'+i+'"/>'

+ '<label for="Coordinateville">Prenom :</label><input name="Prenom'+i+'" maxlength="255" type="text" id="Prenom'+i+'" />'

+ '<label for="Coordinatephoto">date de naissance :</label><input name="datenais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'

+ '<label for="Coordinatephoto">Lieu de naissance :</label><input name="lieunais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'

+ '</div></div>';
}

jQuery("#beneficiaires").html(monDiv) ;

//alert(nbre);exit;

}

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
10 déc. 2015 à 17:07

As tu bien ajouté le div id="beneficiaires" dans ton document ?

Ce script fonctionne bien :

<select name='nb_coll' id='nb_coll' style='width:40px;' onChange='ajouterBeneficiaire()'>
    <option value='0'>0</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

<div id="beneficiaires"></div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function ajouterBeneficiaire() {
	console.log('test');
	var nbre = jQuery("#nb_coll").val();
	var monDiv = '';

	for(var i=1;i<=nbre;i++) {
		monDiv += '<div id="detail_equipe'+i+'" >'
			+ '<div id="teamclinique'+i+'" >'
			+ '<tr><td><label for="Coordinatefonction">Enfant beneficiare'+i+':</td><td></label><input name="fonction'+i+'" type="text" id="fonction'+i+'" /></td></tr>'
			+ '<label for="Coordinateadr">Nom :</label><input name="nom'+i+'" maxlength="255" type="text" id="nom'+i+'"/>'
			+ '<label for="Coordinateville">Prenom :</label><input name="Prenom'+i+'" maxlength="255" type="text" id="Prenom'+i+'" />'
			+ '<label for="Coordinatephoto">date de naissance :</label><input name="datenais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'
			+ '<label for="Coordinatephoto">Lieu de naissance :</label><input name="lieunais'+i+'" maxlength="255" type="text" id="datenais'+i+'" />'
			+ '</div>';
	}
	
	jQuery("#beneficiaires").html(monDiv) ; 
}
</script>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

alali
10 déc. 2015 à 17:40

ca marche super bien,merci beaucoup

Discussions similaires

programme qui n'affiche pas le mot secret

Afficher toutes les lignes masquées excel

Contacter le "bon coin"

formulaire de remboursement chez Free

Convertir Formulaire Word en Formulaire PDF ?

Discussions similaires

Newsletters