Hi,
I have a form that displays locations of fire extinguishers and types.
It has an text input for location and then option of 5 types of extinguisher. It also has an add extra location button which when selected adds another form so a user can log as many as needed, so on and so forth
Form works ok but …
The text input has a required value so the form can’t be submitted unless the location input is filled out. This also works on any additional form added with the button.
What i am trying to do is do a required value for the multiple checkbox options so that the form can’t be submitted also until at least one checkbox is selected. Need this required field in the extra forms added as well.
There are several code scripts out there and i have tried about 5 now. I don’t know if its anything to do with the adding an additional form code ?
Just can’t seem to get it working ? Any help gratefully appreciated.
Here is my code.
<form method="post">
<fieldset id="business-details">
<div class="container">
Fire Extinguisher Locations
<input type="text" name="list[0][location]" required>
<label>Type</label>
<div><input type="checkbox" name="list[0][water]">Water</div>
<div><input type="checkbox" name="list[0][powder]">Dry Powder</div>
<div><input type="checkbox" name="list[0][foam]">Foam</div>
<div><input type="checkbox" name="list[0][CO2]">CO2</div>
<div><input type="checkbox" name="list[0][chemical]">Chemical</div>
</div>
</fieldset>
<a href="#" id="add-row">+</a> Add Another Location
<?php include(ROOT_PATH . 'inc/captcha.php'); ?>
<button type="submit" class="button">Submit</button>
</form>
And the script
<script>
$(document).ready(function() {
var x = 0;
//Once remove button is clicked
$('#business-details').on('click', '.remove-field', function(e) {
e.preventDefault();
$(this).parent('.container').remove();
});
//Once add button is clicked
$('#add-row').click(function(e) {
e.preventDefault();
x++;
var list_fieldHTML = '<div class="container">' +
'<label>Fire Extinguisher Location</label>' +
'<input type="text" name="list['+x+'][location]" required>' +
'<label>Type</label>' +
'<div><input type="checkbox" name="list['+x+'][water]">Water</div>' +
'<div><input type="checkbox" name="list['+x+'][powder]">Dry Powder</div>' +
'<div><input type="checkbox" name="list['+x+'][foam]">Foam</div>' +
'<div><input type="checkbox" name="list['+x+'][CO2]">CO2</div>' +
'<div><input type="checkbox" name="list['+x+'][chemical]">Chemical</div>' +
'<br><a href="#" class="remove-field">-</a> Remove Location</div>';
$('#business-details').append(list_fieldHTML);
});
});
</script>
Many thanks
Michael