Ajout dynamique champs select

par **orell1** » 11 nov. 2013, 01:52

Hummmmm j'ai oublié une chose...
L'affichage des réquête sql...!

Voici ce que j'ai fait :

<style>
        .mesSelects{
                margin-top:10px;
        }
</style>
<form action="mapage.php">
    <table id="table_entiere" width="100%">
        <tr>
            <td>Ligne de service 1</td>         
            <td>
                <select name="ligne_service_1" id="leschamps_4">
                <option value="<?php echo stripslashes($aff_donnee_opportunite['ligne_service_1']);?>"><?php echo stripslashes($aff_donnee_opportunite['ligne_service_1']);?></option>
                    <option value="Assistance Technique (R&eacute;gie)">Assistance Technique (R&eacute;gie)</option>
                    <option value="Infog&eacute;rance">Infog&eacute;rance</option>
                    <option value="PCS">PCS</option>
                    <option value="H&eacute;bergement">H&eacute;bergement</option>
                    <option value="Int&eacute;gration CPEP">Int&eacute;gration CPEP</option>
                    <option value="Int&eacute;gration Projet R&eacute;seau">Int&eacute;gration Projet R&eacute;seau</option>
                    <option value="Int&eacute;gration Projet Syst&egrave;me">Int&eacute;gration Projet Syst&egrave;me</option>
                    <option value="Assistance MOA">Assistance MOA</option>
                    <option value="N&eacute;goce">N&eacute;goce</option>
                    <option value="Renouvellement Maintenance">Renouvellement Maintenance</option>
                 </select>
            </td>
        </tr>
