SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What javascript to clear Radio Buttons from more than one line

    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

    PHP Code:
    <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">&nbsp;</td>
        <
    td rowspan="2">&nbsp;</td>
        <
    td>Session4b</td>
        <
    td>Session5b</td>
        <
    td>Session6b</td>
        <
    td>Session7b</td>
        <
    td rowspan="2">&nbsp;</td>
        <
    td rowspan="2">&nbsp;</td>
        <
    td rowspan="2">&nbsp;</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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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
    Code:
    <!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">&nbsp;</td>
    						<td rowspan="2">&nbsp;</td>
    						<td>Session4b</td>
    						<td>Session5b</td>
    						<td>Session6b</td>
    						<td>Session7b</td>
    						<td rowspan="2">&nbsp;</td>
    						<td rowspan="2">&nbsp;</td>
    						<td rowspan="2">&nbsp;</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).

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •