PHP dynamic form will not INSERT into mySql

Question

I'm working on a PHP dynamic form based on the tutorial found here: http://blog.calendarscripts.info/dynamically-adding-input-form-fields-with-jquery/

Here is the table layout:

ID is auto-increment. The form fields for depratecat are visible in my code only for testing; normally the user would not be able to change this value. The value of depratecat would come from a POST value from a previous page and should be the same for all rows inputted or edited in this instance. For testing I'm declaring the value as 14.

My test page is here: http://www.bentleg.com/fcsbadmin/dynamictest4.php

The problems: The "Add row" script function does not work and the code won't insert new data thru form; nothing happens. No errors are shown in the Chrome console

Editing or deleting pre-existing rows seems to work.

Below is my complete test code minus the connection, Some print_r added to show the array.:

<?php
error_reporting(E_ALL); 
// Connect to the DB
$link = myconnection stuff

$new_depratecat='14'; //for testing


// store in the DB 
if(!empty($_POST['ok'])) { 
//first delete the records marked for deletion. Why? Because we don't want to process them in the code below
if( !empty($_POST['delete_ids']) and is_array($_POST['delete_ids'])) {
// you can optimize below into a single query, but let's keep it simple and clear for now:
foreach($_POST['delete_ids'] as $id) {
$sql = "DELETE FROM tblRates_balance WHERE id=$id";
$link->query($sql);
}
}

// now, to edit the existing data, we have to select all the records in a variable.
$sql="SELECT * FROM tblRates_balance WHERE depratecat='$new_depratecat' ORDER BY suborder";
$result = $link->query($sql);

// now edit them
while($rates = mysqli_fetch_array($result)) {

// remember how we constructed the field names above? This was with the idea to access the values easy now
$sql = "UPDATE tblRates_balance SET 
MinBalance='".$_POST['MinBalance'.$rates['id']]."', 
InterestRate='".$_POST['InterestRate'.$rates['id']]."',
APY='".$_POST['APY'.$rates['id']]."',
suborder='".$_POST['suborder'.$rates['id']]."'
WHERE id='$rates[id]'";


$link->query($sql);


}
// (feel free to optimize this so query is executed only when a rate is actually changed)

// adding new

if($_POST['add_MinBalance']!= "") { 

//echo ("OKAY");

$sql = "INSERT INTO tblRates_balance (depratecat, MinBalance, InterestRate, APY, suborder) VALUES ('$new_depratecat','".$_POST['add_MinBalance']."', '".$_POST['add_InterestRate']."', '".$_POST['add_APY']."','".$_POST['add_suborder']."' );";

$link->query($sql);

}
}

// select existing rates here
$sql="SELECT * FROM tblRates_balance where depratecat='$new_depratecat' ORDER BY suborder";
$result = $link->query($sql);
?>

<html>
<head>
<title>Example of dynamically adding row and inserting into mySql with jQuery</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

</head>

<body>

<div style="width:90%;margin:auto;">
<h1>Example of dynamically adding row and inserting into mySql with jQuery </h1>

<form method="POST" id="newrate">
<div id="itemRows">

Minimum Balance: <input type="text" name="add_MinBalance" size="30" /> 
Interest Rate: <input type="text" name="add_InterestRate" /> 
APY: <input type="text" name="add_APY" /> 
Order: <input type="text" name="add_suborder" size="2"/> 


<< Add data and click on "Save Changes" to insert into db. <br>
You can add a new row and make changes to existing rows all at one time and click on "Save Changes."
New entry row will appear above after saving.

<?php
// Next section does updating. let's assume you have the rate data from the DB in variable called $rates

