Comment afficher mon formulaire en jquery

Résolu
alali -  
 alali -
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

5 réponses

  1. alali
     
    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;

    }
    1
    1. Pitet Messages postés 2845 Statut Membre 530
       
      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) ;
      0
  2. Pitet Messages postés 2845 Statut Membre 530
     
    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
    0
  3. alali
     
    malgré le lien que vous m'avez donne j'ai du mal a m’en sortir
    0
    1. Pitet Messages postés 2845 Statut Membre 530
       
      Peux tu nous montrer ce que tu as essayé et préciser où est-ce que tu bloques ?
      0
  4. alali
     
    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;

    }
    0
    1. Pitet Messages postés 2845 Statut Membre 530
       
      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>
      0

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

    Posez votre question
  6. alali
     
    ca marche super bien,merci beaucoup
    0

Discussions similaires

Excel : afficher toutes les lignes et colonnes masquées
livlarsen -
Mehdiiii -

27 réponses
Le nom de mon entreprise s'affiche lors d'un appel
simbalezouf -
Kanay -

4 réponses
remettre toutes les colonnes et les lignes masquées
mousaillon -
oumnas -

4 réponses