Tags:




Require text entry in HTML form
October 30, 2006 5:59 PM   RSS feed for this thread 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.
posted by Joleta to computers & internet (14 comments total) 2 users marked this as a favorite
Peter-Paul Koch's Usable Forms script is intended to solve precisely this problem. It seems to be very well-documented.
posted by IshmaelGraves at 6:16 PM on October 30, 2006


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


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


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


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 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.

<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:
<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
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


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


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


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


>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 


<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


« Older California Rental Laws - terms...   |   Box Cutters: I get lots of box... Newer »
This thread is closed to new comments.