I have an HTML page in which I add some form row interactively via JS, the php code that i wrote to save the content of this row and of other field on different table on db save only the first row while discard all other row added dinamically, the form action is post and the enctype is multipart/form-data
this is the part of the page that add the row:
<body>
<div class="container">
<h2>Create Estimate</h2>
<?php if (isset($message)): ?>
<div class="message"><?php echo $message; ?></div>
<?php endif; ?>
<div class="formintestazione">
<form method="POST" action="create_estimate.php" onsubmit="return validateForm();" enctype="multipart/form-data">
<div class="section">
<div class="form-row">
<label for="location">Location:</label>
<input type="text" id="location" name="location" value="Sciacca" required>
</div>
<div class="form-row">
<label for="date">Date:</label>
<input type="date" id="date" name="date" value="<?php echo date('Y-m-d'); ?>" required>
</div>
<div class="form-row">
<label for="estimate_type">Estimate Type:</label>
<select id="estimate_type" name="estimate_type" onchange="updateEstimateNumber()" required>
<option value="">Select Estimate Type</option>
<option value="OFF_n">OFF_n</option>
<option value="OFF_B2B">OFF_B2B</option>
<option value="OFF_EGov_n">OFF_EGov_n</option>
</select>
</div>
<div class="form-row">
<label for="estimate_number">Estimate Number:</label>
<input type="text" id="estimate_number" name="estimate_number" required>
</div>
<div class="form-row">
<label for="recipient_id">Recipient:</label>
<select id="recipient_id" name="recipient_id" onchange="updateRecipientDetails()" required>
<option value="">Select Recipient</option>
<?php foreach ($recipients as $recipient): ?>
<option value="<?php echo $recipient['id']; ?>"
data-details="<?php echo $recipient['address'] . ', ' . $recipient['zip_code'] . ' - ' . $recipient['city'] . ' - ' . $recipient['province']; ?>">
<?php echo $recipient['company_name']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
<p id="recipientDetails"></p> <div class="form-row">
<label for="editor">Editor:</label>
<input type="text" id="editor" name="editor" required>
</div>
<div class="form-row">
<label for="subject">Subject:</label>
<textarea id="subject" name="subject" maxlength="255" rows="3" required></textarea>
</div>
<input type="hidden" id="draft" name="draft" value="YES">
</div>
</div>
<div class="section">
<h2>Add Estimate Items</h2>
<div id="items-container">
<div class="item" data-item-number="1">
<h3>Item 1</h3>
<div class="form-row">
<label for="item_number_1">Item Number:</label>
<input type="text" id="item_number_1" name="item_number[]" value="1" readonly>
</div>
<div class="form-row">
<label for="item_type_1">Item Type:</label>
<select id="item_type_1" name="item_type[]" onchange="handlePrice(1)">
<option value="paragraph">Paragraph</option>
<option value="description">Description</option>
</select>
</div>
<div class="form-row">
<label for="image_1">Image:</label>
<input type="file" id="image_1" name="image[]">
</div>
<div class="form-row">
<label for="description_1">Description:</label>
<textarea id="description_1" name="description[]" rows="3"></textarea>
</div>
<div class="form-row">
<label for="price_1">Price (€):</label>
<input type="number" step="0.01" id="price_1" name="price[]">
</div>
<button type="button" class="remove-row-btn" onclick="removeItem(this)">Remove Item</button>
</div>
</div>
<button type="button" class="add-row-btn" onclick="addItem()">Add Item</button>
</div>
<div class="form-row">
<button type="submit" name="save" value="Save" class="add-row-btn">Save Estimate</button>
</div>
</form>
</div>
<script>
let itemNumber = 1;
// Function to add a new item
function addItem() {
itemNumber++;
const itemsContainer = document.getElementById('items-container');
const newItem = document.createElement('div');
newItem.classList.add('item');
newItem.setAttribute('data-item-number', itemNumber);
newItem.innerHTML = `
<h3>Item ${itemNumber}</h3>
<div class="form-row">
<label for="item_number_${itemNumber}">Item Number:</label>
<input type="text" id="item_number_${itemNumber}" name="item_number[]" value="${itemNumber}" readonly>
</div>
<div class="form-row">
<label for="item_type_${itemNumber}">Item Type:</label>
<select id="item_type_${itemNumber}" name="item_type[]" onchange="handlePrice(${itemNumber})">
<option value="paragraph">Paragraph</option>
<option value="description">Description</option>
</select>
</div>
<div class="form-row">
<label for="image_${itemNumber}">Image:</label>
<input type="file" id="image_${itemNumber}" name="image[]">
</div>
<div class="form-row">
<label for="description_${itemNumber}">Description:</label>
<textarea id="description_${itemNumber}" name="description[]" rows="3"></textarea>
</div>
<div class="form-row">
<label for="price_${itemNumber}">Price (€):</label>
<input type="number" step="0.01" id="price_${itemNumber}" name="price[]">
</div>
<button type="button" class="remove-row-btn" onclick="removeItem(this)">Remove Item</button>
`;
itemsContainer.appendChild(newItem);
}
// Function to remove an item
function removeItem(button) {
const item = button.closest('.item');
item.remove();
}
// Function to handle the price field based on the item type
function handlePrice(itemNumber) {
const itemType = document.getElementById(`item_type_${itemNumber}`).value;
const priceField = document.getElementById(`price_${itemNumber}`);
if (itemType === 'paragraph') {
priceField.disabled = true;
priceField.value = ''; // Reset the price field if disabled
} else {
priceField.disabled = false;
}
}
// Initialization of the first item
document.getElementById('item_type_1').addEventListener('change', function() {
handlePrice(1);
});
</script>
</body>
While the php code that save the content is the following, it seems that it discard all the row added successively via js and doesn’t store the same, why the row were discarded i have developed another example in which all seems functioning correctly and even no row were discarded
<?php
// Enable error reporting for development purposes (remove in production)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// Database connection
$servername = "localhost";
$username
= "root";
$password = "";
$dbname = "tli_estimates"; // Replace with your database name
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Retrieve a list of recipients from the Customers table with all details
$sql = "SELECT id, company_name, address, zip_code, city, province FROM Customers";
$result = $conn->query($sql);
$recipients = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$recipients[] = $row;
}
}
// Handle form submission
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get form data
$location = $_POST['location'];
$date = $_POST['date'];
$estimate_type = $_POST['estimate_type'];
$estimate_number = $_POST['estimate_number'];
$recipient_id = $_POST['recipient_id'];
$editor = $_POST['editor'];
$subject = $_POST['subject'];
$draft = $_POST['draft'];
// Insert the estimate into the Estimates table
$sqlEstimate = "INSERT INTO Estimates (estimate_number, estimate_type, recipient_id, location, date, editor, subject, draft)
VALUES ('$estimate_number', '$estimate_type', '$recipient_id', '$location', '$data', '$editor', '$subject', '$draft')";
if ($conn->query($sqlEstimate) === TRUE) {
$message = ($draft == 'SI') ? "Estimate saved as draft!" : "Estimate saved successfully!";
} else {
$message = "Error during insertion: " . $conn->error;
}
// Handle estimate items
// Get the estimate number
$estimate_number = isset($_POST['estimate_number']) ? $_POST['estimate_number'] : null;
// If the estimate number is empty, stop here
if (empty($estimate_number)) {
die("Error: Missing estimate number.");
}
// Loop through all submitted items
if (isset($_POST['item_number']) && is_array($_POST['item_number'])) {
foreach ($_POST['item_number'] as $index => $item_number) {
// Get data from the current item
$item_type = $_POST['item_type'][$index];
$description = $_POST['description'][$index];
$price = ($_POST['price'][$index] != "") ? $_POST['price'][$index] : 0.00; // If empty, set to 0.00
// Handle image upload as a BLOB
$image = null;
if (isset($_FILES['image']['tmp_name'][$index]) && is_uploaded_file($_FILES['image']['tmp_name'][$index])) {
$image = addslashes(file_get_contents($_FILES['image']['tmp_name'][$index]));
}
// Insert the item into the database
$sqlItem = "INSERT INTO EstimateItems (estimate_number, item_number, item_type, image, description, price)
VALUES (?, ?, ?, ?, ?, ?)";
// Prepare the SQL statement
$stmt = $conn->prepare($sqlItem);
if (!$stmt) {
die("Error preparing statement: " . $conn->error);
}
// Bind parameters
$stmt->bind_param("sisssd", $estimate_number, $item_number, $item_type, $image, $description, $price);
// Execute the query
if ($stmt->execute()) {
echo "Item $item_number inserted successfully!<br>";
} else {
echo "Error inserting item $item_number: " . $stmt->error . "<br>";
}
// Close the statement
$stmt->close();
}
} else {
echo "Error: No items found.";
}
}
$conn->close();
