×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Only Visible Radio Buttons Are Required

Only Visible Radio Buttons Are Required

Only Visible Radio Buttons Are Required

(OP)
Hi guys, I've got the code below. Please can you show me how I could make only visible radio buttons required/mandatory. If say, I chose 'Pros', every radio buttons under it should be required/mandatory and everything under 'Testr' are not required/mandatory since they not visible.

Thanks for any help.

CODE

<html>
<head>
<script type="text/javascript" language="javascript"><!--
function VF_refform(){
var theForm = document.forms['refform'];
var rFlg_TestTmr = false;
var rFlg_NonPainfulLrg = false;
var rFlg_PSALevels = false;
var rFlg_ProsFelsMal = false;
var rFlg_condition = false;
var errMsg = "";
var setfocus = "";

for(var r5=0;r5<theForm['TestTmr'].length;r5++){if(theForm['TestTmr'][r5].checked)rFlg_TestTmr=true;}
for(var r4=0;r4<theForm['NonPainfulLrg'].length;r4++){if(theForm['NonPainfulLrg'][r4].checked)rFlg_NonPainfulLrg=true;}
for(var r3=0;r3<theForm['PSALevels'].length;r3++){if(theForm['PSALevels'][r3].checked)rFlg_PSALevels=true;}
for(var r2=0;r2<theForm['ProsFelsMal'].length;r2++){if(theForm['ProsFelsMal'][r2].checked)rFlg_ProsFelsMal=true;}
for(var r0=0;r0<theForm['condition'].length;r0++){if(theForm['condition'][r0].checked)rFlg_condition=true;}


if (!rFlg_TestTmr){
errMsg = "Suspected\?";
setfocus = "['TestTmr'][0]";
}
if (!rFlg_NonPainfulLrg){
errMsg = "Non\-painful\?";
setfocus = "['NonPainfulLrg'][0]";
}
if (!rFlg_PSALevels){
errMsg = "PSA:  Yes\/No\?";
setfocus = "['PSALevels'][0]";
}
if (!rFlg_ProsFelsMal){
errMsg = "Pros feels:  Yes\/No\?";
setfocus = "['ProsFelsMal'][0]";
}
if (!rFlg_condition){
errMsg = "Please select either \'Pros\', \'Testr\'";
setfocus = "['condition'][0]";
}
if (errMsg != ""){
alert(errMsg);
eval("theForm" + setfocus + ".focus()");
}
else theForm.submit();
}//-->
</script>
</head>

<body>
<div>

  <form action="test.html" method='POST' name='refform' id="refform" onSubmit="VF_refform();return false;">
    <table border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td colspan="4"><h1>&nbsp;</h1></td>
    </tr>
  <tr>
    <td colspan="3">Pros
      <input name="condition" type="radio" value="1" id="ProsCheckbox" onClick="myFunction()" /></td>
    <td width="200">Testr
      <input name="condition" type="radio" value="4" id="TestrCheckbox" onClick="myFunction()" /></td>
    </tr>
 
  <tr>
    <td colspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
 </table>

<p>
<div id="Pros" style="display:none">
   <table border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td>&nbsp;</td>
    <td><strong>Yes</strong></td>
    <td><strong>No</strong></td>
  </tr>
  <tr>
    <td valign="top">Pros  feels</b></td>
    <td valign="middle"><input type="radio" name="ProsFelsMal" id="ProsFelsMal" value="1" /></td>
    <td valign="middle"><input type="radio" name="ProsFelsMal" id="ProsFelsMal" value="0" /></td>
  </tr>
  <tr>
    <td valign="top">PSA</td>
    <td valign="middle"><input type="radio" name="PSALevels" id="PSALevels" value="1" /></td>
    <td valign="middle"><input type="radio" name="PSALevels" id="PSALevels" value="0" /></td>
  </tr>
</table>
<p>&nbsp;</p>

</div>
 
 

<!--Testr-->

