php javascript add/delete table rows and insert to database

[DanTipple]

Hi Guys,

It’s been a while since I’ve been on here asking questions to my php problems.

My latest puzzle is I’m looking at using a javascript add/delete row table system to an order page so the user can add additional rows if they need them and vice versa. I’ve found a tutorial here:- http://devzone.co.in/add-remove-rows-in-table-dynamically-using-jquery/ which should allow me to add onto my page easily enough.

at the moment my database is structured so that I have say 5 rows that the user can insert to but the problem I’m having is that more and more users are wanting difference row counts.

Is there a dynamic way that the user can have as many or as little rows as they want and the database would be adjusted to suit?

At the moment my code will individually add the values like this;-

[php] if (isset($_POST[“pur”]))
$row1 =$_POST[‘row1’];
$row2 =$_POST[‘row2’];
$row3 =$_POST[‘row3’];
$row4 =$_POST[‘row4’];
$row5 =$_POST[‘row5’] ;[/php]

I’ve seen this working on an accounting website I use for my invoicing etc so I know something is possible but I’m a bit clueless as to how.

thanks for your input

[astonecipher]

I need more information. The database should not depend on the frontend or viscera.

Adding rows to a page is simple. Adding a row to a data table, would depend on the data that needs storing.

[ErnieAlex]

Dan, welcome back!

Well, there are several ways to handle this in my opinion. First, you can keep a field in the user’s info in
your user table that keeps their requested default number of rows. If a user says he/she wants 5 rows,
just save that number in their profile page. Then, use PHP to populate the fields with the number of rows
that one user wants in place. Easy enough… The other way would be to just place the max number of
rows, let’s say, 20 on the page and hide them as needed using a simple JQuery call. Fields can use the CSS
styling code of “display: none;” so they do not show on screen. You can create a short JQuery routine, link
it to a drop down (Select-Option) field and hide/show the rows that are needed. I do this all the time for
inputs where a number of rows in a table needs to be show if the user selects a checkbox or drop-down
value to allow them to enter further info…

Either of these ways would work. You could use a dynamic AJAX PHP loading routine but I think that is way
over-kill for this task. If you try the PHP way and can’t get it to work, let us know. If you want to try the
JQuery way, I can give you some sample code for it…

Good luck!

[JimL]

Here is how I would do this in a simple bootstrap/jquery project.

client side: http://embed.plnkr.co/ZtT7cVI38hCG02SpLDgW/

[php]$(function() {

$(document).on(“click”, “button.add-row”, addRowHandler);
$(document).on(“click”, “button.remove-row”, removeRowHandler);
$(document).on(“submit”, “#multiRowDemo”, saveRowsHandler);

function addRowHandler() {
var $form = $("#multiRowDemo"),
$rows = $form.find(“input[name^=‘row’]”),
$clone = $(’#rowTemplate’).clone();

// remove the id attribute as that hides the template
// enable the input field, the template is disabled to avoid submitting it
$clone
  .removeAttr("id")
  .find("input")
    .removeAttr("disabled");

// hack to get outerHtml() in Jquery
var template = $('<div>').append($clone).remove().html();

$("#rows").append(template);

}

function removeRowHandler() {
$(this).closest(".input-group").remove();
}

function saveRowsHandler(e) {
e.preventDefault();

var formData = $(this).serialize();

// Here you would probably do a $.post("/yourscript.php", formData)
$("#saveData").text("Data submitted:\n" + JSON.stringify($(this).serializeArray(), null, 2));

}

});[/php]

[php]

Multiple Row Demo

Add row

Submit

[/php]

[hr]

server side:

[code]DB structure

user
id, email, password, …

row
id, user_id, text[/code]

[php]$conn = getDbConnectionSomeWayOrAnother();
$user = getLoggedInUserSomeWayOrAnother();

if (!$user) {
// show 401 forbidden error somehow
}

if (isset($_POST[‘rows’])) {
$inserts = [];
$values = [];

// With a prepared statement the SQL server can execute consecutive (equal) queries much faster
$stmt = $conn->prepare(‘INSERT INTO row (user_id, text) VALUES (?,?)’);
foreach ($_POST[‘rows’] as $row) {
// Using PDO we can just execute the query with an array of values to have them bound as parameters
$stmt->execute([$user->getId(), $row[‘value’]]);
}

}[/php]