The generated javascript form does not store values in database

Question

Im trying to make an orderlist where when the add button was clicked, it will then create a javascript generated form with different assigned ID name, the problem is after done filling up orders and submitting the form, in the database, the first form/original form's value are the only the ones the was stored, the rest of the orders (js generated form) are blank except for their batch ID. What could be the reason and how to fix it?

here is the php script:

    <?php
    // Database connection
    $dbHost = "localhost";
    $dbUsername = "root";
    $dbPassword = "";
    $dbName = "main";

    $conn = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }

    // Check if the form is submitted
    if ($_SERVER["REQUEST_METHOD"] === "POST") {
        // Generate the Batch ID
        $batchID = generateBatchID();

        // Get the form data for each order
        for ($i = 1; $i <= $_POST["order-count"]; $i++) {
            $itemName = $_POST["item-name-$i"];
            $qty = $_POST["qty-$i"];
            $supplierName = $_POST["supplier-name-$i"];
            $supplierContact = $_POST["supplier-contact-$i"];
            $supplierAddress = $_POST["supplier-address-$i"];

            // Prepare the SQL statement
            $sql = "INSERT INTO purchase (`Item Name`, `Qty`, `Supplier Name`, `Supplier Contact`, `Supplier Address`, `Batch ID`) 
                    VALUES ('$itemName', '$qty', '$supplierName', '$supplierContact', '$supplierAddress', '$batchID')";

            // Execute the SQL statement
            if (!mysqli_query($conn, $sql)) {
                echo "Error: " . mysqli_error($conn);
                exit(); // Terminate the script if an error occurs
            }
        }

        // Redirect back to createorder.php with success status
        header("Location: ../purchase.php");
        exit(); // Terminate the script after redirection
    }

    // Close the database connection
    mysqli_close($conn);

    function generateBatchID()
    {
        return rand(100000, 999999);
    }
    ?>

Here is the html code:

 <main>
        <div class="page-header">
            <div>
                <h1>Create Order</h1>
            </div>
            <a href="#" class="add-order-button">+ Add Another Order</a>
        </div>

        <div id="order-container">
            <form action="php/order_create.php" method="post">
                <div class="order-form">
                    <h3>Order 1</h3>
                    <div class="form-row">
                        <label for="item-name-1">Item Name:</label>
                        <select id="item-name-1" name="item-name-1">
                            <?php include 'php/order_read.php'; ?>
                        </select>
                    </div>
                    <div class="form-row">
                        <label for="qty-1">Qty:</label>
                        <input type="text" id="qty-1" name="qty-1">
                    </div>
                    <div class="form-row">
                        <label for="supplier-name-1">Supplier Name:</label>
                        <input type="text" id="supplier-name-1" name="supplier-name-1">
                    </div>
                    <div class="form-row">
                        <label for="supplier-contact-1">Supplier Contact:</label>
                        <input type="text" id="supplier-contact-1" name="supplier-contact-1" pattern="[0-9]+" title="Only numbers allowed">
                    </div>
                    <div class="form-row">
                        <label for="supplier-address-1">Supplier Address:</label>
                        <input type="text" id="supplier-address-1" name="supplier-address-1">
                    </div>
                    <button class="remove-button" onclick="removeOrderForm(1)">Remove</button>
                </div>
                <input type="hidden" id="order-count" name="order-count" value="1">
                <button type="button" class="order-add-button" onclick="createOrderForm()">Add</button>
                <button type="submit" class="order-add-button">Submit</button>
            </form>
        </div>
    </main>

here is the javascript code:

<script>
    var orderCount = 1;

    function createOrderForm() {
        orderCount++;

        var container = document.getElementById('order-container');

        var form = document.createElement('div');
        form.classList.add('order-form');
        form.id = `order-form-${orderCount}`;
        form.innerHTML = `
            <h3>Order ${orderCount}</h3>
            <div class="form-row">
                <label for="item-name-${orderCount}">Item Name:</label>
                <select id="item-name-${orderCount}" name="item-name-${orderCount}">
                    <?php include 'php/order_read.php'; ?>
                </select>
            </div>
            <div class="form-row">
                <label for="qty-${orderCount}">Qty:</label>
                <input type="text" id="qty-${orderCount}" name="qty-${orderCount}">
            </div>
            <div class="form-row">
                <label for="supplier-name-${orderCount}">Supplier Name:</label>
                <input type="text" id="supplier-name-${orderCount}" name="supplier-name-${orderCount}">
            </div>
            <div class="form-row">
                <label for="supplier-contact-${orderCount}">Supplier Contact:</label>
                <input type="text" id="supplier-contact-${orderCount}" name="supplier-contact-${orderCount}" pattern="[0-9]+" title="Only numbers allowed">
            </div>
            <div class="form-row">
                <label for="supplier-address-${orderCount}">Supplier Address:</label>
                <input type="text" id="supplier-address-${orderCount}" name="supplier-address-${orderCount}">
            </div>
            <button class="remove-button" onclick="removeOrderForm(${orderCount})">Remove</button>
        `;

        container.insertBefore(form, container.lastElementChild.previousElementSibling);

        document.getElementById('order-count').value = orderCount;
    }

    function removeOrderForm(orderId) {
        var form = document.getElementById(`order-form-${orderId}`);
        form.parentNode.removeChild(form);

        orderCount--;
        document.getElementById('order-count').value = orderCount;
    }
