Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Only Visible Radio Buttons Are Required 1

Status
Not open for further replies.
mayamanako

mayamanako

Technical User
Aug 31, 2005
113
GB
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>
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
Hi tacohunter, can this still be achieved without using jquery? If yes, how? Thanks.
 
Upvote 0 Downvote
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
 
 https://files.engineering.com/getfile.aspx?folder=1f48cce7-679f-48cf-8a8d-d03da5d70364&file=checkbox-required.png
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
285
berkshirea
berkshirea
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
106
xwb
xwb
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
169
berkshirea
berkshirea
CoolBreeze007
  • Locked
  • Question
jquery ui radio buttons will not accept selected checkbox
Replies
1
Views
95
Offera
Offera
damipera
  • Locked
  • Question
Parent Child Radio Buttons 1
Replies
8
Views
287
damipera
damipera

Part and Inventory Search

Sponsor

Back
Top