dynamic form fields with javascript, php & mysql: strange error

269
November 22, 2016, at 11:21 AM

I get an really strange error with my dynamic form field script. It is not so easy to explain, but I will do my best.

I have a HTML form with java script to add

  • 1 select field
  • 2 text-fields &
  • 9 checkboxes

dynamically by clicking a link.

Every dynamic form-set create a own entry in my mysql db.

The one select field and the two text-fields are insert correctly the data into my db.

But with the 9 checkboxes, there is a mistake.

For Example: IF I create two form-sets AND i will check the each 1st check-boxes, the database entry is correctly

BUT

IF I create two form-sets AND i will check at the first form-set Checkbox 1 and on the second form-set Checkbox 2, my db-entry write the 1st and the 2nd checkbox-entry in the first (!!!) db-entry. There is no entry for the 2nd Checkbox in the second db-entry.

Maybe my screenshot will it make more understandable.

Here is my script. I really hope anybody can help me. Iam looking so long for a solution, but...

<?php
include('dbconnection.php');
?>
<!DOCTYPE HTML>
<head>
<script type="text/javascript" src="theme/scripts/jquery.js"></script>
<script type="text/javascript" src="theme/scripts/jqueryui.js"></script>

<script type="text/javascript">
var counter = 0;
$(function(){
 $('p#add_field').click(function(){
 counter += 1;
 $('#container').append(
   '<strong>Artikel ' + counter + '</strong><br />'
 + '<select name="artikel[]' + '">'
 + '<option value="test1">' + 'test1' + '</option>'
 + '<option value="test2">' + 'test2' + '</option>'
 + '</select><br /><br />'
 + '<b>Beschreibung oder Anzahl:</b><br>'
 + '<input name="beschreibung[]' + '" type="text" class="login-username" /><br />'
 + '<b>Preis in €:</b><br>'
 + '<input id="preis_' + counter + '" name="preis[]' + '" type="text" class="login-username" /><br />'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Aus-/Einbau<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value="Aus und Einbauarbeiten<br>" id="1a_' + counter + '" name="ausein[]' + '" />'
 + '<label for="1a_' + counter + '"></label>'
 + '</div>'
 + '</span>'

 + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Instandsetzung<br>'
 + '<div class="roundedTwo">'
 + '<input type="checkbox" value="Teil instand gesetzt<br>" id="2b_' + counter + '" name="instand[]' + '" />'
 + '<label for="2b_' + counter + '"></label>'
 + '</div>'
 + '</span>'

 + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Teillack<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value="Teillackierung<br>" id="3c_' + counter + '" name="rep[]' + '" />'
 + '<label for="3c_' + counter + '"></label>'
 + '</div>'
 + '</span>'

 + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Farbangleich<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value="Farbtonangleichung<br>" id="4d_' + counter + '" name="farb[]' + '" />'
 + '<label for="4d_' + counter + '"></label>'
 + '</div>'
 + '</span>'

// + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Neuteil<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value="Neuteil wurde verbaut<br>" id="5e_' + counter + '" name="neu[]' + '" />'
 + '<label for="5e_' + counter + '"></label>'
 + '</div>'
 + '</span>'

 + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Beilack.<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value="Beilackierung<br>" id="6f_' + counter + '" name="spot[]' + '" />'
 + '<label for="6f_' + counter + '"></label>'
 + '</div>'
 + '</span>'

 + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Finisch<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value="Finischarbeit<br>" id="7g_' + counter + '" name="finisch[]' + '" />'
 + '<label for="7g_' + counter + '"></label>'
 + '</div>'
 + '</span>'

 + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Delle Rep.<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value=" Dellen instand gesetzt<br>" id="8h_' + counter + '" name="delle[]' + '" />'
 + '<label for="8h_' + counter + '"></label>'
 + '</div>'
 + '</span>'

// + '<div style="float: left; width: 20px;">&nbsp;</div>'
 + '<span style="float: left; width: 70px; text-align: center;">'
 + 'Lederrep.<br>'
 + '<div class="roundedTwo">'   
 + '<input type="checkbox" value="Lederreparatur<br>" id="9i_' + counter + '" name="leder[]' + '" />'
 + '<label for="9i_' + counter + '"></label>'
 + '</div>'
 + '</span>'
 + '<div class="decoration"></div>'
 + '<input id="renr_' + counter + '" name="renr[]' + '" type="hidden" value="' + '<?php echo $renr ?>' + '" />'
 + '<input id="datum_' + counter + '" name="datum[]' + '" type="hidden" value="' + '<?php echo $datum ?>' + '" />'
 + '<input id="jahr_' + counter + '" name="jahr[]' + '" type="hidden" value="' + '<?php echo $jahr ?>' + '" />'
 + '<input id="id1_' + counter + '" name="id1[]' + '" type="hidden" value="' + '<?php echo $id1 ?>' + '" />'
     );
   });
 });