<?php if($aff_donnee_opportunite['ligne_service_2']) { ?>
<tr>
            <td>Ligne de service 2</td>         
            <td>
                <select name="ligne_service_2" id="leschamps_4">
                <option value="<?php echo stripslashes($aff_donnee_opportunite['ligne_service_2']);?>"><?php echo stripslashes($aff_donnee_opportunite['ligne_service_2']);?></option>
                    <option value="Assistance Technique (R&eacute;gie)">Assistance Technique (R&eacute;gie)</option>
                    <option value="Infog&eacute;rance">Infog&eacute;rance</option>
                    <option value="PCS">PCS</option>
                    <option value="H&eacute;bergement">H&eacute;bergement</option>
                    <option value="Int&eacute;gration CPEP">Int&eacute;gration CPEP</option>
                    <option value="Int&eacute;gration Projet R&eacute;seau">Int&eacute;gration Projet R&eacute;seau</option>
                    <option value="Int&eacute;gration Projet Syst&egrave;me">Int&eacute;gration Projet Syst&egrave;me</option>
                    <option value="Assistance MOA">Assistance MOA</option>
                    <option value="N&eacute;goce">N&eacute;goce</option>
                    <option value="Renouvellement Maintenance">Renouvellement Maintenance</option>
                 </select>
            </td>
        </tr>
<?php } ?>
<?php if($aff_donnee_opportunite['ligne_service_3']) { ?>
<tr>
            <td>Ligne de service 3</td>         
            <td>
                <select name="ligne_service_3" id="leschamps_4">
                <option value="<?php echo stripslashes($aff_donnee_opportunite['ligne_service_3']);?>"><?php echo stripslashes($aff_donnee_opportunite['ligne_service_3']);?></option>
                    <option value="Assistance Technique (R&eacute;gie)">Assistance Technique (R&eacute;gie)</option>
                    <option value="Infog&eacute;rance">Infog&eacute;rance</option>
                    <option value="PCS">PCS</option>
                    <option value="H&eacute;bergement">H&eacute;bergement</option>
                    <option value="Int&eacute;gration CPEP">Int&eacute;gration CPEP</option>
                    <option value="Int&eacute;gration Projet R&eacute;seau">Int&eacute;gration Projet R&eacute;seau</option>
                    <option value="Int&eacute;gration Projet Syst&egrave;me">Int&eacute;gration Projet Syst&egrave;me</option>
                    <option value="Assistance MOA">Assistance MOA</option>
                    <option value="N&eacute;goce">N&eacute;goce</option>
                    <option value="Renouvellement Maintenance">Renouvellement Maintenance</option>
                 </select>
            </td>
        </tr>
<?php } ?>
<?php if($aff_donnee_opportunite['ligne_service_4']) { ?>
<tr>
            <td>Ligne de service 4</td>         
            <td>
                <select name="ligne_service_4" id="leschamps_4">
                <option value="<?php echo stripslashes($aff_donnee_opportunite['ligne_service_4']);?>"><?php echo stripslashes($aff_donnee_opportunite['ligne_service_2']);?></option>
                    <option value="Assistance Technique (R&eacute;gie)">Assistance Technique (R&eacute;gie)</option>
                    <option value="Infog&eacute;rance">Infog&eacute;rance</option>
                    <option value="PCS">PCS</option>
                    <option value="H&eacute;bergement">H&eacute;bergement</option>
                    <option value="Int&eacute;gration CPEP">Int&eacute;gration CPEP</option>
                    <option value="Int&eacute;gration Projet R&eacute;seau">Int&eacute;gration Projet R&eacute;seau</option>
                    <option value="Int&eacute;gration Projet Syst&egrave;me">Int&eacute;gration Projet Syst&egrave;me</option>
                    <option value="Assistance MOA">Assistance MOA</option>
                    <option value="N&eacute;goce">N&eacute;goce</option>
                    <option value="Renouvellement Maintenance">Renouvellement Maintenance</option>
                 </select>
            </td>
        </tr>
<?php } ?>  
<?php if($aff_donnee_opportunite['ligne_service_5']) { ?>
<tr>
            <td>Ligne de service 5</td>         
            <td>
                <select name="ligne_service_5" id="leschamps_4">
                <option value="<?php echo stripslashes($aff_donnee_opportunite['ligne_service_5']);?>"><?php echo stripslashes($aff_donnee_opportunite['ligne_service_5']);?></option>
                    <option value="Assistance Technique (R&eacute;gie)">Assistance Technique (R&eacute;gie)</option>
                    <option value="Infog&eacute;rance">Infog&eacute;rance</option>
                    <option value="PCS">PCS</option>
                    <option value="H&eacute;bergement">H&eacute;bergement</option>
                    <option value="Int&eacute;gration CPEP">Int&eacute;gration CPEP</option>
                    <option value="Int&eacute;gration Projet R&eacute;seau">Int&eacute;gration Projet R&eacute;seau</option>
                    <option value="Int&eacute;gration Projet Syst&egrave;me">Int&eacute;gration Projet Syst&egrave;me</option>
                    <option value="Assistance MOA">Assistance MOA</option>
                    <option value="N&eacute;goce">N&eacute;goce</option>
                    <option value="Renouvellement Maintenance">Renouvellement Maintenance</option>
                 </select>
            </td>
        </tr>
<?php } ?> 
    </table>
<div id="BoutonAddSelect">
       <!--Le bouton d'appel au javascript -->
       <button onclick ="addSelect(); return false;" > Ajouter une Liste</button>
    </div>
</form>
<script>
        NbreDiapos = 1;
        function addSelect(){
                NbreDiapos = NbreDiapos + 1;
            var selectACopier = $('#leschamps_4').html();
            $('#table_entiere').append('<tr><td>Ligne de service '+NbreDiapos+'</td><td><select name="ligne_service_'+NbreDiapos+'" id="leschamps_4">'+selectACopier+'</td></tr>');
            if(NbreDiapos == 5){
               $('#BoutonAddSelect').hide();
            }
        }
</script>

J'ai quelques soucis avec le bouton qui s'affiche lorsque les 5 requêtes ont été affiché (5 enregistrement contenu dans la base sql).
Je ne suis pas tout à fait sûr qu'il faille afficher les requêtes comme ça?

