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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

re-enable disabled Radio Buttons 1

Status
Not open for further replies.
Billybonga

Billybonga

IS-IT--Management
Jun 22, 2002
72
GB
I have a form of 3x3 radio buttons.
I want to select button Column1/Row1 and have all other buttons in Column1 disabled and all other buttons left unchecked.

I have come up with the following:

Code: 
<SCRIPT LANGUAGE="JavaScript">

function Disab (val) {
if(val=="11") 
{form1.r1_1.disabled=false;
form1.r2_1.disabled=true; form1.r3_1.disabled=true;
form1.r1_2.checked=false;form1.r1_3.checked=false}
if(val=="12") 
{form1.r1_2.disabled=false;
form1.r2_2.disabled=true; form1.r3_2.disabled=true;
form1.r1_1.checked=false;form1.r1_3.checked=false}
if(val=="13") 
{form1.r1_3.disabled=false;
form1.r2_3.disabled=true; form1.r3_3.disabled=true;
form1.r1_1.checked=false;form1.r1_2.checked=false}
if(val=="21") 
{form1.r2_1.disabled=false;
form1.r1_1.disabled=true; form1.r3_1.disabled=true;
form1.r2_2.checked=false;form1.r2_3.checked=false}
if(val=="3") 
{form1.r3_1.disabled=false;
form1.r1_1.disabled=true; form1.r2_1.disabled=true;
form1.r3_2.checked=false;form1.r3_3.checked=false}
}
</SCRIPT>

html
Code: 
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form name="form1" method="post" action="">
  <p>
  <input type="radio" name="r1_1" value="3" onClick="Disab (11)">
  <input type="radio" name="r1_2" value="2" onClick="Disab (12)">
  <input type="radio" name="r1_3" value="1" onClick="Disab (13)">
  <BR>
  <BR>
  <input type="radio" name="r2_1" value="3" onClick="Disab (2)">
  <input type="radio" name="r2_2" value="2">
  <input type="radio" name="r2_3" value="1">
</p>
  <p>
    <input type="radio" name="r3_1" value="3" onClick="Disab (3)">
    <input type="radio" name="r3_2" value="2" disabled>
    <input type="radio" name="r3_3" value="1" disabled>
</p>
</form>

</body>
</html>

Things are working correctly i.e. I select R1_1, then R2_1 and R3_1 become disabled, R1_2 and R1_3 become unchecked (if they had already been checked.)

Now if I select R1_2 it unchecks R1_1 and R1_2 and disables R2_2 and R3_2 but yet R2_1 and R3_1 still remain disabled??

Play around with the above code and you will see what I mean - now although I code programme all these possibilities then it could be vast and head=aching -- is there any way to make this easier ??
 
Sort by date Sort by votes
is it possible to determine if a value from one group of radio buttons equals the same value selected from another group of radio buttons ?

something like

if form1.group1.value = form1.group2.value
then
POPUP window "You Can't Select the same value for two users"

what i'm trying to do is create an opionion poll sending results to a database - and it's driving me crazy.

If you have 3 candidates, where you select preference votes in order of 1,2,3
You can't give 2 canditates the same vote nor can you give 1 candidate 2 votes i.e. selecting 1,2

Each candidate should be linked to 1 group of buttons but the value selected in that group shouldd not equal the same value selected in another candidates group

please help ..... i'm young and it;s killing me

 
Upvote 0 Downvote
please help ..... i'm young and it;s killing me
Click to expand...

Then why were you so quick to dismiss the code I provided in thread216-1311435? It did what you initially asked for. If you wanted the radio buttons to not be populated with default values, why not amend my code to make it work like that instead of starting over from scratch? It only took like 3 changes to get it to work correctly. I thought for sure you would amend the code to fit your needs, but you're still asking for help after 2 days.....

How were you expecting the code above to work by disabling the user's options? How are they supposed to select an option 3 for John when previously selecting 3 for Tom disabled 3 as an option for John?

Here is my original solution amended to not show the buttons initially checked. Please, next time do not be so hasty to dismiss someone's suggestion after they have freely put in the time to help you out by providing an example

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

var ppl = ["", "", ""];

function resetList(obj) {
   thisName = obj.name;
   thisNum = parseInt(obj.value, 10);
   var arrIndex = 0;
   for (var i = 0; i < 3; i++) {
      if (thisName == ppl[i]) {
         arrIndex = i;
      }
   }
   if (ppl[thisNum-1].length) {
      document.forms["frm"].elements[ppl[thisNum - 1]][arrIndex].checked = true;
   }
   ppl[arrIndex] = ppl[thisNum - 1];
   ppl[thisNum - 1] = thisName;
}

</script>

<style type="text/css"></style>
</head>
<body>
<form id="frm" action="" method="post" onsubmit="">
   <div id="divTom">
      <span>Tom</span>
      <input type="radio" name="radioTom" value="1" onclick="resetList(this)" />1
      <input type="radio" name="radioTom" value="2" onclick="resetList(this)" />2
      <input type="radio" name="radioTom" value="3" onclick="resetList(this)" />3
   </div>
   <div id="divMary">
      <span>Mary</span>
      <input type="radio" name="radioMary" value="1" onclick="resetList(this)" />1
      <input type="radio" name="radioMary" value="2" onclick="resetList(this)" />2
      <input type="radio" name="radioMary" value="3" onclick="resetList(this)" />3
   </div>
   <div id="divJohn">
      <span>John</span>
      <input type="radio" name="radioJohn" value="1" onclick="resetList(this)" />1
      <input type="radio" name="radioJohn" value="2" onclick="resetList(this)" />2
      <input type="radio" name="radioJohn" value="3" onclick="resetList(this)" />3
   </div>
