Problem with radio button choices based on previous choice

[speckytwat]

I have an issue with a PHP form where I have four separate, distinct sets of radio buttons. These are for people to sign up for certain workshop choices.

So, Workshop 1 has four radio button choices, and the user has to select their preference- 1, 2, 3 or 4.

Same for Workshop 2, Workshop 3 and Workshop 4, they each have four choices.

However, at the moment the user can choose a preference of 1 for the first workshop, then choose 1 again for the 2nd and so on. Most people are intelligent enough not to do this but some are not, so we need a way to prevent an option being selected in any of the remaining Workshop groups if that same option has already been selected in the first one.

So for example, if the user selected a Preference of 2 for Workshop 1, then the option / preference shouldn't be selectable for any of the following Workshops. They should only be able to select 1, 3 or 4.

Then, if say they selected a Preference of 3 for the next Workshop (Workshop 2) then the available options in the NEXT Workshop are limited to 1 and 4. And so on.

I can't see any way of doing this, as it needs to be done before any data is sent- does anyone know if this is possible and how? Thanks!

[requinix]

Radio buttons can't be grouped by anything other than the name. Certainly not by both the name and the value. So you have to enforce the value grouping with Javascript - then again with PHP to make sure the Javascript worked.

 

Assign a class to each of these options, then use Javascript to listen for an option being chosen and deselect any other matching options elsewhere. Like

$(document.body).on("change", "input.whatever-class-name:radio", function() {
  var choice = this;
  $("input.whatever-class-name:radio").filter(function() { return this.name != choice.name && this.value == choice.value; }).prop("checked", false);
});

[ginerjm]

Sounds like a JS option. Place an onclick/onchange event in each radio button's tag and have a function that flips the status of the corresponding button(s) as you desire. Will take a bit of playing around to properly recognize the current button's status and then the related button's status in order to get the proper result.

 

OR - you could post this in a JS forum.....

 

OOps - I see requinex is on the ball here and just a step ahead of me. And of course her answer is more definitive, so ignore my post

Edited January 19, 2018 by ginerjm

[speckytwat]

Thanks both, I will try the suggested code...

[speckytwat]

Ok, I tried that but the radio buttons don't actually have classes, they just have unique names as follows, so I can then add them into the mySQL database appropriately when the form is sent:

 

 

<input name="_Workshop1Session1Choice" type="radio" value="1"> //four of these, with values 1 to 4
<input name="_Workshop1Session2Choice" type="radio" value="1"> //four of these, with values 1 to 4
<input name="_Workshop1Session3Choice" type="radio" value="1"> //four of these, with values 1 to 4
<input name="_Workshop1Session4Choice" type="radio" value="1"> //four of these, with values 1 to 4

 

So when the value for the first button is selected, the same value in the other buttons for this workshop need to be unselectable. No idea how I can do that with the above code though- any ideas?

[ginerjm]

I think that my suggestion would work for you. Assign an id to each button of each group: btn11,btn12,bth13,btn14..., btn21, btn22, btn23, btn24..... Then let the JS function check the id of the caller, modify that id to hit the appropriate other buttons and set some attribute of that target button appropriately.

[Barand]

Use a combination of naming and classes

 

Your button name should be something like "sessionchoice[N]" where N is the workshop id

 

Give each button a classname like "sessX' where X is the session id.

for ($wshp = 1; $wshp <= 4; $wshp++) {
        	echo "<tr><th>Workshop $wshp</th>";
        	for ($sess = 1; $sess <= 4; $sess++) {
        	    echo "<td><input type='radio' name='sessionchoice[$wshp]' class='sess$sess'  value='$sess'></td>";
        	}
        	echo "</tr>\n";
        }

The name will help in processing the POSTed data

foreach ($_POST['sessionchoice'] as $wkshop => $sessnum) {
    // save workshop with session number value
}

The classnames can be used with jquery to group the buttons, so if one in the class is selected, disable the others in that class. If one is deselected, enable all in that class.