/    Sign up×
Community /Pin to ProfileBookmark

Require text if checkbox checked

Copy linkTweet thisAlerts:
May 05.2003

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 [url]http://www.wattscopy.com/services/service_new.htm[/url]

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

to post a comment
JavaScript

18 Comments(s) ↴

Copy linkTweet thisAlerts:
@doodlerMay 05.2003 — You may find this site useful: http://www.kdcgrohl.com

Once you go in there, go to javascripts section. Hope you find something useful.
Copy linkTweet thisAlerts:
@klloydauthorMay 05.2003 — 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
Copy linkTweet thisAlerts:
@klloydauthorMay 07.2003 — bump
Copy linkTweet thisAlerts:
@JonaMay 07.2003 — 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;
Copy linkTweet thisAlerts:
@CharlesMay 07.2003 — [font=monospace]<!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>[/font]
Copy linkTweet thisAlerts:
@klloydauthorMay 13.2003 — 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
Copy linkTweet thisAlerts:
@JonaMay 13.2003 — 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;
Copy linkTweet thisAlerts:
@klloydauthorMay 13.2003 — 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();">
Copy linkTweet thisAlerts:
@JonaMay 13.2003 — Try Charles's code. I think he got it.
Copy linkTweet thisAlerts:
@klloydauthorMay 13.2003 — 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!
Copy linkTweet thisAlerts:
@JonaMay 13.2003 — 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.
Copy linkTweet thisAlerts:
@klloydauthorMay 13.2003 — The test form is located at [URL=http://www.wattscopy.com/services/service_new.htm]http://www.wattscopy.com/services/service_new.htm[/URL]. 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.
Copy linkTweet thisAlerts:
@JonaMay 13.2003 — Oh... Wait a second... You're using checkboxes or radio buttons?
Copy linkTweet thisAlerts:
@klloydauthorMay 13.2003 — 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".
Copy linkTweet thisAlerts:
@khalidali63May 13.2003 — 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
Copy linkTweet thisAlerts:
@JonaMay 13.2003 — 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();">
Copy linkTweet thisAlerts:
@CharlesMay 13.2003 — [font=monospace]<!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>[/font]
Copy linkTweet thisAlerts:
@klloydauthorMay 13.2003 — Jona and Charles I can't thank you enough! It's all working perfectly! Thanks again!
×

Success!

Help @klloyd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...