[SOLVED] Radio Buttons

[ToddAtWSU]

I want to do something rather complex with radio buttons and am guessing it is actually undoable but thought maybe someone here could explain to me how it IS doable. What I want to do is create a form where users pick a Top 10 from all the participants. I want to list the participants down the first column with 10 radio buttons following each participant. The form would look like this:

 

                    1  2  3    4  5  6    7  8    9  10

Participant 1    O  O  O  O  O  O  O  O  O  O

Participant 2    O  O  O  O  O  O  O  O  O  O

...

Participant n    O  O  O  O  O  O  O  O  O  O

 

I know that part is easy to do but what I want to be able to do is say each Participant can only have one radio button selected and each column  can only have one radio button selected. So no participant can be voted for twice and only one participant can be voted for as #1 and #2 and so on. Is this even at all possible and if so, how? Thanks for all your help!

[nogray]

There is very much "doable", just will take some JavaScript, naming structure and some logic.

 

What I did is each row of radio buttons will have the same name (option group) so when you select one, the rest will be unchecked.

 

I added some javascript to disable the radio buttons that are unchecked in the column, this way only one participant can have that placement.

 

If the use change their mind, the script will enable the other radio buttons. Also, I added a reset button to enable the radio buttons in case the user wants that.

 

You'll need to change the number of participants and the number of radio buttons in this script (I only made it for 5 participant and 5 placements), and keep the same structure

 

<script language="javascript">

// variable to set the number of participants (change this to the number of participants on the page)
var par_num = 5;

// variable to set the number of radio buttons (change this to 10 for your project)
var rad_num = 5;

function reset_radio(row){

	// loop through the radio buttons on the row to see which 
	// radio button is selected

	for (i=1; i<=rad_num; i++){
		// if the radio button is selected,
		// uncheck it and enable the other radio buttons
		if (document.getElementById('par_'+row+'_'+i).checked){
			// unchecking the button
			document.getElementById('par_'+row+'_'+i).checked = false;
			// turning the other radion buttons on
			change_disable_status(i, false);
			return;
		}
	}
}


// this function will change the status of the radio buttons
function change_disable_status(ra, st){
	for (i=1; i<=par_num; i++){
		if (!document.getElementById('par_'+i+'_'+ra).checked){
			document.getElementById('par_'+i+'_'+ra).disabled = st;
		}
	}
}



</script>
<table>
<tr><td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>Reset</td>
<tr><td>Participant 1</td>
	<td><input type="radio" name="par_1" id="par_1_1" onmousedown="reset_radio('1');" onclick="change_disable_status('1', true);" /></td>
	<td><input type="radio" name="par_1" id="par_1_2" onmousedown="reset_radio('1');" onclick="change_disable_status('2', true);" /></td>
	<td><input type="radio" name="par_1" id="par_1_3" onmousedown="reset_radio('1');" onclick="change_disable_status('3', true);" /></td>
	<td><input type="radio" name="par_1" id="par_1_4" onmousedown="reset_radio('1');" onclick="change_disable_status('4', true);" /></td>
	<td><input type="radio" name="par_1" id="par_1_5" onmousedown="reset_radio('1');" onclick="change_disable_status('5', true);" /></td>
	<td><a href="#" onclick="reset_radio('1'); return false;">Reset</a></td>
</tr>
<tr><td>Participant 2</td>
	<td><input type="radio" name="par_2" id="par_2_1" onmousedown="reset_radio('2');" onclick="change_disable_status('1', true);" /></td>
	<td><input type="radio" name="par_2" id="par_2_2" onmousedown="reset_radio('2');" onclick="change_disable_status('2', true);" /></td>
	<td><input type="radio" name="par_2" id="par_2_3" onmousedown="reset_radio('2');" onclick="change_disable_status('3', true);" /></td>
	<td><input type="radio" name="par_2" id="par_2_4" onmousedown="reset_radio('2');" onclick="change_disable_status('4', true);" /></td>
	<td><input type="radio" name="par_2" id="par_2_5" onmousedown="reset_radio('2');" onclick="change_disable_status('5', true);" /></td>
	<td><a href="#" onclick="reset_radio('2'); return false;">Reset</a></td>
</tr>
<tr><td>Participant 3</td>
	<td><input type="radio" name="par_3" id="par_3_1" onmousedown="reset_radio('3');" onclick="change_disable_status('1', true);" /></td>
	<td><input type="radio" name="par_3" id="par_3_2" onmousedown="reset_radio('3');" onclick="change_disable_status('2', true);" /></td>
	<td><input type="radio" name="par_3" id="par_3_3" onmousedown="reset_radio('3');" onclick="change_disable_status('3', true);" /></td>
	<td><input type="radio" name="par_3" id="par_3_4" onmousedown="reset_radio('3');" onclick="change_disable_status('4', true);" /></td>
	<td><input type="radio" name="par_3" id="par_3_5" onmousedown="reset_radio('3');" onclick="change_disable_status('5', true);" /></td>
	<td><a href="#" onclick="reset_radio('3'); return false;">Reset</a></td>
</tr>
<tr><td>Participant 4</td>
	<td><input type="radio" name="par_4" id="par_4_1" onmousedown="reset_radio('4');" onclick="change_disable_status('1', true);" /></td>
	<td><input type="radio" name="par_4" id="par_4_2" onmousedown="reset_radio('4');" onclick="change_disable_status('2', true);" /></td>
	<td><input type="radio" name="par_4" id="par_4_3" onmousedown="reset_radio('4');" onclick="change_disable_status('3', true);" /></td>
	<td><input type="radio" name="par_4" id="par_4_4" onmousedown="reset_radio('4');" onclick="change_disable_status('4', true);" /></td>
	<td><input type="radio" name="par_4" id="par_4_5" onmousedown="reset_radio('4');" onclick="change_disable_status('5', true);" /></td>
	<td><a href="#" onclick="reset_radio('4'); return false;">Reset</a></td>
</tr>
	<tr><td>Participant 5</td>
	<td><input type="radio" name="par_5" id="par_5_1" onmousedown="reset_radio('5');" onclick="change_disable_status('1', true);" /></td>
	<td><input type="radio" name="par_5" id="par_5_2" onmousedown="reset_radio('5');" onclick="change_disable_status('2', true);" /></td>
	<td><input type="radio" name="par_5" id="par_5_3" onmousedown="reset_radio('5');" onclick="change_disable_status('3', true);" /></td>
	<td><input type="radio" name="par_5" id="par_5_4" onmousedown="reset_radio('5');" onclick="change_disable_status('4', true);" /></td>
	<td><input type="radio" name="par_5" id="par_5_5" onmousedown="reset_radio('5');" onclick="change_disable_status('5', true);" /></td>
	<td><a href="#" onclick="reset_radio('5'); return false;">Reset</a></td>
</tr>
</table>

[ToddAtWSU]

Thanks so much. I can't wait to try this out later tonight!!!

[ToddAtWSU]

I finally found time to work on this and was curious if the onmousedown feature is available through PHP as well as javascript? I was hoping to use PHP and not a scripting language. Thanks!

[fenway]

PHP is a server-side language... mouse events are part of the client side.

[ToddAtWSU]

Thanks, that is what I was afraid of.