</script>
</head>
<body>
<?php
$id = $_GET['id'];
if (isset($_POST['submit_val'])) {
    if ($_POST['artikel']) {
    $post_count = count($_POST['artikel']);
        for ($i=0;$i<$post_count;$i++) {
            $values1 = mysql_real_escape_string($_POST['artikel'][$i]);
            $values2 = mysql_real_escape_string($_POST['preis'][$i]);
            $values3 = mysql_real_escape_string($_POST['beschreibung'][$i]);
            $values4 = mysql_real_escape_string($_POST['ausein'][$i]);
            $values5 = mysql_real_escape_string($_POST['instand'][$i]);
            $values6 = mysql_real_escape_string($_POST['rep'][$i]);
            $values7 = mysql_real_escape_string($_POST['farb'][$i]);
            $values8 = mysql_real_escape_string($_POST['neu'][$i]);
            $values9 = mysql_real_escape_string($_POST['spot'][$i]);
            $values10 = mysql_real_escape_string($_POST['finisch'][$i]);
            $values14 = mysql_real_escape_string($_POST['delle'][$i]);
            $values15 = mysql_real_escape_string($_POST['leder'][$i]);
            $values11 = mysql_real_escape_string($_POST['datum'][$i]);
            $values12 = mysql_real_escape_string($_POST['jahr'][$i]);
            $values13 = mysql_real_escape_string($_POST['renr'][$i]);
            $values16 = mysql_real_escape_string($_POST['id1'][$i]);
            $query = mysql_query("INSERT INTO rechnung (artikel,preis,beschreibung,ausein,instand,rep,farb,neu,spot,finisch,delle,leder,datum,jahr,renr,kd) VALUES ('$values1', '$values2', '$values3', '$values4', '$values5', '$values6', '$values7', '$values8', '$values9', '$values10', '$values14', '$values15', '$values11', '$values12', '$values13', '$values16')", $conid );  
        }
    }
    echo "<h3><strong>" . count($_POST['artikel']) . "</strong> Artikel hinzugefügt</h3>";
    //mysql_close();
}
?>
<?php if (!isset($_POST['submit_val'])) { ?>
 <form method="post" action="?id=<?php echo $id; ?>">
 <div id="container">
 <div id="neu"><p id="add_field"><a href="#"><img src="plus.png" width="30px"><b>Artikel hinzufügen</b></a></p></div>
 <div class='decoration'></div>
 </div>
 <input type="submit" name="submit_val" value="Weiter zu Fahrzeugdaten" class="button button-blue"/>
 </form>                
<?php } ?>
</body>
Answer 1

The problem is caused by the name of the checkboxes.

You use the same logic for assigning names to all your form controls regardless of tgeir type: controlname[]. Yes, as a result of [] at the end php will interpret these parameters as arrays. So far, so good.

However, in html if a checkbox is not checked, then it is not a successful control, hence it will not be submitted to the server.

If the 2nd checkbox is not checked in the 1st record, then the empty vslue will not be sent to the server. If subsequently the 2nd checkbox is checked in the 2nd record, then it will be the 1st value in the order of the 2nd checkboxes in the submitted values.

It's a lot easier to picture this if you use print_r to print the $_POST in your php code.

The solution is to include an index in the name of the checkboxes to indicate which record they belong to. So instead of using ausein[] as name, use ausein[0], ausein[1], etc as name.

Answer 2

The Solution from @Shadow was helpful. But i have to set the default count from

var counter = 0;

to

var counter = -1;

This solve my problem.

Rent Charter Buses Company
READ ALSO
Element value not showing up in console when set via jQuery

Element value not showing up in console when set via jQuery

I am slightly confused about this. .

346
jQuery&#39;s toggle class requires two clicks in Internet Explorer?

jQuery's toggle class requires two clicks in Internet Explorer?

Works great in Firefox / Chrome / Microsoft Edge, but when the button is clicked in the latest Internet Explorer 11, it takes two clicks to toggle class when it should only take one. Everything else performs as it should (it plays and stops the music when it should)....

371
Toggle (or slide) out specific div on click and hide others

Toggle (or slide) out specific div on click and hide others

I've been browsing all day trying to find and answer to my problem. I'm stumped now and been running into walls.

333
How to add bootstrap calendar to #gvnix finder?

How to add bootstrap calendar to #gvnix finder?

How to add bootstrap calendar to gvnix finder?[nnn]I'm researching the tags generated by gvnix and found in this tag: [nnn]jquery/form/create. tagx[nnn]this code.

503