<div id="Testr" style="display:none">

 <table border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td>&nbsp;</td>
    <td><strong>Yes</strong></td>
    <td><strong>No</strong></td>
  </tr>
  <tr>
    <td valign="top">Non-pain</td>
    <td valign="middle"><input type="radio" name="NonPainfulLrg" id="NonPainfulLrg" value="1" /></td>
    <td valign="middle"><input type="radio" name="NonPainfulLrg" id="NonPainfulLrg" value="0" /></td>
  </tr>
  <tr>
    <td valign="top">Suspected</td>
    <td valign="middle"><input type="radio" name="TestTmr" id="TestTmr" value="1" /></td>
    <td valign="middle"><input type="radio" name="TestTmr" id="TestTmr" value="0" /></td>
  </tr>
</table>
  <p>&nbsp;</p>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td valign="top" bgcolor="#E7F3FF"> </p></td>
    </tr>
  </table>
</div>
   <p>
   
   <br />
      <input type="submit" value="Submit">
  </form>

</div>
</body>

<script language="javascript">
function myFunction() {
    var checkBox = document.getElementById("ProsCheckbox");
 var text = document.getElementById("Pros");
 var checkBox4 = document.getElementById("TestrCheckbox");
 var text4 = document.getElementById("Testr");

    if (checkBox.checked == true)
 {
  text.style.display = "block";
 }
 else
 {
 text.style.display = "none";
 document.getElementById("ProsFelsMal").checked = false;
 document.getElementById("PSALevels").checked = false;
 }
 
 
  if (checkBox4.checked == true)
 {
  text4.style.display = "block";
 }
 else
 {
 text4.style.display = "none";
 document.getElementById("NonPainfulLrg").checked = false;
 document.getElementById("TestTmr").checked = false;
 }
 
}
</script>

</html> 

RE: Only Visible Radio Buttons Are Required

I would recommend you use the required function. You could use jquery to modify the child attributes to include required. Something along the lines of the below if clause. The purpose would be to check if Pros is set to true, and if so, then add the required attribute to the NonPainfullLrg. You would have to add logic to remove the required field if changed to false.

if (document.getElementById("Pros").checked = true) {
$("NonPainfullLrg").attr("required", true);
}


Result:

<td valign="middle"><input type="radio" name="NonPainfulLrg" id="NonPainfulLrg" value="1" required></td>

Chris AKA TacoHunter

RE: Only Visible Radio Buttons Are Required

(OP)
Hi tacohunter, can this still be achieved without using jquery? If yes, how? Thanks.

RE: Only Visible Radio Buttons Are Required

Yes, absolutely. Below is tested code, but not 100% complete. Please have a look at the screenshot which shows what happens if you choose only 1 option and try to click submit.

<html>
<head>
<script type="text/javascript" language="javascript"><!--
function VF_refform(){
var theForm = document.forms['refform'];
var rFlg_TestTmr = false;
var rFlg_NonPainfulLrg = false;
var rFlg_PSALevels = false;
var rFlg_ProsFelsMal = false;
var rFlg_condition = false;
var errMsg = "";
var setfocus = "";

for(var r5=0;r5<theForm['TestTmr'].length;r5++){if(theForm['TestTmr'][r5].checked)rFlg_TestTmr=true;}
for(var r4=0;r4<theForm['NonPainfulLrg'].length;r4++){if(theForm['NonPainfulLrg'][r4].checked)rFlg_NonPainfulLrg=true;}
for(var r3=0;r3<theForm['PSALevels'].length;r3++){if(theForm['PSALevels'][r3].checked)rFlg_PSALevels=true;}
for(var r2=0;r2<theForm['ProsFelsMal'].length;r2++){if(theForm['ProsFelsMal'][r2].checked)rFlg_ProsFelsMal=true;}
for(var r0=0;r0<theForm['condition'].length;r0++){if(theForm['condition'][r0].checked)rFlg_condition=true;}


if (!rFlg_TestTmr){
errMsg = "Suspected\?";
setfocus = "['TestTmr'][0]";
}
if (!rFlg_NonPainfulLrg){
errMsg = "Non\-painful\?";
setfocus = "['NonPainfulLrg'][0]";
}
if (!rFlg_PSALevels){
errMsg = "PSA: Yes\/No\?";
setfocus = "['PSALevels'][0]";
}
if (!rFlg_ProsFelsMal){
errMsg = "Pros feels: Yes\/No\?";
setfocus = "['ProsFelsMal'][0]";
}
if (!rFlg_condition){
errMsg = "Please select either \'Pros\', \'Testr\'";
setfocus = "['condition'][0]";
}
if (errMsg != ""){
alert(errMsg);
eval("theForm" + setfocus + ".focus()");
}
else theForm.submit();
}//-->
</script>
</head>

