My issue is that I want to create a registration form where the registrant can add as many delegates as he wants by clicking on "Add delegate". The problem is that the form works perfectly but it just takes into account only the first row to add the values in the database when clicking on submit.
I tried many ways on how to address this issue and am a bit lost now.
Below is the link of the form on my test website and the code that I am using.
https://www.test.graincomevents.com/246479-2
`
<?php
// Template Name: Form Processor
get_header();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
global $wpdb;
// Check if the 'delegate' array is set in $_POST
if (isset($_POST['delegate']) && is_array($_POST['delegate'])) {
// Function to sanitize and validate input
function sanitize_input($data) {
return is_array($data) ? array_map('sanitize_input', $data) : sanitize_text_field($data);
}
// Sanitize and validate each delegate registration data
foreach ($_POST['delegate'] as $delegate) {
// Check if array keys exist before accessing them
if (
isset($delegate['company']) &&
isset($delegate['company_country']) &&
isset($delegate['first_name']) &&
isset($delegate['last_name']) &&
isset($delegate['designation']) &&
isset($delegate['email']) &&
isset($delegate['phone']) &&
isset($delegate['appear_on_list'])
) {
$delegate_data = sanitize_input($delegate);
// Insert delegate data into the database
$wpdb->insert(
'wp_685721_delegate_registration',
array(
'company' => $delegate_data['company'],
'company_country' => $delegate_data['company_country'],
'first_name' => $delegate_data['first_name'],
'last_name' => $delegate_data['last_name'],
'designation' => $delegate_data['designation'],
'email' => $delegate_data['email'],
'phone' => $delegate_data['phone'],
'appear_on_list' => $delegate_data['appear_on_list']
)
);
}
}
}
// Sanitize and validate billing information
$billing_info = array_map('sanitize_input', $_POST['billing_info']);
// Insert billing information into database
$wpdb->insert(
'wp_685721_billing_information',
array(
'billing_first_name' => $billing_info['billing_first_name'],
'billing_last_name' => $billing_info['billing_last_name'],
'billing_email' => $billing_info['billing_email'],
'billing_company' => $billing_info['billing_company'],
'billing_country' => $billing_info['billing_country'],
'billing_address' => $billing_info['billing_address'],
'billing_postcode' => $billing_info['billing_postcode'],
'billing_city' => $billing_info['billing_city'],
'billing_phone' => $billing_info['billing_phone'],
'billing_vat_number' => isset($billing_info['billing_vat_number']) ? $billing_info['billing_vat_number'] : '',
'billing_message' => isset($billing_info['billing_message']) ? $billing_info['billing_message'] : ''
)
);
// Display success message or redirect
echo '<p>Form submitted successfully!</p>';
} else {
// Display the form here
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration and Billing Information</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border-bottom: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f2f2f2;
}
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body data-rsssl=1>
<h2>Delegate Registration Form and Billing Information</h2>
<form action="/246479-2" method="post">
<h3>Delegate Registration</h3>
<table id="delegateTable">
<tr>
<th>ID</th>
<th>Company*</th>
<th>Company Country*</th>
<th>First Name*</th>
<th>Last Name*</th>
<th>Designation/ Job Title*</th>
<th>Email Address*</th>
<th>Phone* (+XX)</th>
<th>Appear on the Delegate List*</th>
</tr>
<tr>
<td>Delegate 1</td>
<td><input type="text" name="delegate[0][company]" required></td>
<td><input type="text" name="delegate[0][company_country]" required></td>
<td><input type="text" name="delegate[0][first_name]" required></td>
<td><input type="text" name="delegate[0][last_name]" required></td>
<td><input type="text" name="delegate[0][designation]" required></td>
<td><input type="email" name="delegate[0][email]" required></td>
<td><input type="tel" name="delegate[0][phone]" required></td>
<td>
<select name="delegate[0][appear_on_list]" required>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</td>
</tr>
</table>
<button type="button" class="add-row" onclick="addDelegateRow()">Add Delegate</button>
<hr>
<h3>Billing Information</h3>
<table>
<tr>
<th>First Name*</th>
<th>Last Name*</th>
<th>Email Address*</th>
<th>Company*</th>
<th>Country*</th>
<th>Address*</th>
<th>Postcode*</th>
<th>Town/City*</th>
<th>Phone* (+XX)</th>
<th>VAT Number (optional)</th>
<th>Any message for GrainCom Team?</th>
</tr>
<tr>
<td><input type="text" name="billing_info[billing_first_name]" required></td>
<td><input type="text" name="billing_info[billing_last_name]" required></td>
<td><input type="email" name="billing_info[billing_email]" required></td>
<td><input type="text" name="billing_info[billing_company]" required></td>
<td><input type="text" name="billing_info[billing_country]" required></td>
<td><input type="text" name="billing_info[billing_address]" required></td>
<td><input type="text" name="billing_info[billing_postcode]" required></td>
<td><input type="text" name="billing_info[billing_city]" required></td>
<td><input type="tel" name="billing_info[billing_phone]" required></td>
<td><input type="text" name="billing_info[billing_vat_number]"></td>
<td><textarea name="billing_info[billing_message]"></textarea></td>
</tr>
</table>
<br>
<input type="submit" value="Submit Registration and Billing Information">
</form>
<script>
var delegateCount = 1;
function addDelegateRow() {
delegateCount++;
var table = document.getElementById("delegateTable");
var row = table.insertRow(-1); // Append row at the end of the table
var cell, input;
var headers = ["Company", "Company Country", "First Name", "Last Name", "Designation/ Job Title", "Email Address*", "Phone* (+XX)", "Appear on the Delegate List*"];
cell = row.insertCell(0);
cell.textContent = "Delegate " + delegateCount;
for (var i = 1; i <= headers.length; i++) {
cell = row.insertCell(i);
if (i == headers.length) { // Handle the "Appear on the Delegate List" field
var originalSelect = document.querySelector("#delegateTable select");
var clonedSelect = originalSelect.cloneNode(true);
clonedSelect.name = "delegate[" + (delegateCount - 1) + "][appear_on_list]";
// Set the value of the cloned select element to the currently selected value
var currentValue = originalSelect.options[originalSelect.selectedIndex].value;
clonedSelect.value = currentValue;
cell.appendChild(clonedSelect);
} else {
input = document.createElement("input");
input.type = "text";
input.name = "delegate[" + (delegateCount - 1) + "][" + headers[i - 1].toLowerCase().replace(/\s/g, '_') + "]";
input.required = true;
cell.appendChild(input);
}
}
}
</script>
</body>
</html>
<?php
}
get_footer();
?>
`
I tried chat GPT and I couldn't find a good solution as I am not a coder in PHP!