Table that extends and saves its sends its contents via post. (PHP and JavaScript)

I’m trying to create a table that extends on button press. When the form (Table) is submitted the contents should be sent to another file (the one that saves it in the db) via post.

Heres a mockup of the page:

On Press of the + button another button like “Äpfel” or “Milch” should be added. On these the name (for example äpfel) and the quantity (the text on the bottom right of every button) should be changable (user input) There will also be a save button which saves the Products.(Submits the form)

This should all be done using php and Js. Sadly, im new to php and js and i have no clue how to make it so the input of these button os available from the post after the form is submitted.

Heres what i have so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <title>Add List</title>
</head>
<body>
    <form action="../DB files/addlistDB.php" method="POST">
    <h3><input type="text" name="list-title" id="list-title" value="Enter Listname"></h3>
    <table id="product-table">
    </table>
    <button type="button" id="add-product-button" onclick="addproductrow()">+</button>
    <button type="submit" class="savebtn">Save</button>
    </form>
    
<script>
function addproductrow() {
  var table = document.getElementById("product-table");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = '<button class="btn"><input type="text"></button>';
  cell2.innerHTML = '<button class="btn"><input type="text"></button>';
}
</script>
</body>
</html>

By the way im not sure if a table is the right way to do this.

Does anyone have an Idea how to do this? Ps. Please tell me if you don’t understand what im asking for.I dont think i wrote this question clear enough but i dont really know how change it yet.

Answer

Do this:

function addproductrow() {
  var table = document.getElementById("product-table");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = '<button class="btn"><input type="text"></button>';
  cell2.innerHTML = '<button class="btn"><input type="text"></button>';
}

Advertisement

Answer