Advertisements
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>>Solution :
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>