Click to See Complete Forum and Search --> : Require text if checkbox checked
klloyd
05-05-2003, 02:47 PM
Any help with this is greatly appreciated: I need it to require text be entered into the textbox (name=Additional_Info) if the checkbox (name=Problem value=Other) is checked. I keep getting errors and don`t know what is causing the hang up. If you would like to see how the whole page works go to http://www.wattscopy.com/services/service_new.htm
Below is my script so far:
<script language="javascript">
<!--
function CheckForm() {
// require at least one checkbox be selected
var checkboxSelected = false;
for (i = 0; i < Service.Problem.length; i++)
{
if (Service.Problem.checked)
checkboxSelected = true;
}
if (!checkboxSelected)
{
// require text if "Other" checkbox checked
alert("Please select a checkbox to describe the problem you are
experiencing. If your issue is not listed please check \"Other\" and
describe in the text box.");
return (false);
}
if (document.Service.Problem.value == "Other") {
if (isempty(Additional_Info.value)) {
alert("Please enter your comments here.");
document.Service.Additional_Info.focus();
}
}
//-->
</script>
Kevin
doodler
05-05-2003, 03:27 PM
You may find this site useful: http://www.kdcgrohl.com
Once you go in there, go to javascripts section. Hope you find something useful.
klloyd
05-05-2003, 04:35 PM
Thanks for the assistance, I added it to my Favorites there are some good things there. But unfortunately none were useful in this case. Still searching....
Kevin
klloyd
05-07-2003, 03:51 PM
bump
if(document.Service.Problem.checked){
if(document.Service.Additional_info.value.length==0||document.Service.Additional_info.value==" "){ alert("You must either uncheck the box, or put something in the textarea."); document.Service.Additional_info.focus(); return false;}
}
return true;
Charles
05-07-2003, 04:24 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function validate (f) {
for (j=0; j<f.problem.length; j++) {if (f.problem[j].checked) var radio = true;}
if (!radio) {alert ('What seems to be the problem?'); return false};
if (f.problem[f.problem.length-1].checked && /^\s*$/.test(f.text.value)) {alert('Please clarify the problem.'); f.text.focus(); return false};
}
// -->
</script>
<form action="" onsubmit="return validate(this)">
<div>
<label><input type="radio" name="problem" value="fee">Fee</label><br>
<label><input type="radio" name="problem">Fie</label><br>
<label><input type="radio" name="problem">Foe</label><br>
<label><input type="radio" name="problem">Fum</label><br>
<label><input type="radio" name="problem" onclick="document.forms[0].text.focus()">Other</label><br>
<textarea rows="5" cols="40" name="text"></textarea><br>
<input type="submit">
</div>
</form>
klloyd
05-13-2003, 08:37 AM
Jona,
Your script looks close to what I'm trying to do. The only problem I see is the script has to distinguish the checkbox named "Problem" whose value is "Other" because there are several checkboxes named "Problem". They have to be checkboxes not radio buttons because it needs to be possible to check several at the same time. Bottom line is: the script needs to know that if checkbox named "Problem" with the value "Other" is checked then there must be text entered into the textbox named "Additional_Info".
Thank you!
Kevin
I think Charles nailed it.
if(document.Service.Additional_info.value.length==0 || document.Service.Additional_info.value==" " && document.Service.Problem.value=="Other"){ alert("You must either uncheck the box, or put something in the textarea."); document.Service.Additional_info.focus(); return false;}
return true;
klloyd
05-13-2003, 11:16 AM
Sorry I'm not the greatest at this yet and I was a little thrown off with the radio buttons, didn't know how to change it to refer to checkboxes for my form. I tried your newer script Jona and it still does not alert or stop the data from being sent. What am I missing here?? Here's what I have now:
<script language="javascript">
<!--
function CheckForm() {
// require at least one checkbox be selected
var checkboxSelected = false;
for (i = 0; i < Service.Problem.length; i++)
{
if (Service.Problem[i].checked)
checkboxSelected = true;
}
if (!checkboxSelected)
{
alert("Please select a checkbox to describe the problem you are experiencing. If your issue is not listed please check \"Other\" and describe in the text box.");
return (false);
}
// require text if "Other" checkbox checked
if(document.Service.Additional_info.value.length==0 || document.Service.Additional_info.value==" " && document.Service.Problem.value=="Other"){ alert("You must either uncheck the box, or put something in the textarea."); document.Service.Additional_info.focus(); return false;}
return true;
}
//-->
</script>
<form onSubmit="return CheckForm();">
Try Charles's code. I think he got it.
klloyd
05-13-2003, 11:34 AM
I'm trying Charles' now but I'm lost on the references to radio buttons...I have no radio buttons in the form. What should I change about the parts where his script refers to them? I greatly appreciate you taking time to help by the way!
I just tested it. His code works perfectly for what you want. Show your form and I can put it together for you, but I think you should be able to take it from here.
klloyd
05-13-2003, 11:50 AM
The test form is located at http://www.wattscopy.com/services/service_new.htm. If you need to try submitting it, go ahead because I have the emails redirected to my email instead of our service dept so they will be disregarded. I tried Charles' script with no changes too and there was no alert.
Oh... Wait a second... You're using checkboxes or radio buttons?
klloyd
05-13-2003, 11:57 AM
Only checkboxes, no radio buttons. That's why I was thrown off by Charles' script. There are several checkboxes with the name "Problem" and it has to be that way because it's possible for customers to experience more than one problem. So the script has to realize that if the checkbox with the VALUE "Other" is checked then there must be text in the textbox named "Additional_Info".
khalidali63
05-13-2003, 11:59 AM
here take a look at this script
I think it addresses what you have in mind..
http://68.145.35.86/skills/javascripts/ForceInputCheckboxSelected.html
OK, in that case, try...
<script language="javascript">
<!--
function CheckForm() {
// require at least one checkbox be selected
var checkboxSelected = false;
for (i = 0; i < Service.Problem.length; i++)
{
if (Service.Problem[i].checked)
checkboxSelected = true;
}
if (!checkboxSelected)
{
alert("Please select a checkbox to describe the problem you are experiencing. If your issue is not listed please check \"Other\" and describe in the text box.");
return (false);
if(document.Service.Additional_info.value.length==0 || document.Service.Additional_info.value==" " && document.Service.Problem.value=="Other"){ alert("You must either uncheck the box, or put something in the textarea."); document.Service.Additional_info.focus(); return false;}
return true;
} }
//-->
</script>
<form onSubmit="return CheckForm();">
Charles
05-13-2003, 12:42 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function validate (f) {
for (j=0; j<f.problem.length; j++) {if (f.problem[j].checked) var checked = true;}
if (!checked) {alert ('What seems to be the problem?'); return false};
if (f.problem[f.problem.length-1].checked && /^\s*$/.test(f.text.value)) {alert('Please clarify the problem.'); f.text.focus(); return false};
}
// -->
</script>
<form action="" onsubmit="return validate(this)">
<div>
<label><input type="checkbox" name="problem" value="fee">Fee</label><br>
<label><input type="checkbox" name="problem">Fie</label><br>
<label><input type="checkbox" name="problem">Foe</label><br>
<label><input type="checkbox" name="problem">Fum</label><br>
<label><input type="checkbox" name="problem" onclick="document.forms[0].text.focus()">Other</label><br>
<textarea rows="5" cols="40" name="text"></textarea><br>
<input type="submit">
</div>
</form>
klloyd
05-13-2003, 04:27 PM
Jona and Charles I can't thank you enough! It's all working perfectly! Thanks again!