I have the following form. It should allow the user to input multiple separate client names & attach an image next to each.
FTR, it outputs the concatenated text inputs perfectly, however only ever uploads the first image. Why is that?
Here’s a Fiddle, if needed: https://jsfiddle.net/oLsz2u0y/
$(function () {
// Initially hide both divs
$("#bulkContainer").hide();
$(".individual").hide();
// Listen for changes in the radio button selection
$("input[name='bulkPayments']").change(function() {
if ($(this).val() === "Yes") {
// Show the bulk div and hide the individual div
$("#bulkContainer").show();
$(".individual").hide();
} else if ($(this).val() === "No") {
// Show the individual div and hide the bulk div
$("#bulkContainer").hide();
$(".individual").show();
}
});
// Initialize the counter for generating unique names and IDs
var counter = 1;
// Add more sets when the "Add 1 more" button is clicked
$("#addMore").click(function(event) {
event.preventDefault(); // Prevent the default form submission
// Clone the "bulk" section and update the attributes
var newBulkSection = $(".bulk:first").clone();
// Increment the counter for the next set and update the IDs and names
counter++;
newBulkSection.find("input[type=text]").attr("id", "clientName" + counter).attr("name", "clientName" + counter);
newBulkSection.find("input[type=file]").attr("id", "attachments" + counter).attr("name", "attachments" + counter);
// Clear input values in the new section (optional)
newBulkSection.find("input[type=text]").val("");
newBulkSection.find("input[type=file]").val("");
// Append the newly modified section to the container
$("#bulkContainer").append(newBulkSection);
// Show the newly added section
newBulkSection.show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="data.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label>Bulk Payments *:</label>
<div class="radio">
<label>
<input type="radio" name="bulkPayments" value="Yes"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="bulkPayments" value="No"> No
</label>
</div>
</div>
<div id="bulkContainer" style="display:none">
<div class="bulk">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="clientName1">Client Name *:</label>
<input type="text" class="form-control" id="clientName1" name="clientName1" placeholder="" required autocomplete="one-time-code">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="attachment1">Attachment:</label>
<input type="file" class="form-control-file" id="attachment1" name="attachment1">
</div>
</div>
</div>
</div>
</div>
<button id="addMore" class="btn">Add 1 more</button>
</form>
I am using the following PHP to grab the form data:
// Initialize an array to store the client names
$clientNames = array();
// Loop through the input fields (maximum of 10?)
for ($i = 1; $i <= 10; $i++) { // Adjust the loop limit according to the number of fields
$fieldName = "clientName" . $i;
// Check if the field exists and has a value
if (isset($_POST[$fieldName]) && !empty($_POST[$fieldName])) {
// Add the client name to the array
$clientNames[] = $_POST[$fieldName];
}
}
// Join the client names using the pipe (|) symbol
$clientNamesString = implode("|", $clientNames);
// Output the result
echo "Client Names: " . $clientNamesString;
// Initialize an array to store the uploaded file names
$uploadedFileNames = array();
// Initialize a directory where you want to store the uploaded files
$uploadDirectory = "../uploads";
// Loop through the file input fields
for ($i = 1; $i <= 10; $i++) { // Adjust the loop limit according to the number of fields
$fieldName = "attachment" . $i;
// Check if a file was uploaded for this field
if (isset($_FILES[$fieldName]) && $_FILES[$fieldName]['error'] === UPLOAD_ERR_OK) {
// Generate a unique filename to avoid overwriting existing files
$uniqueFileName = uniqid() . "_" . $_FILES[$fieldName]['name'];
// Move the uploaded file to the upload directory
if (move_uploaded_file($_FILES[$fieldName]['tmp_name'], $uploadDirectory . $uniqueFileName)) {
// Add the uploaded file name to the array
$uploadedFileNames[] = $uniqueFileName;
}
}
}
// Join the uploaded file names using the pipe (|) symbol
$uploadedFileNamesString = implode("|", $uploadedFileNames);
// Output the result
echo "Uploaded File Names: " . $uploadedFileNamesString;