Qu'en penses tu?

Merci

par **orell1** » 11 nov. 2013, 00:50

C'est vrai je ne suis pas un AS! lool
merci pour le code! il fonctionne très bien !

Du coup je l'ai inséré comme ça :

<tr>
    <td colspan="4"><?php include_once("ligne_service.php"); ?></td>
  </tr>

Merci encore 1000 fois!
Excellente soirée!

par **franckm** » 11 nov. 2013, 00:00

Alors bon, plusieurs choses, tu ne sembles pas vraiment maîtriser déjà le HTML. Evites certaines choses comme par exemple mettre un style au milieu d'un tableau <table></table>
Idem pour le javascript, sort le au moins de ton tableau.

Ci-dessous, le code comme je l'organiserais pour tes listes:

<form action="mapage.php">
    <table id="table_entiere">
        <tr>
            <td>Ligne de service 1</td>
            <td>
                <select name="ligne_service_1" id="leschamps_4">
                    <option value="Madame">Assistance Technique (R&eacute;gie)</option>
                    <option value="Monsieur">Infog&eacute;rance</option>
                    <option value="Monsieur">PCS</option>
                    <option value="Monsieur">H&eacute;bergement</option>
                    <option value="Monsieur">Int&eacute;gration CPEP</option>
                    <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
                    <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
                    <option value="Monsieur">Assistance MOA</option>
                    <option value="Monsieur">Négoce</option>
                    <option value="Monsieur">Renouvellement Maintenance</option>
                 </select>
            </td>
        </tr>
    </table>
    <div id="BoutonAddSelect">
       <!--Le bouton d'appel au javascript -->
       <button onclick ="addSelect(); return false;" > Ajouter une Liste</button>
    </div>
</form>
<script>
        NbreDiapos = 1;
        function addSelect(){
           	NbreDiapos = NbreDiapos + 1;
            var selectACopier = $('#leschamps_4').html();
            $('#table_entiere').append('<tr><td>Ligne de service '+NbreDiapos+'</td><td><select name="ligne_service_'+NbreDiapos+'" id="leschamps_4">'+selectACopier+'</td></tr>');
            if(NbreDiapos == 5){
               $('#BoutonAddSelect').hide();
            }
        }
</script>

par **orell1** » 10 nov. 2013, 23:31

Voici mon code final :

  <tr>
    <td>Ligne de service 1</td>
    <td>

<style>
        .mesSelects{
                margin-top:10px;
        }
</style>

<!--La DIV principale où on va ajouter les select -->
<div id="div_entiere">
   
    <!--Le select qu'on veut copier à chaque fois -->
    <div id="select_1" class="mesSelects">
        <select name="ligne_service_1" id="leschamps_4">
               <option value="Madame">Assistance Technique (R&eacute;gie)</option>
               <option value="Monsieur">Infog&eacute;rance</option>
               <option value="Monsieur">PCS</option>
               <option value="Monsieur">H&eacute;bergement</option>
               <option value="Monsieur">Int&eacute;gration CPEP</option>
               <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
               <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
               <option value="Monsieur">Assistance MOA</option>
               <option value="Monsieur">Négoce</option>
               <option value="Monsieur">Renouvellement Maintenance</option>
        </select>
        </div>
   
</div>

<!--Le bouton d'appel au javascript -->
<br />


<script>
        NbreDiapos = 1;
        function addSelect(){
                NbreDiapos = NbreDiapos + 1;
                var selectACopier = $('#select_1').html();
                $('#div_entiere').append('<div id="select_'+NbreDiapos+'" class="mesSelects">'+selectACopier+'</div>');
                if(NbreDiapos == 5){
                        $('#BoutonAddSelect').hide();
                }
        }
</script></td>
    <td><div id="BoutonAddSelect">
        <button onclick ="addSelect(); return false;" > Ajouter une ligne de service</button>
</div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

