Loading ...
Sorry, an error occurred while loading the content.

Re: [JavaScript] onChange form event for a radio button group

Expand Messages
  • David Smart
    The manual I have indicates that it will occur when the field loses focus, if its value has been modified. So if you click one radio button, then another in
    Message 1 of 1 , Aug 4, 2006
    • 0 Attachment
      The manual I have indicates that it will occur when the field loses focus,
      if its value has been modified.

      So if you click one radio button, then another in the same group, you will
      get an event for the first one when you click the second one. Then you'll
      get another event (this time for the second one) when that button loses the
      focus. (But if you had clicked on yet another button in the same group,
      you'll continue to get events.)

      I.e. one event per button setting change. (But delayed so it's based on
      focus changes rather than actual button clicks.)

      I don't know if all browsers adhere to this. Some might just generate the
      event when the radio button changes its value.

      As a general rule, I tend to believe that onChange and radio button groups
      don't really go together, and especially in the way you were using them in
      your example of a few messages ago (which I think meant to set the "checked"
      attribute of the buttons, rather than a "disable" attribute). The problem
      with that one, is that the changes being made by clicking the button will
      normally not take effect until you click a button below it - and your
      onChange is changing the settings of those buttons.

      If you want to use radio buttons to do this type of thing, better to use
      onClick and accept the fact that you'll get one event per click rather than
      one per change.

      Similarly, this current example uses the onChange to do a login check (or at
      least it did once I removed the syntax errors from the quoted code). This
      occurs too late in the sequence (i.e. after you've clicked a radio button
      and moved on to the next thing) or doesn't even happen at all (if the
      initial setting of that row of radio buttons is satisfactory).

      In this case, neither onChange nor onClick should be used. Put the initial
      focus on the login select box and use onBlur to stop a move away from it
      without logging in.

      Regards, Dave S

      ----- Original Message -----
      From: "Pete Harrison" <peterl.harrison@...>
      To: <JavaScript_Official@yahoogroups.com>
      Sent: Saturday, August 05, 2006 1:36 AM
      Subject: [JavaScript] onChange form event for a radio button group


      > If I put the same OnChange call to a script on a radio button group,
      > how many times will it be called when someone clicks from one button
      > to another?
      >
      > What I'm trying to do is if the user clicks the 1st of the 3 button
      > group then everyting down the right had side of the table shouls not
      > be able to be clicked. However, I can't get it working.
      >
      > Regards
      > Pete
      >
      > Here's my code
      >
      > <script language="JavaScript">
      > function checklogin() {
      > If (document.betting.loggedin.options
      > [loggedin.selectedIndex].value==0) {
      > alert("Sorry you have to login before you can chance
      > your luck against us");
      > }
      > }
      >
      > function check1(toChange) {
      > if (document.betting.winlosedraw.value==1) {
      > document.betting.toChange.checked=false;
      > }
      > }
      >
      > function check2(toChange) {
      > if (document.betting.winlosedraw.value==2) {
      > document.betting.toChange.checked=false;
      > }
      > }
      > </script>
      >
      > And here's the form
      >
      > <form name="betting" method="post"
      > action="">
      > <label for="select">Pick a
      > User</label>
      > <p>
      > <select name="loggedin"
      > id="loggedin">
      > <option value="0"
      > selected>NotLoggedIn</option>
      > <option value="1">Pete</option>
      > <option value="2">Mark</option>
      > <option
      > value="3">Demetrious</option>
      > <option value="4">Jon</option>
      > </select>
      > </p>
      > <p>Test yourself against the
      > Cityboxer Fight Analysis Crew - Can you do better?</p>
      > <p>Cityboxer's prediction:</p>
      > <p>Fred the Bulldog 19 - George
      > the Gorilla 17</p>
      > <table width="304">
      > <tr>
      > <td width="129" align="center"
      > valign="top"><p>To Win </p> </td>
      > <td width="27" align="center"
      > valign="top">Draw</td>
      > <td width="132" align="center" valign="top">To
      > Win </td>
      > </tr>
      > <tr>
      > <td align="center" valign="top"><input
      > name="winlosedraw" type="radio" value="1" onChange="checklogin
      > ();"></td>
      > <td align="center" valign="top"><input
      > name="winlosedraw" type="radio" value="0" onChange="checklogin
      > ();"></td>
      > <td align="center" valign="top"><input
      > name="winlosedraw" type="radio" value="2" onChange="checklogin
      > ();"></td>
      > </tr>
      > <tr>
      > <td align="center" valign="top">On Points </td>
      > <td align="center" valign="top"> </td>
      > <td align="center" valign="top">On Points </td>
      > </tr>
      > <tr>
      > <td align="center" valign="top"><input
      > name="1onPoints" type="radio" value="radiobutton" onChange="check1
      > ('2onPoints')"></td>
      > <td align="center" valign="top"> </td>
      > <td align="center" valign="top"><input
      > name="2onPoints" type="radio" value="radiobutton" onChange="check2
      > ('1onPoints')"></td>
      > </tr>
      > <tr>
      > <td align="center" valign="top">In Quarter
      > </td>
      > <td align="center" valign="top"> </td>
      > <td align="center" valign="top">In Quarter</td>
      > </tr>
      > <tr>
      > <td align="center" valign="top"><table
      > width="100%">
      > <tr>
      > <td align="center" valign="top"><div
      > align="center">Q1</div></td>
      > <td align="center" valign="top"><div
      > align="center">Q2</div></td>
      > <td align="center" valign="top"><div
      > align="center">Q3</div></td>
      > <td align="center" valign="top"><div
      > align="center">Q4</div></td>
      > </tr>
      > <tr>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="1q1to4" type="radio"
      > value="1" onChange="check1('2q1to4')">
      > </div></td>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="1q1to4" type="radio"
      > value="2" onChange="check1('2q1to4')">
      > </div></td>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="1q1to4" type="radio"
      > value="3" onChange="check1('2q1to4')">
      > </div></td>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="1q1to4" type="radio"
      > value="4" onChange="check1('2q1to4')">
      > </div></td>
      > </tr>
      > </table></td>
      > <td align="center" valign="top"> </td>
      > <td align="center" valign="top"><table
      > width="100%">
      > <tr>
      > <td align="center" valign="top"><div
      > align="center">Q1</div></td>
      > <td align="center" valign="top"><div
      > align="center">Q2</div></td>
      > <td align="center" valign="top"><div
      > align="center">Q3</div></td>
      > <td align="center" valign="top"><div
      > align="center">Q4</div></td>
      > </tr>
      > <tr>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="2q1to4" type="radio"
      > value="1" onChange="check2('1q1to4')">
      > </div></td>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="2q1to4" type="radio"
      > value="2" onChange="check2('1q1to4')">
      > </div></td>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="2q1to4" type="radio"
      > value="3" onChange="check2('1q1to4')">
      > </div></td>
      > <td align="center" valign="top"><div
      > align="center">
      > <input name="2q1to4" type="radio"
      > value="4" onChange="check2('1q1to4')">
      > </div></td>
      > </tr>
      > </table></td>
      >
      >
      >
      >
      >
      >
      >
      >
      >
      >
      > Visit http://aiaiai.com for more groups to join
      > Yahoo! Groups Links
      >
      >
      >
      >
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.