selection problem

sethupathy · June 15, 2007

hi guys i want to able to make a question with a rating, i want the user to rate from 1 to 3

for each choise but if he as selected 1 i dont want him to be able to select 1 again

for the other 2 question ? using radio button

Pls help

choice 1 1 2 3

choise 2 1 2 3

choise 3 1 2 3

atomicrabbit · June 15, 2007

THat will require you using javascript to dynamically change the disabled values of the other choices when you make a change to the first.

THis should generally do what you want:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function update2(rd_value) {
var choice2=document.choices.choice2;
var choice3=document.choices.choice3;

// enabled all of choice2 first
choice2[0].disabled=false;
choice2[1].disabled=false;
choice2[2].disabled=false;

// uncheck all of choice2 & choice3
choice2[0].checked=false;
choice2[1].checked=false;
choice2[2].checked=false;
choice3[0].checked=false;
choice3[1].checked=false;
choice3[2].checked=false;

// make sure all of choice3 is disabled
choice3[0].disabled=true;
choice3[1].disabled=true;
choice3[2].disabled=true;

// disable choice2 radio button that is selected in choice1
choice2[rd_value-1].disabled = true;

}
function update3(rd_value) {
var choice1=this.document.choices.choice1;
var choice3=this.document.choices.choice3;

// enabled all of choice3 first
choice3[0].disabled=false;
choice3[1].disabled=false;
choice3[2].disabled=false;

// uncheck all of choice2
choice3[0].checked=false;
choice3[1].checked=false;
choice3[2].checked=false;

// disable choice2 radio button that is selected in choice1
choice3[rd_value-1].disabled = true;

// find the item in choice1 that is checked so you can disabled it in choice3
for (var i=0; i < choice1.length; i++) {
	if (choice1[i].checked) {
		choice3[i].disabled=true;
		break;
	}
}


}
</script>
</head>

<body>
<form name="choices" >
Choice 1 
<input name="choice1" type="radio" value="1" onClick="update2(this.value)" />
<input name="choice1" type="radio" value="2" onClick="update2(this.value)" />
<input name="choice1" type="radio" value="3" onClick="update2(this.value)" /><br />

Choice 2 
<input name="choice2" type="radio" value="1" DISABLED onClick="update3(this.value);" />
<input name="choice2" type="radio" value="2" DISABLED onClick="update3(this.value);" />
<input name="choice2" type="radio" value="3" DISABLED onClick="update3(this.value);" /><br />

Choice 3 
<input name="choice3" type="radio" value="1" DISABLED />
<input name="choice3" type="radio" value="2" DISABLED />
<input name="choice3" type="radio" value="3" DISABLED />
</form>
</body>
</html>

You can also do the same with listboxes although it's a little more complicated.

Psycho · June 15, 2007

i had already started on this when I saw atomicrabbit had responded. but, I think this may be a little more efficinet and flexible, so I will post anyway:

<html>

<head>
  <script type="text/javascript">

    function disableFields() {

      field1Obj = document.getElementsByName('choice1');
      field2Obj = document.getElementsByName('choice2');
      field3Obj = document.getElementsByName('choice3');

      //Enable all options for fields 2 and 3
      for (i=0; i<field2Obj.length; i++) { field2Obj[i].disabled = false; }
      for (i=0; i<field3Obj.length; i++) { field3Obj[i].disabled = false; }

      //Find checked value for field 1 and
      //disable same value for fields 2 and 3
      disabledValue = false;
      for (i=0; i<field1Obj.length; i++) {
        if (field1Obj[i].checked) {
          disabledValue = field1Obj[i].value;
          disableOption(field2Obj, disabledValue);
          disableOption(field3Obj, disabledValue);
        }
      }

      //Find checked value for field 2 and
      //disable same value for field 3
      for (i=0; i<field2Obj.length; i++) {
        if (field2Obj[i].checked) {
          disabledValue = field2Obj[i].value;
          disableOption(field3Obj, disabledValue);
        }
      }

      return;
    }

    function disableOption(fieldObj, disabledValues) {

      //Iterate through each option and
      //disable if same as diabledValue
      for (i=0; i<fieldObj.length; i++) {
        if (fieldObj[i].value == disabledValues) {
          fieldObj[i].checked = false;
          fieldObj[i].disabled = true;
        }
      }
      return;
    }

  </script>
</head>

<body onload="disableFields();">

Choice 1:
<input type="radio" name="choice1" value="1" onclick="disableFields();"> 1
<input type="radio" name="choice1" value="2" onclick="disableFields();"> 2
<input type="radio" name="choice1" value="3" onclick="disableFields();"> 3
<br><br>

Choice 2:
<input type="radio" name="choice2" value="1" onclick="disableFields();"> 1
<input type="radio" name="choice2" value="2" onclick="disableFields();"> 2
<input type="radio" name="choice2" value="3" onclick="disableFields();"> 3
<br><br>

Choice 3:
<input type="radio" name="choice3" value="1"> 1
<input type="radio" name="choice3" value="2"> 2
<input type="radio" name="choice3" value="3"> 3
<br><br>




</body>

</html>

atomicrabbit · June 18, 2007

i agree it IS more efficient than mine.

Psycho · June 18, 2007

i agree it IS more efficient than mine.

Yeah, but I took more time, so it should be.

Sign In

selection problem

Recommended Posts

sethupathy

Link to comment

Share on other sites

atomicrabbit

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

atomicrabbit

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information