Clever Geek Handbook

Dynamically add input to a form (cannot receive values ​​in PHP)

I have a huge form that has a table. I am adding rows of this table with jQuery when user clicks some button and tries to catch all thesis values ​​in PHP

But I cannot get any other values ​​than the first row of the table!

Got

Undefined index: category # 2

when i try to get it $_POST['categorie#2']

HTML looks like this:

<form>
  ...[some working inputs]
<table id="matos" class="table table-responsive synthese">
              <thead>
                <tr>
                  <th>Matériel</th>
                  <th>Fournisseur</th>
                  <th>Numéro de série</th>
                  <th>Catégorie</th>
                  <th>Description</th>
                  <th>Date d'achat</th>
                  <th>Etat</th>
                </tr>
              </thead>
              <tbody>
                <tr class="" id="ligne#1">
                  <td><input type="text" name="materiel#1" id="materiel#1" class="form-control" value=""></td>
                  <td>
                      <select name="fournisseur#1" id="fournisseur#1" class="form-control" value="">
                          <?php
                            $list = listing_fournisseurs();
                            foreach ($list as $key => $value) 
                            {
                              echo '<option value='.$key.'>'.$value.'</option>';
                            }

                            ?>
                      </select>
                  </td>
                  <td><input type="text" name="num_serie#1" id="num_serie#1" class="form-control" value=""></td>
                  <td>
                      <select name="categorie#1" id="categorie#1" class="form-control" value="">
                          <?php

                            $list = listing_categories();
                            foreach ($list as $key => $value) {
                              echo ' <option value='.$key.'>'.$value.'</option>';
                            }
                          ?>
                      </select>
                  </td>
                  <td><input type="text" name="description_materiel#1" id="description_materiel#1" class="form-control" value=""></td>
                  <td><input type="text" name="buy_date#1" id="buy_date#1" class="date form-control" value=""></td>
                  <td>
                    <select name="etat#1" id="etat#1" class="form-control" value="">
                      <?php

                            $list = listing_etats();
                            foreach ($list as $key => $value) {
                              echo ' <option value='.$key.'>'.$value.'</option>';
                            }
                          ?>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>

How do I add a string to jQuery?

var num= parseInt($('#matos tr:last').prop("id").split('#')[1])+1;
$('#matos tr:last').after('<tr id="ligne#'+num+'">'+
                            '<td><input type="text" name="materiel#'+num+'" id="materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="fournisseur#'+num+'" id="fournisseur#'+num+'" class="form-control" value="">'+
                              opt_fournisseurs+
                            '</select></td>'+
                            '<td><input type="text" name="num_serie#'+num+'" id="num_serie#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="categorie#'+num+'" id="categorie#'+num+'" class="form-control" value="">'+
                              opt_categories+
                            '</select></td><td><input type="text" name="description_materiel#'+num+'" id="description_materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><input type="text" name="buy_date#'+num+'" id="buy_date#'+num+'" class="date form-control" value=""></td>'+
                            '<td><select name="etat#1" id="etat#1" class="form-control" value="">'+
                               opt_states+
                            '</select></td></tr>');
$('#nbLignes').val(num);

And well in PHP I am trying:

$_POST['materiel#2'] // doesn't work
$_POST['materiel#1'] // works ! ( because first line ! )

I have read some problems that do not work if they are not in the tr td table ... But in my case they are ... What's wrong?

+3


source to share


4 answers


My bad one is here! I just messed up my DOM structure ... You shouldn't close the div you opened in front of <form>

yours until the end of yours </form>

, so!

Does not work:

<div id="some_div">
  <form>
    [Some inputs...]
</div><!-- /some_div -->
  </form>


Should work:

<div id="some_div">
  <form>
    [Some inputs...]
  </form>
</div><!-- /some_div -->

Seems obvious, but not when you have a very large DOM;)

0


source


You will make your life easier if you use this naming convention <input name="category[]" />

instead<input name="category#1" />

This way you will get the variables in the array at the end of PHP, making it easier to move the ALOT data!



eg:

<?php
foreach($_POST['categories'] as $num => $value){

}
?>
+1


source 


var opt_fournisseurs = '<option value="gg">gg</option><option value="dd">dd</option>';
              var opt_categories = '<option value="ss">ss</option><option value="aa">aa</option>';
              var opt_states = '<option value="ww">ww</option><option value="ee">ee</option>';

              var num= parseInt($('#matos tr:last').prop("id").split('#')[1])+1;

$('#matos tr:last').after('<tr id="ligne#'+num+'">'+
                            '<td><input type="text" name="materiel#'+num+'" id="materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="fournisseur#'+num+'" id="fournisseur#'+num+'" class="form-control" value="">'+
                              opt_fournisseurs+
                            '</select></td>'+
                            '<td><input type="text" name="num_serie#'+num+'" id="num_serie#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="categorie#'+num+'" id="categorie#'+num+'" class="form-control" value="">'+
                              opt_categories+
                            '</select></td><td><input type="text" name="description_materiel#'+num+'" id="description_materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><input type="text" name="buy_date#'+num+'" id="buy_date#'+num+'" class="date form-control" value=""></td>'+
                            '<td><select name="etat#1" id="etat#1" class="form-control" value="">'+
                               opt_states+
                            '</select></td></tr>');
$('#nbLignes').val(num);

      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<?php
  var_dump($_POST);

?>
<form method="post">

<table id="matos" class="table table-responsive synthese">
              <thead>
                <tr>
                  <th>Matériel</th>
                  <th>Fournisseur</th>
                  <th>Numéro de série</th>
                  <th>Catégorie</th>
                  <th>Description</th>
                  <th>Date d'achat</th>
                  <th>Etat</th>
                </tr>
              </thead>
              <tbody>
                <tr class="" id="ligne#1">
                  <td><input type="text" name="materiel#1" id="materiel#1" class="form-control" value=""></td>
                  <td>
                      <select name="fournisseur#1" id="fournisseur#1" class="form-control" value="">
                         <option value="one">one</option>
                         <option value="two">two</option>
                      </select>
                  </td>
                  <td><input type="text" name="num_serie#1" id="num_serie#1" class="form-control" value=""></td>
                  <td>
                      <select name="categorie#1" id="categorie#1" class="form-control" value="">
                          <option value="1">1</option>
                         <option value="2">2</option>
                      </select>
                  </td>
                  <td><input type="text" name="description_materiel#1" id="description_materiel#1" class="form-control" value=""></td>
                  <td><input type="text" name="buy_date#1" id="buy_date#1" class="date form-control" value=""></td>
                  <td>
                    <select name="etat#1" id="etat#1" class="form-control" value="">
                      <option value="1a">1a</option>
                         <option value="2a">2a</option>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>
            <input type="submit" name="txtsubmit" value="submit"/>

This is a sample generated from the code you provided that worked for me.

0


source


Thank you so much Seba99, I have been working on this for about 1 week and after reading your comment I realized that my DOM was not structured correctly, haha, thanks!

0


source






More articles: