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
– Sameer K, Commented May 22, 2015 at 8: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
– Bono, Commented May 22, 2015 at 8:06
print your $_POST, and you would get an idea, what is wrong. — kadamb
– kadamb, Commented May 22, 2015 at 8: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
– Seba99, Commented May 22, 2015 at 8:19
@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: stackoverflow.com/a/1010970/1294864 — Bono
– Bono, Commented May 22, 2015 at 8:49

Seba99 · Accepted Answer · 2015-05-22 11:34:19Z

1

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 ;)

answered May 22, 2015 at 11:34

Seba99

1,3391 gold badge17 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EJTH · Accepted Answer · 2015-05-22 13:21:58Z

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, 2015 at 13:21

EJTH

2,2391 gold badge21 silver badges25 bronze badges

1 Comment

Seba99 Over a year ago

Yup that's what @Bono said in the coments but isn't the true problem here, good advice anyway :)

Anusha · Accepted Answer · 2015-05-22 08:51:34Z

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 ?

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related