Require text entry in HTML form
October 30, 2006 5:59 PM Subscribe
HTML Form filter: How can I require entry in a text field based on which radio button has been checked?
Disclaimer: I'm not a programmer. I need to create an HTML form with four groups of questions of the type:
Did you XXXX?
[radio button] Yes
[radio button] No
If "No" explain why not.
[text field]
I know how to create the form. How can I require the submitter to type their explanation in the text field when they click the "No" radio button?
I realize that I can't require the explanation to be not a string of nonsense characters. I just want to make sure that someone who either forgets to enter an explanation or clicks the wrong button gets a message reminding them to fill in the explanation.
Disclaimer: I'm not a programmer. I need to create an HTML form with four groups of questions of the type:
Did you XXXX?
[radio button] Yes
[radio button] No
If "No" explain why not.
[text field]
I know how to create the form. How can I require the submitter to type their explanation in the text field when they click the "No" radio button?
I realize that I can't require the explanation to be not a string of nonsense characters. I just want to make sure that someone who either forgets to enter an explanation or clicks the wrong button gets a message reminding them to fill in the explanation.
You can use javascript, although this method won't work for people who run browsers with javascript turned off. If you are willing to restrict your form to working with IE, you could use ActiveX controls, or .asp pages to effect the scripting. You could break up the logic of your page flow, and only serve the comment field (or a further checklist of explanations, if you want to force validate for database regularity) on a subsequent page, if the right radio button is first selected.
posted by paulsc at 6:18 PM on October 30, 2006
posted by paulsc at 6:18 PM on October 30, 2006
While the form requires some sort of client side scripting to enforce the form field to be filled in without submitting the page, you can certainly require that javascript be on in order to load the page. The requirements for the client may be such that this would be allowed, but I sort of doubt that they'd want to ostracise anyone.
The best way is to require the form field be filled in upon submission. If it isn't filled in, the form needs to be shown again with an error message at the top, and a notation as to which field(s) require values based on the answers provided.
posted by thanotopsis at 7:07 PM on October 30, 2006
The best way is to require the form field be filled in upon submission. If it isn't filled in, the form needs to be shown again with an error message at the top, and a notation as to which field(s) require values based on the answers provided.
posted by thanotopsis at 7:07 PM on October 30, 2006
Response by poster: This form will be on our company intranet, so everyone should be running IE6 with Javascript turned on, but we'll test to make sure.
Just to clarify, I do understand how to require that a specific field be filled in upon submission, and how to return an error message if a required field is left blank. What I'm having trouble with is conditionally requiring the field to be filled in, based on which of two radio buttons is selected.
posted by Joleta at 7:18 PM on October 30, 2006
Just to clarify, I do understand how to require that a specific field be filled in upon submission, and how to return an error message if a required field is left blank. What I'm having trouble with is conditionally requiring the field to be filled in, based on which of two radio buttons is selected.
posted by Joleta at 7:18 PM on October 30, 2006
Joleta, are you asking how to code the conditional part? Do you want to do this on the sever side, or on the client side (in the browser, with javascript)?
Either way, it sounds like you're looking for an
posted by MetaMonkey at 7:51 PM on October 30, 2006
Either way, it sounds like you're looking for an
if... else statement (unless I've completely misunderstood your clarification).posted by MetaMonkey at 7:51 PM on October 30, 2006
Something like this should work, although it's ugly.
posted by AmbroseChapel at 8:49 PM on October 30, 2006
<form onsubmit="if(this.didyou[1].checked && this.requiredifno.value =='){alert('please explain why not');return false;}">
did you?<br><input type="radio" name="didyou" value="yes"> yes<br><input type="radio" name="didyou" value="no"> no<br>
<textarea name="requiredifno"></textarea><br><input type="submit"></form>The better way to do it is with a function.posted by AmbroseChapel at 8:49 PM on October 30, 2006
Here's a function-based solution:
posted by AmbroseChapel at 8:58 PM on October 30, 2006
<html><head><script> function checkform(){ if(document.forms.myForm.didyou[1].checked && document.forms.myForm.requiredifno.value ==') { alert('please explain why not'); return false; }else{ return true; } }</script> <title>Untitled</title></head><body><form onsubmit="return checkform()" name="myForm">did you?<br><input type="radio" name="didyou" value="yes"> yes<br><input type="radio" name="didyou" value="no"> no<br><textarea name="requiredifno"></textarea><br><input type="submit"></form></body></html>posted by AmbroseChapel at 8:58 PM on October 30, 2006
There's a mistake in both those posts, but it's not my mistake. For some reason I'm not allowed to post two single quotes together?
Where it says
Why why why would AskMefi do that to me? Off to Talk...
posted by AmbroseChapel at 9:02 PM on October 30, 2006
Where it says
document.forms.myForm.requiredifno.value ==')that should be two single quotes, not one.
Why why why would AskMefi do that to me? Off to Talk...
posted by AmbroseChapel at 9:02 PM on October 30, 2006
Response by poster: Thanks so much AnbroseChapel. That looks exactly like what I need. Can I stack multiple if/else statements for several instances of didyou? (I have four questions in the form.) I see there's a [1] in the if statement and assume that the brackets would be taken off. Sorry, but I'm a content/usability web person and scripting isn't my thing.
posted by Joleta at 5:27 AM on October 31, 2006
posted by Joleta at 5:27 AM on October 31, 2006
The [1] identifies the "no" button. Yes would be [0].
You want multiple answers for 'didyou'? Yes, no, sometimes?
Or multiple didyous -- did you X: if not why not, did you Y: if not why not?
posted by AmbroseChapel at 12:48 PM on October 31, 2006
You want multiple answers for 'didyou'? Yes, no, sometimes?
Or multiple didyous -- did you X: if not why not, did you Y: if not why not?
posted by AmbroseChapel at 12:48 PM on October 31, 2006
Response by poster: AmbroseChapel: I have multiple didyous as you stated:
Did you X? yes/no/if no why not?
Did you Y? yes/no/if no why not?
Did you Z? yes/no/if no why not?
I can't tell you how much I appreciate your help.
posted by Joleta at 2:15 PM on October 31, 2006
Did you X? yes/no/if no why not?
Did you Y? yes/no/if no why not?
Did you Z? yes/no/if no why not?
I can't tell you how much I appreciate your help.
posted by Joleta at 2:15 PM on October 31, 2006
>I can't tell you how much I appreciate your help.
Yes you can, you can just click "best answer"!
If you have multiple 'didyou's the best way to approach it might be to call them "didyou1", "didyou2" and so on.
Give me a moment and I'll code something up.
posted by AmbroseChapel at 4:35 PM on October 31, 2006
Yes you can, you can just click "best answer"!
If you have multiple 'didyou's the best way to approach it might be to call them "didyou1", "didyou2" and so on.
Give me a moment and I'll code something up.
posted by AmbroseChapel at 4:35 PM on October 31, 2006
Best answer:
posted by AmbroseChapel at 4:47 PM on October 31, 2006 [1 favorite]
<html><head><script> function checkform(){ missinginfo = 0; for(x=1;x<4;x++){ currentRadio = eval('document.forms.myForm.didyou' + x + '[1]'); currentText = eval('document.forms.myForm.requiredifno' + x ); if(currentRadio.checked && currentText.value == '') { alert('please explain why not (question ' + x + ')'); missinginfo++; } } if(missinginfo > 0){ return false }else{ return true } }</script> <title>Untitled</title></head><body><form onsubmit="return checkform()" name="myForm">did you 1?<br> <input type="radio" name="didyou1" value="yes"> yes<br> <input type="radio" name="didyou1" value="no"> no<br> <textarea name="requiredifno1"></textarea><br>did you 2?<br> <input type="radio" name="didyou2" value="yes"> yes<br> <input type="radio" name="didyou2" value="no"> no<br> <textarea name="requiredifno2"></textarea><br>did you 3?<br> <input type="radio" name="didyou3" value="yes"> yes<br> <input type="radio" name="didyou3" value="no"> no<br> <textarea name="requiredifno3"></textarea><br><input type="submit"></form></body></html>posted by AmbroseChapel at 4:47 PM on October 31, 2006 [1 favorite]
That seems to have posted OK.
Now your function runs a little three-item loop, testing the didyou1, didyou2 and didyou3 radio buttons, and requiredifno1, requiredifno2 and requiredifno3 fields.
It puts up an error for every missing field, and doesn't submit the form if there have been any errors.
posted by AmbroseChapel at 4:49 PM on October 31, 2006
Now your function runs a little three-item loop, testing the didyou1, didyou2 and didyou3 radio buttons, and requiredifno1, requiredifno2 and requiredifno3 fields.
It puts up an error for every missing field, and doesn't submit the form if there have been any errors.
posted by AmbroseChapel at 4:49 PM on October 31, 2006
This thread is closed to new comments.
posted by IshmaelGraves at 6:16 PM on October 30, 2006