Dernière petites questions...

peut-on faire en sorte que lorsque l'on ajoute une ligne le : <td>Ligne de service 1</td> évolue aussi ?
ce qui donne :
<td>Ligne de service 1</td>
<td>Ligne de service 2</td>
<td>Ligne de service 3</td>
<td>Ligne de service 4</td>
<td>Ligne de service 5</td>

idem pour le name : <select name="ligne_service_1" id="leschamps_4"> (pour que la base de données soit bien renseignée)

ce qui donne :
<select name="ligne_service_1" id="leschamps_4">
<select name="ligne_service_2" id="leschamps_4">
<select name="ligne_service_3" id="leschamps_4">
<select name="ligne_service_4" id="leschamps_4">
<select name="ligne_service_5" id="leschamps_4">

Merci beaucoup

par **orell1** » 10 nov. 2013, 23:12

Ah non c'est ok!
il y avait une coquille...

<button onclick ="addSelect(); return false;" > Ajouter une Liste</button>

J'ai retiré le quote en trop à côté de false...

Merci beaucoup pour votre aide!

par **orell1** » 10 nov. 2013, 23:01

Merci, malheureusement ça fait pareil

par **franckm** » 10 nov. 2013, 21:50

Comme ça:

<button onclick ="addSelect(); return false';" > Ajouter une Liste</button>

par **orell1** » 10 nov. 2013, 21:23

Merci !

J'ai juste à ajouter return false; ?
Je le mets ou?

Merci beaucoup!

par **xTG** » 10 nov. 2013, 21:17

Il faut que ta fonction renvoie false pour éviter cela.

par **orell1** » 10 nov. 2013, 21:13

Ok top! au bout de 5 le bouton s'en va! Magnifique!
Par contre j'ai toujours ce petit problème le <form>

Lorsque je clique sur : Ajouter une Liste
il l'actionne le bouton submit...

Merci par avance.

par **franckm** » 10 nov. 2013, 21:09

POur le bouton caché, prends ce code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Document sans nom</title>
</head>

<style>
	.mesSelects{
		margin-top:10px;
	}
</style>

<body>

<!--La DIV principale où on va ajouter les select -->
<div id="div_entiere">
   
    <!--Le select qu'on veut copier à chaque fois -->
    <div id="select_1" class="mesSelects">
        <select name="ligne_service_1" id="leschamps_4">
               <option value="Madame">Assistance Technique (R&eacute;gie)</option>
               <option value="Monsieur">Infog&eacute;rance</option>
               <option value="Monsieur">PCS</option>
               <option value="Monsieur">H&eacute;bergement</option>
               <option value="Monsieur">Int&eacute;gration CPEP</option>
               <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
               <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
               <option value="Monsieur">Assistance MOA</option>
               <option value="Monsieur">Négoce</option>
               <option value="Monsieur">Renouvellement Maintenance</option>
        </select>
	</div>
    
</div>

<!--Le bouton d'appel au javascript -->
<br />
<div id="BoutonAddSelect">
	<button onclick ="addSelect()" > Ajouter une Liste</button>
</div>

<script>
	NbreDiapos = 1;
	function addSelect(){
		NbreDiapos = NbreDiapos + 1;
		var selectACopier = $('#select_1').html();
		$('#div_entiere').append('<div id="select_'+NbreDiapos+'" class="mesSelects">'+selectACopier+'</div>');
		if(NbreDiapos == 5){
			$('#BoutonAddSelect').hide();
		}
	}
</script>

</body>
</html>

Pour ton problème de form, envoies moi le code complet avec le formulaire inclus (pas le PHP uniquement le HTML)

par **orell1** » 10 nov. 2013, 20:39

Ah j'ai un petit problème, lorsque j’intègre le script dans mon <form> il lance le submit...

peut-on faire quelque chose ?

par **orell1** » 10 nov. 2013, 19:58

Désolé, effectivement je me suis mal exprimé!
c'est exactement ç! Merci et BRAVO!