</form>
</body>
</html>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Hi Kaht,

I did thank you, and thank you again for your help, suggestions and code in this and the last post.

I did not dismiss your last code/suggestions but wanted to investigate other lines and possibilities of what I am trying to do.

Your code does certainly work and would suffice and I am certainly grateful for your efforts in giving this code but why I submitted this post of disabling the radio buttons was so see if I could make the system easier for users but highlighting / warning them of selecting the same values for 2 different users.

Reason being:

If a user genuinely thinks they can give two people the same vote, selects tom = 1, selects mary = 1 - which your code then reverses/changes tom to another value - they may not see this change and then when they submit they may not understand why Tom got 3 for example when they first selected him to have 1 etc - if I warn them "you can't set the same value for two candidates" then then can decide - Ok I prefer Tom more so Mary gets 2 instead etc ....

I haven't dismissed your code for the least but in fact i'm trying different methods to learn from - I have only little javascript programming experience (same with most languages) so I'm trying to learn my hacking bits of code together - sorry if I caused offense.

Billybong
 
Upvote 0 Downvote
I've learnt a lot on Javascript these last few days and thanks goes to Kaht for giving me the starting points I managed to learn alot about Javascript and hacked together a script myself - which I'm quite proud of as it's my first real attempt.

Here's the code for anyone interested in doing a similar project:

Javascript Code:
Code: 
<SCRIPT LANGUAGE="JavaScript">
function submitcheck() {
    var o1 = 0;
    var o2 = 0;
	var o3 = 0;
    for (var i=0;i<3;i++) {
        if (eval("document.epollForm.q" + i + "[0].checked") == true)
            o1++;
        if (eval("document.epollForm.q" + i + "[1].checked") == true)
            o2++;
	    if (eval("document.epollForm.q" + i + "[2].checked") == true)
            o3++;
    }  
if (o1>1) 
{
  alert("You cannot give first preference to multiple candidates")
}
else if (o2>1)
{
  alert("You cannot give second preference to multiple candidates")
}
else if (o3>1)
{
  alert("You cannot give third preference to multiple candidates")
}
else
{
  alert("it works !!! - Next we'll be entering into database")
}
}
</SCRIPT>

HTML FORM:

Code: 
<FORM NAME="epollForm">
  <table width="56%"  border="0" cellspacing="0" cellpadding="0">
    <tr bgcolor="#FFFF99">
      <td width="38%"><div align="center"><strong>Name</strong></div></td>
      <td width="22%"><div align="center"><strong>1st Preference </strong></div></td>
      <td width="20%"><div align="center"><strong>2nd Preference</strong></div></td>
      <td width="20%"><div align="center"><strong>3rd Preference </strong></div></td>
    </tr>
    <tr>
      <td>Candidate 1 </td>
      <td><div align="center">
        <input name="q0" type="RADIO" value="3">
      </div></td>
      <td><div align="center">
        <input name="q0" type="RADIO" value="2">
      </div></td>
      <td><div align="center">
        <input name="q0" type="RADIO" value="1">
      </div></td>
    </tr>
    <tr>
      <td>Candidate 2 </td>
      <td><div align="center">
        <input name="q1" type="RADIO" value="3">
      </div></td>
      <td><div align="center">
        <input name="q1" type="RADIO" value="2">
      </div></td>
      <td><div align="center">
        <input name="q1" type="RADIO" value="1">
      </div></td>
    </tr>
    <tr>
      <td>Candidate 3 </td>
      <td><div align="center">
        <input name="q2" type="RADIO" value="3">
      </div></td>
      <td><div align="center">
        <input name="q2" type="RADIO" value="2">
      </div></td>
      <td><div align="center">
        <input name="q2" type="RADIO" value="1">
      </div></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><div align="center">
      </div></td>
      <td><div align="center">
      </div></td>
      <td><div align="center">
      </div></td>
    </tr>
  </table>
  <p>	
    <INPUT TYPE="BUTTON" onClick="submitcheck()" VALUE="Submit">
  </p>
  </FORM>

Ok it doesn't disable the buttons - but I got my end result - warn the user that they have selected the same value for 2 candidates.

I hope someone finds it useful

Billybonga
 
Upvote 0 Downvote
2 things you might want to do to help clean up your code:

1) Remove the eval commands from your code - they are unnecessary, and are processor hogs.

2) When checking for equality to the boolean value true, you do not need to supply the comparison operator.

For example,
Code: 
var a = true;
if (a == true) alert("it is true");
is the same as
Code: 
var a = true;
if (a) alert("it is true");

Here's your code with the applied changes:
Code: 
    for (var i=0;i<3;i++) {
        if (document.epollForm.elements["q" + i][0].checked) 
            o1++;
        if (document.epollForm.elements["q" + i][1].checked) 
            o2++;
        if (document.epollForm.elements["q" + i][2].checked) 
            o3++;
    }

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
cheers kaht -
I'll take your word re: evals being processor hogs .. last thing I would think of

Your code certainly has shorted it up

Thanks for your help

Billybong
 
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
301
berkshirea
berkshirea
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
117
mayamanako
mayamanako
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
108
xwb
xwb
dvannoy
  • Locked
  • Question
Enable ASP button
Replies
1
Views
98
feherke
feherke
zydjohn
  • Locked
  • Question
How to load JavaScript files to enable DOM element click
Replies
1
Views
111
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top