Once Checkbox is clicked on, form fields then become required?
Question
I am using a checkbox and it shows/hides fields upon clicking the checkbox. I would like to make my fields required to input information only when I click on the checkbox and the fields are showing. When the fields are hidden, and the checkbox is not clicked on, then those fields are not required to input information. How do I make this happen. This is the code that I am using;
<script type="text/javascript" language="JavaScript">
function HidePart(d) {
document.getElementById(d).style.display = "none";
}
function ShowPart(d) {
document.getElementById(d).style.display = "block";
}
function CheckboxChecked(b,d)
{
if(b) {
ShowPart(d);
}
else {
HidePart(d);
}
}
</script>
<input type="checkbox" name="Loan2" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv2')"> Add New Loan
<div id="checkboxdiv2" style="display:none">
Form Fields for input information
</div>
If this helps, this is my website: https://www.slfpusa.org/testing-page/ . When I click on "Add New Loan", it produces more fields that I would like to only be required once they are showing. I hope my question is clear, and I hope to get some help in tweaking this javascript code to function to the way I need it to function. Any help would be much appreciated!
2 answers
solution1
0 2014-12-28 03:56:06
Put your form validation code into an extra if statement. Try something like this:
if (document.loan2.checked) {
// validate the input
} else {
return false;
}
solution2
0 2014-12-28 05:57:10
I tried to make this as clear as possible for you. Just read the comments and all should be well.
<html>
<head>
<!--Add this JQuery library to make this a whole lot easier for you-->
<!--This library provides a more effecient way of writing javascript-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<form>
<input id ="checkboxId" type ="checkbox">Add new Loan</input><br>
<label style="display:none">Enter value:</label>
<input id="textboxId" style="display:none" type ="text"/>
<button style="display:none" type ="submit">Click Me</button>
</form>
<script>
//In between your script tags add the following JQuery code
//This will check if the check box is clicked
$('#checkboxId').click(function () {
//if checkbox is clicked then make the textbox required
if ($('#checkboxId').prop('checked'))
{
$("#textboxId").prop('required',true);
$("#textboxId").slideDown();
$("label").slideDown();
$("button").slideDown();
} else {
//else do not make the textbox required
$("#textboxId").prop('required',false);
$("#textboxId").slideUp();
$("label").slideUp();
$("button").slideUp();
}
});
</script>
</body>
</html>
If you have any questions let me know. Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.