Par contre sais-tu comment brider le nombre de <select> à créer ?
Par exemple on ne peut créer que 5 select et dès que le nombre est atteint, le bouton disparait...

Merci encore 1000 fois!

par **franckm** » 10 nov. 2013, 19:50

Quand on pose une question sur un forum, on essaie déjà de la poser correctement, ça évite de perdre du temps pour rien. Ton premier post:

je souhaiterai ajouter dynamiquement des champs <option> (liste déroulante) en cliquant sur un lien..

Pour moi ,ta question, c'est ajouter des champs option, pas un select... Bref, voici un code qui fonctionne comme tu veux:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Document sans nom</title>
</head>

<style>
	.mesSelects{
		margin-top:10px;
	}
</style>

<body>

<!--La DIV principale où on va ajouter les select -->
<div id="div_entiere">
   
    <!--Le select qu'on veut copier à chaque fois -->
    <div id="select_1" class="mesSelects">
        <select name="ligne_service_1" id="leschamps_4">
               <option value="Madame">Assistance Technique (R&eacute;gie)</option>
               <option value="Monsieur">Infog&eacute;rance</option>
               <option value="Monsieur">PCS</option>
               <option value="Monsieur">H&eacute;bergement</option>
               <option value="Monsieur">Int&eacute;gration CPEP</option>
               <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
               <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
               <option value="Monsieur">Assistance MOA</option>
               <option value="Monsieur">Négoce</option>
               <option value="Monsieur">Renouvellement Maintenance</option>
        </select>
	</div>
    
</div>

<!--Le bouton d'appel au javascript -->
<br /><button onclick ="addSelect()"> Ajouter une Liste</button>

<script>
	NbreDiapos = 1;
	function addSelect(){
		NbreDiapos = NbreDiapos + 1;
		var selectACopier = $('#select_1').html();
		$('#div_entiere').append('<div id="select_'+NbreDiapos+'" class="mesSelects">'+selectACopier+'</div>');
	}
</script>

</body>
</html>

par **orell1** » 10 nov. 2013, 19:32

oui oui exact...
Moi ce que je voulais faire c'est lorsque je clique sur le bouton, cela ajoute un select entier...
Exemple:

Je clique sur le bouton :

<br /><button onclick ="addOption()"> Ajouter un champ</button>

Cela créé:

<select name="ligne_service_1" id="leschamps_4">
       <option value="Madame">Assistance Technique (R&eacute;gie)</option>
       <option value="Monsieur">Infog&eacute;rance</option>
       <option value="Monsieur">PCS</option>
       <option value="Monsieur">H&eacute;bergement</option>
       <option value="Monsieur">Int&eacute;gration CPEP</option>
       <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
       <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
       <option value="Monsieur">Assistance MOA</option>
       <option value="Monsieur">Négoce</option>
       <option value="Monsieur">Renouvellement Maintenance</option>
</select>

je clique une nouvelle fois sur :

<br /><button onclick ="addOption()"> Ajouter un champ</button>

cela créé:

<select name="ligne_service_1" id="leschamps_4">
       <option value="Madame">Assistance Technique (R&eacute;gie)</option>
       <option value="Monsieur">Infog&eacute;rance</option>
       <option value="Monsieur">PCS</option>
       <option value="Monsieur">H&eacute;bergement</option>
       <option value="Monsieur">Int&eacute;gration CPEP</option>
       <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
       <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
       <option value="Monsieur">Assistance MOA</option>
       <option value="Monsieur">Négoce</option>
       <option value="Monsieur">Renouvellement Maintenance</option>
</select>

Et ainsi de suite, jusqu'à 5 ajouts maximum (mais peut être paramétrable)...

tu vois le truc ?
On ajoute pas que <option> mais <select>+<option>

Merci.

Ajout dynamique champs select

Répondre

Étendre la vue Revue du sujet : Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select

Re: Ajout dynamique champs select