html form 4 sets of radio buttons selection

[phppaper]

Dear all,

 

I have 4 items: A , B , C , D

 

I have 4 set of radio buttons and 4 selections:

 

1st choice (with 4 radio buttons):      A , B ,C ,D  (if A is selected, only B ,C ,D  will appear in the choices below, and if either one is selected, the choice would not appear next)

 

2nd choice (with  radio buttons):     

 

3rd choice (with  radio buttons):

 

4th choice (with  radio buttons):

 

How can I do it??

 

thanks

 

[denno020]

So I'm thinking you want to implement a rating type system, whereby the user will select which they like most, then 2nd most, then third most, and the fourth most is the only one left?

 

You could just give each set of radio buttons the same options, and let the user use their 'brain power' to figure out that they don't click on the same one twice. However, there will be people who will do that, so you could have some javascript that would check for this duplicate entry. Or you could have a php script as your form action which will check for duplicate entries from each set of radio buttons, and give an error as appropriate.

 

If you want to have the form change on the fly, then you will need to use javascript. In simplified terms, you'll set an onchange parameter for the radio button, so that when it is selected, it will trigger the javascript function, and within that function, you can hide the rest of the occurrences of that value.

Atleast, this is how I'd imagine it would work, I haven't had much testing behind the theory. Might do some now though!

 

Denno

[denno020]

So I've had a little play around, and I've got something working. It's not perfect, in fact it's far from perfect, but with a bit of tweaking, you should be able to have it functioning how you want. Also, I'm sure this can be done in a much more efficient way, but I just wanted to get it to work, doesn't matter how many lines I used .

 

Here is the javascript:

<script type="text/javascript">
function hide(obj){
switch(obj){
	case('A1'):
		document.form1.A2.style.visibility = 'hidden';
		document.form1.A3.style.visibility = 'hidden';
		document.form1.A4.style.visibility = 'hidden';
		break;
	case('B1'):
		document.form1.B2.style.visibility = 'hidden';
		document.form1.B3.style.visibility = 'hidden';
		document.form1.B4.style.visibility = 'hidden';
		break;
	case('C1'):
		document.form1.C2.style.visibility = 'hidden';
		document.form1.C3.style.visibility = 'hidden';
		document.form1.C4.style.visibility = 'hidden';
		break;
	case('D1'):
		document.form1.D2.style.visibility = 'hidden';
		document.form1.D3.style.visibility = 'hidden';
		document.form1.D4.style.visibility = 'hidden';
		break;
	case('A2'):
		document.form1.A3.style.visibility = 'hidden';
		document.form1.A4.style.visibility = 'hidden';
		break;
	case('B2'):
		document.form1.B3.style.visibility = 'hidden';
		document.form1.B4.style.visibility = 'hidden';
		break;
	case('C2'):
		document.form1.C3.style.visibility = 'hidden';
		document.form1.C4.style.visibility = 'hidden';
		break;
	case('D2'):
		document.form1.D3.style.visibility = 'hidden';
		document.form1.D4.style.visibility = 'hidden';
		break;
	case('A3'):
		document.form1.A4.style.visibility = 'hidden';
		break;
	case('B3'):
		document.form1.B4.style.visibility = 'hidden';
		break;
	case('C3'):
		document.form1.C4.style.visibility = 'hidden';
		break;
	case('D3'):
		document.form1.D4.style.visibility = 'hidden';
		break;
}
}
</script>

 

Here is the HTML:

<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="radio" name="A1" id="A1" value="A1" onclick="hide(this.value)" />
    <label for="A1"></label>
    <input type="radio" name="B1" id="B1" value="B1" onclick="hide(this.value)"  />
    <label for="B1"></label>
    <input type="radio" name="C1" id="C1" value="C1" onclick="hide(this.value)"  />
    <label for="C1"></label>
    <input type="radio" name="D1" id="D1" value="D1" onclick="hide(this.value)"  />
    <label for="D1"></label>
  </p>
  <p>
    <input type="radio" name="A2" id="A2" value="A2" onclick="hide(this.value)"  />
    <label for="A2"></label>
    <input type="radio" name="B2" id="B2" value="B2" onclick="hide(this.value)"  />
    <label for="B2"></label>
    <input type="radio" name="C2" id="C2" value="C2" onclick="hide(this.value)"  />
    <label for="C2"></label>
    <input type="radio" name="D2" id="D2" value="D2" onclick="hide(this.value)"  />
    <label for="D2"></label>
  </p>
  <p>
    <input type="radio" name="A3" id="A3" value="A3" onclick="hide(this.value)"  />
    <label for="A3"></label>
    <input type="radio" name="B3" id="B3" value="B3" onclick="hide(this.value)"  />
    <label for="B3"></label>
    <input type="radio" name="C3" id="C3" value="C3" onclick="hide(this.value)"  />
    <label for="C3"></label>
    <input type="radio" name="D3" id="D3" value="D3" onclick="hide(this.value)"  />
    <label for="D3"></label>
  </p>
  <p>
    <input type="radio" name="A4" id="A4" value="A4" onclick="hide(this.value)"  />
    <label for="A4"></label>
    <input type="radio" name="B4" id="B4" value="B4" onclick="hide(this.value)"  />
    <label for="B4"></label>
    <input type="radio" name="C4" id="C4" value="C4" onclick="hide(this.value)"  />
    <label for="C4"></label>
    <input type="radio" name="D4" id="D4" value="D4" onclick="hide(this.value)"  />
    <label for="D4"></label>
  </p>
</form>

 

Play with it and see what you can come up with. You will need to add code to show the elements again, for cases where the user might change their mind as to their order.

 

For that reason I would suggest not hiding the rest of the elements, but just checking the elements for duplicate selections afterward. If you take away the rest of the radio options, you're giving the user a feeling that they can't actually change their selection anymore.. (which, if they select A1, B1, C1, D1, they actually won't be able to change).

 

Of course, I could be completely missing the point of your question, in which case, I'm sorry.

 

Denno