<body>
<div>

<form action="test.html" method='POST' name='refform' id="refform" onSubmit="VF_refform();return false;">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="4"><h1>&nbsp;</h1></td>
</tr>
<tr>
<td colspan="3">Pros
<input name="condition" type="radio" value="1" id="ProsCheckbox" onClick="myFunction()" /></td>
<td width="200">Testr
<input name="condition" type="radio" value="4" id="TestrCheckbox" onClick="myFunction()" /></td>
</tr>

<tr>
<td colspan="3">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

<p>
<div id="Pros" style="display:none">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td>&nbsp;</td>
<td><strong>Yes</strong></td>
<td><strong>No</strong></td>
</tr>
<tr>
<td valign="top">Pros feels</b></td>
<td valign="middle"><input type="radio" name="ProsFelsMal" id="ProsFelsMal" value="1" /></td>
<td valign="middle"><input type="radio" name="ProsFelsMal" id="ProsFelsMal" value="0" /></td>
</tr>
<tr>
<td valign="top">PSA</td>
<td valign="middle"><input type="radio" name="PSALevels" id="PSALevels" value="1" /></td>
<td valign="middle"><input type="radio" name="PSALevels" id="PSALevels" value="0" /></td>
</tr>
</table>
<p>&nbsp;</p>

</div>



<!--Testr-->

<div id="Testr" style="display:none">

<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td>&nbsp;</td>
<td><strong>Yes</strong></td>
<td><strong>No</strong></td>
</tr>
<tr>
<td valign="top">Non-pain</td>
<td valign="middle"><input type="radio" name="NonPainfulLrg" id="NonPainfulLrg" value="1" /></td>
<td valign="middle"><input type="radio" name="NonPainfulLrg" id="NonPainfulLrg" value="0" /></td>
</tr>
<tr>
<td valign="top">Suspected</td>
<td valign="middle"><input type="radio" name="TestTmr" id="TestTmr" value="1" /></td>
<td valign="middle"><input type="radio" name="TestTmr" id="TestTmr" value="0" /></td>
</tr>
</table>
<p>&nbsp;</p>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" bgcolor="#E7F3FF"> </p></td>
</tr>
</table>
</div>
<p>

<br />
<input type="submit" value="Submit">
</form>

</div>
</body>

<script language="javascript">
function myFunction() {
var checkBox = document.getElementById("ProsCheckbox");
var text = document.getElementById("Pros");
var checkBox4 = document.getElementById("TestrCheckbox");
var text4 = document.getElementById("Testr");

if (checkBox.checked == true)
{
text.style.display = "block";
checkBox.required = true;
}
else
{
text.style.display = "none";
document.getElementById("ProsFelsMal").checked = false;
document.getElementById("PSALevels").checked = false;
document.getElementById("ProsFelsMal").required = true;
document.getElementById("PSALevels").required = true;

}


if (checkBox4.checked == true)
{
text4.style.display = "block";
checkBox4.required = true;
}
else
{
text4.style.display = "none";
document.getElementById("NonPainfulLrg").checked = false;
//add required
document.getElementById("NonPainfulLrg").required = true;
document.getElementById("TestTmr").checked = false;
//add required
document.getElementById("TestTmr").required = true;

checkBox4.required = false;
}

}
</script>

</html>

Chris AKA TacoHunter

RE: Only Visible Radio Buttons Are Required

(OP)
Thanks very much Tacohunter!

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close