39 lines
3.0 KiB
JavaScript
39 lines
3.0 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const addVisitorBtn = document.getElementById('add-visitor');
|
|
const visitorsContainer = document.getElementById('visitors-container');
|
|
let visitorCount = 1;
|
|
|
|
addVisitorBtn.addEventListener('click', function () {
|
|
visitorCount++;
|
|
const visitorTemplate = `
|
|
<div class="visitor-group border-t mt-4 pt-4">
|
|
<h3 class="text-lg font-semibold">Visitor ${visitorCount}</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
|
|
<div>
|
|
<label for="visitor_full_name_${visitorCount}" class="block text-sm font-medium text-gray-700">Full Name</label>
|
|
<input type="text" id="visitor_full_name_${visitorCount}" name="visitors[${visitorCount}][full_name]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="visitor_id_or_passport_${visitorCount}" class="block text-sm font-medium text-gray-700">National ID or Passport Number</label>
|
|
<input type="text" id="visitor_id_or_passport_${visitorCount}" name="visitors[${visitorCount}][id_or_passport]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label for="visitor_id_image_${visitorCount}" class="block text-sm font-medium text-gray-700">Scanned ID/Passport Image</label>
|
|
<input type="file" id="visitor_id_image_${visitorCount}" name="visitors[${visitorCount}][id_image]" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" required>
|
|
</div>
|
|
<div>
|
|
<label for="visitor_mobile_phone_${visitorCount}" class="block text-sm font-medium text-gray-700">Mobile Phone Number</label>
|
|
<input type="text" id="visitor_mobile_phone_${visitorCount}" name="visitors[${visitorCount}][mobile_phone]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="visitor_mailing_address_${visitorCount}" class="block text-sm font-medium text-gray-700">Mailing Address</label>
|
|
<textarea id="visitor_mailing_address_${visitorCount}" name="visitors[${visitorCount}][mailing_address]" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
visitorsContainer.insertAdjacentHTML('beforeend', visitorTemplate);
|
|
});
|
|
});
|