Hi
I have a form giving users the option of selecting which class they want, the problem I have is that some classes last 60mins and some last 30mins, so the user could if they wish attend two 30min classes but only one 60min class, what I want to do is to ensure that if a 60 min class is picked they cannot then select a 30min class as well
I include the code for the form below
<table width="1200" border="0" cellpadding="0" cellspacing="0" class="tableclass">
<tr>
<td width="110">Session1a</td>
<td width="110">Session2</td>
<td width="110">Session3</td>
<td width="110">Session4a</td>
<td width="110">Session5a</td>
<td width="110">Session6a</td>
<td width="110">Session7a</td>
<td width="110">Session8</td>
<td width="110">Session9</td>
<td width="110">Session10</td>
</tr>
<tr>
<td><input name="d1ws1" type="radio" value="ws1a" />
30 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1b" />
60 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1c" />
60 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1d" />
30 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1e" />
30 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1f" />
30 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1g" />
30 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1h" />
60 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1i" />
60 Mins</td>
<td><input name="d1ws1" type="radio" value="ws1j" />
60 Mins</td>
</tr>
<tr>
<td>Session1b</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td>Session4b</td>
<td>Session5b</td>
<td>Session6b</td>
<td>Session7b</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td><input name="d1ws2" type="radio" value="ws2a" />
30 Mins</td>
<td><input name="d1ws2" type="radio" value="ws2d" />
30 Mins</td>
<td><input name="d1ws2" type="radio" value="ws2e" />
30 Mins</td>
<td><input name="d1ws2" type="radio" value="ws2f" />
30 Mins</td>
<td><input name="d1ws2" type="radio" value="ws2g" />
30 Mins</td>
</tr>
</table>
Thanks John
PaulOB
December 31, 2013, 5:57pm
2
Hi,
You should probably wait until someone who knows what they are doing comes along but I couldn’t resist having a stab at this
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#tableclass{
width:1200px;
margin:auto;
border-colapse:collapse;
}
#tableclass td{width:110px}
</style>
</head>
<body>
<form>
<table id="tableclass" class="tableclass">
<tr>
<td>Session1a</td>
<td>Session2</td>
<td>Session3</td>
<td>Session4a</td>
<td>Session5a</td>
<td>Session6a</td>
<td>Session7a</td>
<td>Session8</td>
<td>Session9</td>
<td>Session10</td>
</tr>
<tr>
<td><input data-session-time="30" name="d1ws1" type="radio" value="ws1a" />
30 Mins</td>
<td><input data-session-time="60" name="d1ws1" type="radio" value="ws1b" />
60 Mins</td>
<td><input data-session-time="60" name="d1ws1" type="radio" value="ws1c" />
60 Mins</td>
<td><input data-session-time="30" name="d1ws1" type="radio" value="ws1d" />
30 Mins</td>
<td><input data-session-time="30" name="d1ws1" type="radio" value="ws1e" />
30 Mins</td>
<td><input data-session-time="30" name="d1ws1" type="radio" value="ws1f" />
30 Mins</td>
<td><input data-session-time="30" name="d1ws1" type="radio" value="ws1g" />
30 Mins</td>
<td><input data-session-time="60" name="d1ws1" type="radio" value="ws1h" />
60 Mins</td>
<td><input data-session-time="60" name="d1ws1" type="radio" value="ws1i" />
60 Mins</td>
<td><input data-session-time="60" name="d1ws1" type="radio" value="ws1j" />
60 Mins</td>
</tr>
<tr>
<td>Session1b</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td>Session4b</td>
<td>Session5b</td>
<td>Session6b</td>
<td>Session7b</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td><input data-session-time="30" name="d1ws2" type="radio" value="ws2a" />
30 Mins</td>
<td><input data-session-time="30" name="d1ws2" type="radio" value="ws2d" />
30 Mins</td>
<td><input data-session-time="30" name="d1ws2" type="radio" value="ws2e" />
30 Mins</td>
<td><input data-session-time="30" name="d1ws2" type="radio" value="ws2f" />
30 Mins</td>
<td><input data-session-time="30" name="d1ws2" type="radio" value="ws2g" />
30 Mins</td>
</tr>
</table>
</form>
<script type="text/javascript">
(function () {
var inputs = document.getElementById("tableclass").getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function () {
var sessionTime = this.getAttribute("data-session-time");
if (sessionTime === "60") {
for (var j = 0; j < inputs.length; j++) {
inputs[j].checked = false;
}
this.checked = true;
} else {
for (var j = 0; j < inputs.length; j++) {
var sessionTime2 = inputs[j].getAttribute("data-session-time");
if (sessionTime2 === "60") {
inputs[j].checked = false;
}
}
}
}
}
})();
</script>
</body>
</html>
The problems with this are that you didn’t specify how the 30 minute sessions could be chosen because at present you could select 30 mins from any 30 min session on the top row and any 30 mins from session on the bottom row but not any two 30 min sessions from the same row.
You may need to clarify that behaviour then when someone who knows what they are doing comes along they can do it the right way
(Of course you still have to do this serverside as well in case js is turned off).
Hi Paul, that works perfectly, maybe should have said the first row will be the start time of sessions, so you cannot be in any 30 min session from the second row as you will still be in the 60min session
Thanks for your time and happy new year
