Dynamically add inputs in a form ( can't get values in PHP )

Question

I have a huge form which has a table in it. I add lines of this table with jQuery when the user press some button and try to catch all theses values in PHP

But I can't get other values than the first line of the table!

Got

Undefined index: categorie#2

when I'm trying to get it by $_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 I add a line in 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'm trying:

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

I've read some issues that form don't work if they're not into table tr td ... But in my case they are ... What's wrong ?

If you inspect the name of materiel input box added by jquery than what you get ?? — Sameer K, May 22 '15 at 08:06
What happens when you dump (`var_dump()`) the values in `$_POST`? Do you see any other categories or values that aren't in there by default? — Bono, May 22 '15 at 08:06
print your $_POST, and you would get an idea, what is wrong. — kadamb, May 22 '15 at 08:09
Yeah i've got all the '#1' but i got the error `Undefined index: [nameOfInput]#NumberOfLine` for other lines... As if data won't send — Seba99, May 22 '15 at 08:19
Just as a heads-up you can also create arrays in HTML by doing something like this: ``. That might be something you're looking for. — Bono, May 22 '15 at 08:32
I tried your code and found it to be working. Make sure that your form closing tag is outside table closing tag. Also i had added `
` — Anusha, May 22 '15 at 08:34
@Bono what's the advantage of the HTML-array ( i don't find doc at this purpose ... do you have some link ? ^^ ), how then do I find my results ? — Seba99, May 22 '15 at 08:46
@Anusha Well i knew it was some kind of HTML DOM issue :'( ... But I can't figure out which one ! My tag is for sur not in the table and my initial form tag is : `
` ^^' i just simplified a bit — Seba99, May 22 '15 at 08:48
@Seba99 The advantage is that you don't have to keep track of numbers (`categorie#1`, `materiel#2`) etc. It just turns everything with that name in to an array with indices. Take a look at this answer for a clear usage example: http://stackoverflow.com/a/1010970/1294864 — Bono, May 22 '15 at 08:49
Wow looks very effective O.o ... Gonna try this ;) Does it works for ids too ? like `id="things[]"` or is it just for inputs[name] ? — Seba99, May 22 '15 at 09:01
Dam ! >< it worked ... But just for the first line ... Again ! It must be a DOM-structure problem — Seba99, May 22 '15 at 09:30

score 1 · Accepted Answer · answered May 22 '15 at 11:34

My bad here ! I just messed up with my DOM-structure ... You shouldn't close a div, that you oppened before your <form>, before the end of your </form> that's why !

Won't 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 ;)

score 1 · Answer 2 · answered May 22 '15 at 13:21

1

You will make your life ALOT easier, if you use this naming convention <input name="category[]" /> instead of <input name="category#1" />

That way you will get your variables in an array on the PHP end, which makes traversing the data ALOT easier!

eg:

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

}
?>

answered May 22 '15 at 13:21

EJTH

2,178
1
20
25

1

Yup that's what @Bono said in the coments but isn't the true problem here, good advice anyway :) – Seba99 May 22 '15 at 14:24

score 0 · Answer 3 · answered May 22 '15 at 08:51

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 created from the code you have provided, which was working for me.

Well it's work for me too ... x) But my DOM is a little bit more complicated ... I would like to post my whole source but is there a way to get sources AFTER some JS operation ( like new lines in tab ) because with CTRL+U I just get what's before js action ... And through the chrome inspector I get a lot of `::after` or `::after` should I post my DOM anyway ? — Seba99, May 22 '15 at 09:40

Dynamically add inputs in a form ( can't get values in PHP )

3 Answers3