</script>

**Warning:** Your code is vulnerable to SQL Injection attacks. You should use parameterised queries and prepared statements to help prevent attackers from compromising your database by using malicious input values. http://bobby-tables.com gives an explanation of the risks, as well as some examples of how to write your queries safely using PHP / mysqli. **Never** insert unparameterised data directly into your SQL. The way your code is written now, someone could easily steal, incorrectly change, or even delete your data. — ADyson, Jul 18 '23 at 10:36
https://phpdelusions.net/mysqli also contains good examples of writing safe SQL using mysqli. See also the [mysqli documentation](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) and this: [How can I prevent SQL injection in PHP?](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) . Parameterising your queries will also greatly reduce the risk of accidental syntax errors as a result of un-escaped or incorrectly quoted input values. If you learnt your current technique from a tutorial or book, please don't use that resource again. — ADyson, Jul 18 '23 at 10:37

score 0 · Accepted Answer · answered Jul 18 '23 at 10:44

The problem you've got is that you're adding the new <divs outside the <form. Data outside a form isn't submitted with the form. Attach the div inside the form instead.

If you change the element specified as the "order container", that would solve the issue:

<form id="order-container"

Runnable demo (you can use the element inspector in the browser to see where the form fields are now inserted into the DOM):

var orderCount = 1;

function createOrderForm() {
  orderCount++;

  var container = document.getElementById('order-container');

  var form = document.createElement('div');
  form.classList.add('order-form');
  form.id = `order-form-${orderCount}`;
  form.innerHTML = `
            <h3>Order ${orderCount}</h3>
            <div class="form-row">
                <label for="item-name-${orderCount}">Item Name:</label>
                <select id="item-name-${orderCount}" name="item-name-${orderCount}">
                    <?php include 'php/order_read.php'; ?>
                </select>
            </div>
            <div class="form-row">
                <label for="qty-${orderCount}">Qty:</label>
                <input type="text" id="qty-${orderCount}" name="qty-${orderCount}">
            </div>
            <div class="form-row">
                <label for="supplier-name-${orderCount}">Supplier Name:</label>
                <input type="text" id="supplier-name-${orderCount}" name="supplier-name-${orderCount}">
            </div>
            <div class="form-row">
                <label for="supplier-contact-${orderCount}">Supplier Contact:</label>
                <input type="text" id="supplier-contact-${orderCount}" name="supplier-contact-${orderCount}" pattern="[0-9]+" title="Only numbers allowed">
            </div>
            <div class="form-row">
                <label for="supplier-address-${orderCount}">Supplier Address:</label>
                <input type="text" id="supplier-address-${orderCount}" name="supplier-address-${orderCount}">
            </div>
            <button class="remove-button" onclick="removeOrderForm(${orderCount})">Remove</button>
        `;

  container.insertBefore(form, container.lastElementChild.previousElementSibling);

  document.getElementById('order-count').value = orderCount;
}

function removeOrderForm(orderId) {
  var form = document.getElementById(`order-form-${orderId}`);
  form.parentNode.removeChild(form);

  orderCount--;
  document.getElementById('order-count').value = orderCount;
}

<main>
  <div class="page-header">
    <div>
      <h1>Create Order</h1>
    </div>
    <a href="#" class="add-order-button">+ Add Another Order</a>
  </div>

  <div>
    <form id="order-container" action="php/order_create.php" method="post">
      <div class="order-form">
        <h3>Order 1</h3>
        <div class="form-row">
          <label for="item-name-1">Item Name:</label>
          <select id="item-name-1" name="item-name-1">
            <?php include 'php/order_read.php'; ?>
          </select>
        </div>
        <div class="form-row">
          <label for="qty-1">Qty:</label>
          <input type="text" id="qty-1" name="qty-1">
        </div>
        <div class="form-row">
          <label for="supplier-name-1">Supplier Name:</label>
          <input type="text" id="supplier-name-1" name="supplier-name-1">
        </div>
        <div class="form-row">
          <label for="supplier-contact-1">Supplier Contact:</label>
          <input type="text" id="supplier-contact-1" name="supplier-contact-1" pattern="[0-9]+" title="Only numbers allowed">
        </div>
        <div class="form-row">
          <label for="supplier-address-1">Supplier Address:</label>
          <input type="text" id="supplier-address-1" name="supplier-address-1">
        </div>
        <button class="remove-button" onclick="removeOrderForm(1)">Remove</button>
      </div>
      <input type="hidden" id="order-count" name="order-count" value="1">
      <button type="button" class="order-add-button" onclick="createOrderForm()">Add</button>
      <button type="submit" class="order-add-button">Submit</button>
    </form>
  </div>
</main>

The generated javascript form does not store values in database

1 Answers1