Show/hide, required fields

[marynorn]

Ever have a task of doom? I have one this week.

How do you set a text area to be a required field only if it is shown? I have several text areas in div boxes which only show up if someone clicks a 'no' radio button.


<form action="consult_ty.php" method="post" name="form1" id="form1" onSubmit="return checkForm(this)">
<p>1. *insert question*?</p>

<p>
<label>
<input name="1" type="radio" id="1_0" onclick="MM_showHideLayers('plainbox','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="1" type="radio" id="1_1" onclick="MM_showHideLayers('plainbox','','show')" value="No" />
No</label>
<label></label>
<br />
</p>

<div id="plainbox">
<p>1a. If not, why not?</p>

<p>
<textarea name="1a" id="1a" cols="60" rows="5"></textarea>
</p></div>

<p>---</p>

<p>2. *insert question*? </p>

<p>
<label>
<input name="2" type="radio" id="2_0" onclick="MM_showHideLayers('plainbox2','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="2" type="radio" id="2_1" onclick="MM_showHideLayers('plainbox2','','show')" value="No" />
No</label>
<br />
</p>

<div id="plainbox2">
<p>2a. If not, why not?</p>

<p>
<textarea name="2a" id="2a" cols="60" rows="5"></textarea>
</p></div>

<p>---</p>

<p>3. *insert question*? </p>

<p>
<label>
<input name="3" type="radio" id="3_0" onclick="MM_showHideLayers('plainbox3','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="3" type="radio" id="3_1" onclick="MM_showHideLayers('plainbox3','','show')" value="No" />
No</label>

</p>

<div id="plainbox3">
<p>3a. If not, why not?</p>

<p>
<textarea name="3a" id="3a" cols="60" rows="5"></textarea>
</p></div>

<p>---</p>

<p>4. *insert question*?</p>

<p>
<label>
<input name="4" type="radio" id="4_0" onclick="MM_showHideLayers('plainbox4','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="4" type="radio" id="4_1" onclick="MM_showHideLayers('plainbox4','','show')" value="No" />
No</label>
<br />
</p>

<div id="plainbox4">
<p>4a. If not, why not?</p>

<p>
<textarea name="4a" id="4a" cols="60" rows="5"></textarea>
</p></div>

<p>---</p>

<p>5. *insert question*? </p>

<p>
<label>
<input name="5" type="radio" id="5_0" onclick="MM_showHideLayers('plainbox5','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="5" type="radio" id="5_1" onclick="MM_showHideLayers('plainbox5','','show')" value="No" />
No</label>
<br />
</p>

<div id="plainbox5">
<p>5a. If not, why not?</p>

<p>
<textarea name="5a" id="5a" cols="60" rows="5"></textarea>
</p></div>
<p>
</p>

<p>---</p>

<p>6. *insert question*?
</p>

<p>
<label>
<input name="5d" type="radio" id="5d_0" onclick="MM_showHideLayers('plainbox6','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="5d" type="radio" id="5d_1" onclick="MM_showHideLayers('plainbox6','','show')" value="No" />
No</label>
</p>

<div id="plainbox6">
<p>6a. If not, why not?</p>

<p>
<textarea name="5e" id="5e" cols="60" rows="5"></textarea>

</p></div>

<p>---</p>

<p>7. Please use this space for any other comments . </p>

<p>
<textarea name="6" id="6" cols="60" rows="5"></textarea>
</p>

<p>---</p>

<p>9. Are you:</p>

<p>
<label>
<input type="radio" name="8" value="Tenant" id="8_0" />
tenant</label>
<br />
<label>
<input type="radio" name="8" value="Applicant" id="8_1" />
applicant</label>
<br />
<label>
<input type="radio" name="8" value="Housing professional" id="8_2" />
a housing professional</label>
<br />
<label>
<input type="radio" name="8" value="Other" id="8_3" />
Other - please state </label>
<input type="text" name="9a" id="9a" />
<br />
</p>

<p>---</p>

<p>If you want to be entered into our £100 Prize Draw, please fill in your details below.</p>

<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
</table>


<p>
<input name="submit" type="submit" id="submit" value="Submit" />
</p>
</form>

I swear, if my boss says 'Mary, could you just...?' one more time...

[Nile]

In php you check to see if the checkbox has a value, if it does, then in that if statement get the textarea data.

[jscheuer1]

You haven't shown us the code used to hide the textarea. But in a previous post in another thread, you used:


function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}

That will give (the way you have it setup) the division holding the textarea a style.visibility of visible if the no button is checked. You could make that part of your validation test. With this type of markup (from your post):




<div id="plainbox">
<p>1a. If not, why not?</p>

<p>
<textarea name="1a" id="1a" cols="60" rows="5"></textarea>
</p></div>

The division you are hiding is textarea 1a's parentNode.parentNode. So you could make your test be:


if (reference_to_textarea.value == '' && reference_to_textarea.parentNode.parentNode.style.visibility == 'visible')

Of course, reference_to_textarea in the above would need to be replaced with the actual reference, generally in some type of loop that encompasses all relevant textreas from the form and the test itself would need a consequence of some sort. Do you have any of the code for this particular validation test yet?