I am creating a form submission; some of the elements are required so are not. I have a check box in the form that will make additional elements visible if the box is checked. I am using html and javascript.
The problem I am currently having is that when I hit submit the elements that are invisible are still required (I will attach my code). I want to make it where the additional elements are required only when the box is checked.
I am not sure how to write the javascript or jquery to make this possible.
Any help is appreciated! Thank you.
function addPerson (box) {
var chboxs = document.getElementsByName("person");
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chboxs[i].checked){
vis = "block";
break;
}
}
document.getElementById(box).style.display = vis;
}
<html>
<form>
*Name: <input size=27 type="text" name="mfname" required><br>
*Email: <input size=27 type="text" name="mfname" required><br>
*Date: <input size=27 type="text" name="mfname" required><br>
<input type="checkbox" name="person" value="on" onclick="addPerson('person')">Add another person<br>
<div id="person" style="display:none">
*Name: <input size=27 type="text" name="mfname" required><br>
*Email: <input size=27 type="text" name="mfname" required><br>
*Date: <input size=27 type="text" name="mfname" required><br>
</div>
<button type="submit" value="Submit">Submit</button>
</form>
</html>
Aucun commentaire:
Enregistrer un commentaire