Ajout dynamique de champ de formulaire

romses
Javascript

Salut après avoir fait des recherches, j'ai pu réalisé un formulaire d'ajout dynamique de champ en jquery et CAKEPHP 2.6,
mon sous maintenant est de pouvoir suprimé le champ ajouter ce que je ne trouva pas voici mon code js

$(function()

{
   var intid = 1;
  $('.btnaddjour').on('click', function()

  {

    var fname = $("<table class=\"panel\" id=\"tableadd" + intid + ">");
    var fieldwraper = $("<tr class=\"blocadd\"><td><div class=\"line-input \"><div class=\"input select\"><label for=\"AttributionfiliereJourscours\">Jour de cours "+ intid +" </label><select name=\"data[Attributionfiliere][jourscours]\" class=\"form-control resultatrecherche\" id=\"AttributionfiliereJourscours\"><option value=\"Lundi\">Lundi</option><option value=\"Mardi\">Mardi</option><option value=\"Mercredi\">Mercredi</option><option value=\"Jeudi\">Jeudi</option><option value=\"Vendredi\">Vendredi</option></select></div></div></td><td><div class=\"line-input\"><div class=\"input time\"><label for=\"AttributionfiliereHeureDebutHour\"> &nbsp;&nbsp;Heure début</label><select name=\"data[Attributionfiliere][heure_debut][hour]\" class=\"form-control\" id=\"AttributionfiliereHeureDebutHour\"> <option value=\"00\">0</option><option value=\"01\">1</option><option value=\"02\">2</option><option value=\"03\">3</option><option value=\"04\">4</option><option value=\"05\">5</option><option value=\"06\">6</option><option value=\"07\">7</option><option value=\"08\">8</option><option value=\"09\">9</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option> </select>:<select name=\"data[Attributionfiliere][heure_debut][min]\" class=\"form-control\" id=\"AttributionfiliereHeureDebutMin\"><option value=\"00\">00</option><option value=\"01\">01</option><option value=\"02\">02</option><option value=\"03\">03</option><option value=\"04\">04</option><option value=\"05\">05</option><option value=\"06\">06</option><option value=\"07\">07</option><option value=\"08\">08</option><option value=\"09\">09</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option><option value=\"24\">24</option><option value=\"25\">25</option><option value=\"26\">26</option><option value=\"27\">27</option><option value=\"28\">28</option><option value=\"29\">29</option><option value=\"30\">30</option><option value=\"31\">31</option><option value=\"32\">32</option><option value=\"33\">33</option><option value=\"34\">34</option><option value=\"35\">35</option><option value=\"36\">36</option><option value=\"37\">37</option><option value=\"38\">38</option><option value=\"39\">39</option><option value=\"40\">40</option><option value=\"41\">41</option><option value=\"42\">42</option><option value=\"43\">43</option><option value=\"44\">44</option><option value=\"45\">45</option><option value=\"46\">46</option><option value=\"47\">47</option><option value=\"48\">48</option><option value=\"49\">49</option><option value=\"50\">50</option><option value=\"51\">51</option><option value=\"52\">52</option><option value=\"53\">53</option><option value=\"54\">54</option><option value=\"55\">55</option><option value=\"56\">56</option><option value=\"57\">57</option><option value=\"58\">58</option><option value=\"59\">59</option></select></div></div></td><td><div class=\"line-input\"><div class=\"input time\"><label for=\"AttributionfiliereHeureFinaleHour\"> &nbsp; Heure de fin</label><select name=\"data[Attributionfiliere][heure_finale][hour]\" class=\"form-control\" id=\"AttributionfiliereHeureFinaleHour\"> <option value=\"00\">0</option><option value=\"01\">1</option><option value=\"02\">2</option><option value=\"03\">3</option><option value=\"04\">4</option><option value=\"05\">5</option><option value=\"06\">6</option><option value=\"07\">7</option><option value=\"08\">8</option><option value=\"09\">9</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option></select>:<select name=\"data[Attributionfiliere][heure_finale][min]\" class=\"form-control\" id=\"AttributionfiliereHeureFinaleMin\"><option value=\"00\">00</option><option value=\"01\">01</option><option value=\"02\">02</option><option value=\"03\">03</option><option value=\"04\">04</option<option value=\"05\">05</option><option value=\"06\">06</option><option value=\"07\">07</option><option value=\"08\">08</option><option value=\"09\">09</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option><option value=\"24\">24</option><option value=\"25\">25</option><option value=\"26\">26</option><option value=\"27\">27</option><option value=\"28\">28</option><option value=\"29\">29</option><option value=\"30\">30</option> <option value=\"31\">31</option><option value=\"32\">32</option><option value=\"33\">33</option><option value=\"34\">34</option><option value=\"35\">35</option><option value=\"36\">36</option<option value=\"37\">37</option><option value=\"38\">38</option><option value=\"39\">39</option><option value=\"40\">40</option><option value=\"41\">41</option><option value=\"42\">42</option><option value=\"43\">43</option><option value=\"44\">44</option><option value=\"45\">45</option><option value=\"46\">46</option><option value=\"47\">47</option><option value=\"48\">48</option><option value=\"49\">49</option><option value=\"50\">50</option><option value=\"51\">51</option><option value=\"52\">52</option><option value=\"53\">53</option><option value=\"54\">54</option><option value=\"55\">55</option><option value=\"56\">56</option><option value=\"57\">57</option><option value=\"58\">58</option><option value=\"59\">59</option></select></div> </div></td>  <td>&nbsp;<button type=\"button\" class=\"btn-xs btn-danger btn-remove" + intid + " glyphicon glyphicon-remove\"></button></td></tr>");
    fieldwraper.append(fname).fadeIn('slow');
    $('.tablezone-add').after(fieldwraper);
     intid = intid + 1;

  }
    );
       $(".btn-remove" + intid).click(function() {
        //var intid = $('.tablezone-add div').length;
       alert('ok');
        $('.panel'+ intid).fadeOut('slow').remove();
        $('.panel').append(fieldwraper);
    });

}

  );