while($rates = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$rates['id']?>">
<?php //echo $rates['id']; ?>

Minimum Balance: <input type="text" name="MinBalance<?=$rates['id']?>" value="<?=$rates['MinBalance']?>" />
Interest Rate: <input type="text" name="InterestRate<?=$rates['id']?>" value="<?=$rates['InterestRate']?>" /> 

APY: <input type="text" name="APY<?=$rates['id']?>" value="<?=$rates['APY']?>" />
Order: <input type="text" name="suborder<?=$rates['id']?>" value="<?=$rates['suborder']?>" />
<input type="checkbox" name="delete_ids[]" value="<?=$rates['id']?>"> Mark to delete</p>
<?php endwhile;?>

</div>

<p><input type="submit" name="ok" value="Save Changes"></p>
</form>

</div>

<script language="Javascript" type="text/javascript">


var rowNum = 0;
function addRow(frm) {
rowNum ++; 
var row = '<p id="rowNum'+rowNum+'">Minimum Balance:<input type="text" name="add_MinBalance[]" value="'+frm['add_MinBalance[]'].value+'">Interest Rate:<input type="text" name="add_InterestRate[]" value="'+ frm['add_InterestRate[]'].value +'">APY:<input type="text" name="add_APY[]" value="'+frm['add_APY[]'].value+'">Order:<input type="text" name="add_suborder[]"value="'+ frm['add_suborder[]'].value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+')(this);"></p>';
jQuery('#itemRows').append(row);
frm['add_MinBalance[]'].value = '';
frm['add_InterestRate[]'].value = '';
frm['add_APY[]'].value = '';
frm['add_suborder[]'].value = '';

}

function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}

//}
</script>

</body> 
</html>

Please, learn to use prepared statements with either PDO or MySQLi. — tereško
– tereško, Commented Dec 27, 2013 at 8:06

Barmar · Accepted Answer · 2013-12-24 21:51:53Z

1

The inputs in the initial form have names add_depratecat, add_MinBalance, add_InterestRate, add_APY, and add_suborder. When you add new rows, they have the same names, but with [] appended. So the original row creates single inputs, the added rows create array inputs, but they have the same names, and they conflict.

You should use the array form for the original inputs as well:

<form method="POST" id="newrate">
    <div id="itemRows">
    Dep_rate_cat:<input type="text" name="add_depratecat[]" size="30"/> 
    Minimum Balance: <input type="text" name="add_MinBalance[]" size="30" /> 
    Interest Rate: <input type="text" name="add_InterestRate[]" /> 
    APY: <input type="text" name="add_APY[]" /> 
     Order: <input type="text" name="add_suborder[]" size="2"/>

so that they're consistent with the added rows.

answered Dec 24, 2013 at 21:51

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

26 Comments

user3133389 Over a year ago

Now a new problem. When I append the [] as you suggested, the "Add row" function fails. That is, a new row is not added when clicking "Add row".

user3133389 Over a year ago

Errors in console: Uncaught TypeError: Cannot read property 'value' of undefined dynamictest4.php:55 addRow dynamictest4.php:55 onclick dynamictest4.php:26

Barmar Over a year ago

Since you changed the names of the fields, you have to update things like frm.add_depratecat.value to match. That should be frm['add_depratacat[]'].value. Or you can assign IDs to the elements and use document.getElementById('add_depratacat').value.

user3133389 Over a year ago

I made the changes but the same error is occuring in the Chrome console and the new row is still not being added. Here is the script after I made the updates. Did I do it wrong? code

user3133389 Over a year ago

I mean I made the changes to my original code block. Maybe I missed something?

|

Noor · Accepted Answer · 2013-12-24 22:04:15Z

1

Initially you are not adding [] in the form fields,

change <input type="text" name="add_depratecat" size="30"> to <input type="text" name="add_depratecat[]" size="30">, do the same for other fields as well.

And in foreach where you are inserting data to database use array $depratecat[] instead of string $depratecat

if(isset($_POST['add_depratecat'])) {   
        $depratecat = $_POST['add_depratecat']; ........

For debugging purpose write echo '<pre>'; print_r($_POST); OR var_dump($_POST); Instead of echo '<pre>',print_r($_POST,true),'</pre>';.

edited Dec 24, 2013 at 22:04

answered Dec 24, 2013 at 21:57

Noor

1,4019 silver badges28 bronze badges

Collectives™ on Stack Overflow

PHP dynamic form will not INSERT into mySql

2 Answers 2

26 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

26 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related