Adding data into MySQL from a dynamic jQuery form - php

Question

i'm trying to insert data to MySQL from a dynamic form with jQuery. For the record, I'm using Twitter Bootstrap. I actually achieved insert "rows" but with no data. The best help I found right now is this here for the insert to MySQL and here to jQuery script.
Thanks in advance for taking time for this.
File: add.php
<form action="../reglas/insert.php" method="post" class="form-horizontal">
<div class="container">
<div id="content">
<div class="row">
<a class="add_line btn btn-small" href="#" style="margin-left:5px">+</a>
</div>
<br>
</div>
</div>
</div>
</div>
<div style="margin:20px auto; width:80px;">
<input class="btn btn-success" type="submit" value="Guardar">
</div>
</form>
<script>
$("#content").delegate(".add_line", "click", function() {
var content = '<div class="row">' +
'<div class="span3"><div class="input-append"><input type="text" class="span2 text-right" placeholder="0.00" id="enganche" name="enganche" value="" /><span class="add-on">%</span></div></div>' +
'<div class="span3"><div class="input-append"><input type="text" class="span2 text-right" placeholder="0.00" id="comision" name="comision" value="" /><span class="add-on">%</span></div></div>' +
'<div class="span3"><div class="input-append"><input type="text" class="span2 text-right" placeholder="0.00" id="r1" name="r1[]" value="" /><span class="add-on">%</span></div></div>' +
'<div class="span2"><div class="input-append"><input type="text" class="span1 text-right" placeholder="0.00" id="r2" name="r2[]" value="" /><span class="add-on">%</span></div></div>'+
'<a class="del_line btn btn-small" href="#" style="margin-left:5px">-</a> ' +
'<br><br>'+
'</div>';
$("#content").append(content);
return false;
});
$("#content").delegate(".del_line", "click", function() {
$(this).parent().remove();
return false;
});
</script>
File: insert.php
The Connection:
$con=mysqli_connect("$host","$username","$password","$db_name");
mysqli_autocommit($con, false);
$flag=true;
The query:
$query="
INSERT INTO $tbl_name(
the_input,
)
VALUES (
'$the_input',
)";
The "for":
for ($i = 0; $i < count($_POST['the_input']); $i++) {
$the_input = $_POST['the_input'][$i];
$result = mysqli_query($con, $query);
if (!$result) {
$flag = false;
echo "Error details: " . mysqli_error($con). ". ";
}
}
if ($flag) {
mysqli_commit($con);
echo "Done!";
}
mysqli_close($con);
?>

Answer 1

Okey dokey.
First things first:
$.delegate() is deprecated so unless you are using a version that is < jQuery 1.7 (which is many versions ago) you should migrate to $.on() event binder/delegator function. This will ensure that your code is future proof (at least until they change the api again!)
Secondly:
I am assuming you have wrapped your data in a form tag and the values are actually getting send to the recieving page here is how I would do it:
if(isset($_POST['the_input']))
{
//create connection object;
$mysqli = new mysqli($host,$username,$password,$db_name);
$query = "INSERT INTO `the_input` VALUES (";
//construct the query. Get the the_input data and paramater string (required for stmt binding)
foreach($_POST['the_input'] as $value)
{
$query .= $value . ",";
}
//remove trailing comma
$query = substr($query, 0, strlen($query)-1);
$query .= ")";
//this is just so you can see what the loop did and test the output of the query, remove this when you're confident
echo "The constructed query string is: " . $query
if($mysqli->query($query) == false)
{
trigger_error($mysqli->error);
} else {
echo "Success! Check the DB!";
}
} else {
Echo "No POST data was recieved";
}