je n'arrive pas à récupérer l'objet du click de suppression

4 réponses

romses
Auteur
Réponse acceptée

salut à tous et merci pour vos réponses.
j'ai trouver la solution à mon problème et cela fonctionne correctement voici ce que j'ai fait ```
$(document).ready(function() {
var max_fields = 7; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

var x = 0; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><table><tr class=\"blocadd\"><td><div class=\"line-input \"><div class=\"input select\"><label for=\"AttributionfiliereJourscours\">Jour '+ x +' </label><select name=\"data[Joursdecour]['+ x +'][jourscours]\" class=\"form-control\" id=\"AttributionfiliereJourscours\"><option value=\"Lundi\">Lundi</option><option value=\"Mardi\">Mardi</option><option value=\"Mercredi\">Mercredi</option><option value=\"Jeudi\">Jeudi</option><option value=\"Vendredi\">Vendredi</option></select></div></div></td><td><div class=\"line-input\"><div class=\"input time\"><label for=\"AttributionfiliereHeureDebutHour\"> &nbsp;&nbsp;Heure début</label><select name=\"data[Joursdecour]['+ x +'][heure_debut][hour]\" class=\"form-control\" id=\"AttributionfiliereHeureDebutHour\"> <option value=\"00\">0</option><option value=\"01\">1</option><option value=\"02\">2</option><option value=\"03\">3</option><option value=\"04\">4</option><option value=\"05\">5</option><option value=\"06\">6</option><option value=\"07\">7</option><option value=\"08\">8</option><option value=\"09\">9</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option> </select>:<select name=\"data[Joursdecour]['+ x +'][heure_debut][min]\" class=\"form-control\" id=\"AttributionfiliereHeureDebutMin\"><option value=\"00\">00</option><option value=\"01\">01</option><option value=\"02\">02</option><option value=\"03\">03</option><option value=\"04\">04</option><option value=\"05\">05</option><option value=\"06\">06</option><option value=\"07\">07</option><option value=\"08\">08</option><option value=\"09\">09</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option><option value=\"24\">24</option><option value=\"25\">25</option><option value=\"26\">26</option><option value=\"27\">27</option><option value=\"28\">28</option><option value=\"29\">29</option><option value=\"30\">30</option><option value=\"31\">31</option><option value=\"32\">32</option><option value=\"33\">33</option><option value=\"34\">34</option><option value=\"35\">35</option><option value=\"36\">36</option><option value=\"37\">37</option><option value=\"38\">38</option><option value=\"39\">39</option><option value=\"40\">40</option><option value=\"41\">41</option><option value=\"42\">42</option><option value=\"43\">43</option><option value=\"44\">44</option><option value=\"45\">45</option><option value=\"46\">46</option><option value=\"47\">47</option><option value=\"48\">48</option><option value=\"49\">49</option><option value=\"50\">50</option><option value=\"51\">51</option><option value=\"52\">52</option><option value=\"53\">53</option><option value=\"54\">54</option><option value=\"55\">55</option><option value=\"56\">56</option><option value=\"57\">57</option><option value=\"58\">58</option><option value=\"59\">59</option></select></div></div></td><td><div class=\"line-input\"><div class=\"input time\"><label for=\"AttributionfiliereHeureFinaleHour\"> &nbsp; Heure de fin</label><select name=\"data[Joursdecour]['+ x +'][heure_finale][hour]\" class=\"form-control\" id=\"AttributionfiliereHeureFinaleHour\"> <option value=\"00\">0</option><option value=\"01\">1</option><option value=\"02\">2</option><option value=\"03\">3</option><option value=\"04\">4</option><option value=\"05\">5</option><option value=\"06\">6</option><option value=\"07\">7</option><option value=\"08\">8</option><option value=\"09\">9</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option></select>:<select name=\"data[Joursdecour]['+ x +'][heure_finale][min]\" class=\"form-control\" id=\"AttributionfiliereHeureFinaleMin\"><option value=\"00\">00</option><option value=\"01\">01</option><option value=\"02\">02</option><option value=\"03\">03</option><option value=\"04\">04</option><option value=\"05\">05</option><option value=\"06\">06</option><option value=\"07\">07</option><option value=\"08\">08</option><option value=\"09\">09</option><option value=\"10\">10</option><option value=\"11\">11</option><option value=\"12\">12</option><option value=\"13\">13</option><option value=\"14\">14</option><option value=\"15\">15</option><option value=\"16\">16</option><option value=\"17\">17</option><option value=\"18\">18</option><option value=\"19\">19</option><option value=\"20\">20</option><option value=\"21\">21</option><option value=\"22\">22</option><option value=\"23\">23</option><option value=\"24\">24</option><option value=\"25\">25</option><option value=\"26\">26</option><option value=\"27\">27</option><option value=\"28\">28</option><option value=\"29\">29</option><option value=\"30\">30</option> <option value=\"31\">31</option><option value=\"32\">32</option><option value=\"33\">33</option><option value=\"34\">34</option><option value=\"35\">35</option><option value=\"36\">36</option><option value=\"37\">37</option><option value=\"38\">38</option><option value=\"39\">39</option><option value=\"40\">40</option><option value=\"41\">41</option><option value=\"42\">42</option><option value=\"43\">43</option><option value=\"44\">44</option><option value=\"45\">45</option><option value=\"46\">46</option><option value=\"47\">47</option><option value=\"48\">48</option><option value=\"49\">49</option><option value=\"50\">50</option><option value=\"51\">51</option><option value=\"52\">52</option><option value=\"53\">53</option><option value=\"54\">54</option><option value=\"55\">55</option><option value=\"56\">56</option><option value=\"57\">57</option><option value=\"58\">58</option><option value=\"59\">59</option></select></div> </div></td></tr></table><a href="#"  class=\" btn btn-danger glyphicon glyphicon-remove remove_field\"></a></div>'); //add input box
    }
});

$(wrapper).on("click",'.remove_field', function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

});


si ça peut aider une autre personne. Par contre j'ai aussi un autre soucis, lorsque je crèe les champs cela se passe bien mais une fois la page actualisé ou un click sur une action les champs disparaisse. or moi j'aimerai que lorsqu'un utilisateur soumet le formulaire que je vérifie si les données sont valides dans le cas contraire j'affiche tous les champs erroné.
quelqu'un a une idée de l'action à effectué?
betaWeb

Salut,

Essayes (de faire moins de fautes d'orthographe ça pique les yeux) ceci:

$(".btn-remove" + intid).on('click', function() {
        //var intid = $('.tablezone-add div').length;
       alert('ok');
        $('.panel'+ intid).fadeOut('slow').remove();
        $('.panel').append(fieldwraper);
});
romses
Auteur

Merci pour ton aide mais jusque la çela ne fonctionne pas rien ne se passe

betaWeb

J'ai une remarque à faire: à un moment tu fais intid = intid + 1; (qui pourrait s'écrire intid++;). Or tu ne te trouve pas dans une boucle. Alors comment penses-tu pouvoir incrémenter cette valeur ? Par magie ? ^^