Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts

    Complete Newbie Asks: Is there a generic name for the subject of the event ??

    I am trying to trigger one custom function or another, depending on whether a radio button is checked or not.

    How can this be done? (I was hoping that "self" would be the ticket, but I think I was barking up the wrong tree.)
    Code:
    function toggleFieldsetByRadio(element){
      if(SELF.checked){
        enable(element);
      }else{
        disable(element);
      }
    }
    How should I do this?
    I am hoping to use this function with an onchange event.

    ~ Mo
    Last edited by mOrloff; 08-20-2010 at 05:24 AM.

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    this?
    Running Windows 7 x64

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Code:
    <form name = "myform">
    
    A <input type = "radio" name = "rad1" onclick = "chk()"> B <input type = "radio" name = "rad1" onclick = "chk()"><br>
    
    <script type = "text/javascript">
    function chk() {
    for (var i =0; i <document.myform.rad1.length; i++) {
    if (document.myform.rad1[i].checked) {
    var r = i;
    }
    }
    if (r == 0) {A()}
    if (r == 1) {B()}
    }
    
    function A() {
    alert ("This is Function A");
    }
    
    function B() {
    alert ("This is Function B");
    }
    
    </script>
    Or do you mean something like this?

    Code:
    <form name = "myform">
    
    A <input type = "radio" name = "rad1" > B <input type = "radio" name = "rad1" ><br>
    
    <select name = "mysel" onchange = "chk()">
    <option value = "0"> Make a choice</option>
    <option value = "Apple"> Apple</option>
    <option value = "Banana"> Banana</option>
    <option value = "Orange"> Orange</option>
    </select>
    
    <script type = "text/javascript">
    function chk() {
    var chosen = "No Selection";
    if (document.myform.mysel.value !=0) {
    chosen = document.myform.mysel.value
    }
    if (document.myform.rad1[0].checked) {
    A(chosen);
    return false;
    }
    else {
    B(chosen);  // or of course do nothing
    return false;
    }
    }
    
    function A(which) {
    alert ("This is Function A.  You selected " + which);
    }
    
    function B(which) {
    alert ("This is Function B.  You selected " + which);
    }
    
    </script>
    Note that you should use onclick, not onchange, with radio buttons. Also, note that all radio buttons in the same group have the same name (e.g. rad1), and are referred to as rad1[0], rad1[1] etc.
    Last edited by Philip M; 08-20-2010 at 09:00 AM.

  • #4
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    My form will look a lot like:
    Code:
    <form>
      <input type="radio" name="test" onclick="someFunction('ID1')" />
      <fieldset id="ID1">
        <input class="" type="text" value="test value1" />
        <input class="" type="text" value="test value2" />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction('ID2')" />
      <fieldset id="ID2">
        <input class="" type="text" value="test value3" />
        <input class="" type="text" value="test value4" />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction('ID3')" />
      <fieldset id="ID3">
        <input class="" type="text" value="test value5" />
        <input class="" type="text" value="test value6" />
      </fieldset>
      <button type="submit">Submit</button>
    </form>
    This form will be dynamically created, filedset by fieldset, via a PHP loop.
    The fieldset ID's will also be dynamically generated.

    Which would be the best way to disable all fieldsets except for the one whose radio is selected at any given time?
    Edit: To me, Philip, it seems like your first suggestion would be the more appropriate option, but it's still a little over my head.


    ~ Mo
    Last edited by mOrloff; 08-20-2010 at 05:49 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function someFunction(rb,num)
    {
        var id = "ID" + num;
        var fs = rb.form.getElementsByTagName("fieldset");
        for ( var f = 0; f < fs.length; ++f )
        {
            fs[f].disabled = ( fs[f].id != id );
        }
    }
    </script>
    </head>
    <body>
    
    <form>
      <input type="radio" name="test" onclick="someFunction(this,1)" />
      <fieldset id="ID1" disabled>
        <input class="" type="text" value="test value1" />
        <input class="" type="text" value="test value2" />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this,2)" />
      <fieldset id="ID2" disabled>
        <input class="" type="text" value="test value3" />
        <input class="" type="text" value="test value4" />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this,3)" />
      <fieldset id="ID3" disabled>
        <input class="" type="text" value="test value5" />
        <input class="" type="text" value="test value6" />
      </fieldset>
      <button type="submit">Submit</button>
    </form>
    </body>
    </html>
    You don't really *have* to pass the numbers (1,2,3) or even have IDs on the fieldsets if you want to be a tiny bit sneaky.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function someFunction(rb)
    {
        var form = rb.form;
        var rbs = form.elements[rb.name];
        var fs = rb.form.getElementsByTagName("fieldset");
        for ( var r = 0; r < rbs.length; ++r )
        {
            fs[r].disabled = ( rbs[r] != rb );
        }
    }
    </script>
    </head>
    <body>
    
    <form>
      <input type="radio" name="test" onclick="someFunction(this)" />
      <fieldset disabled>
        <input class="" type="text" value="test value1" />
        <input class="" type="text" value="test value2" />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this)" />
      <fieldset disabled>
        <input class="" type="text" value="test value3" />
        <input class="" type="text" value="test value4" />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this)" />
      <fieldset disabled>
        <input class="" type="text" value="test value5" />
        <input class="" type="text" value="test value6" />
      </fieldset>
      <button type="submit">Submit</button>
    </form>
    </body>
    </html>
    Of course, this only works if you have a one-to-one correspondence of radio buttons to fireldsets. And no unrelated fieldsets *before* the first radio button. Though it's okay to have fieldsets *after* the last one that corresponds. Or we could use class names to differentiate. Or or or.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    Awesome!
    Thank you, thank you, thank you.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    So where in the NW are you, actually? With surfboard in hand, one assume near the coast?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    I'm having some trouble getting it working, and I think I've found why.
    It appears that DISABLE doesn't work on fieldsets.

    I tried tweaking it a little, and even made some progress (yay!), but can use a little more guidance.

    The goal is to have all inputs disabled except for the one which has the selected RB (if one is selected, and the selection changes, the inputs for that RB should become disabled again and the one which gets clicked should then be enabled).

    Here's where I am:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function someFunction(rb,num)
    {
        var id = "ID" + num;
    //    var fs = rb.form.getElementsByTagName("fieldset");
        var input = document.getElementById(id).getElementsByTagName("input");
    /*    for ( var f = 0; f < fs.length; ++f )
        {
            fs[f].disabled = ( fs[f].id != id );
        }
    */    for(var i = 0; i < input.length; i++){
            input[i].removeAttribute("disabled");
        }
    }
    </script>
    </head>
    <body>
    
    <form>
      <input type="radio" name="test" onclick="someFunction(this,1)" />
      <fieldset id="ID1">
        <input class="" type="text" value="test value1" disabled />
        <input class="" type="text" value="test value2" disabled />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this,2)" />
      <fieldset id="ID2" disabled>
        <input class="" type="text" value="test value3" disabled />
        <input class="" type="text" value="test value4" disabled />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this,3)" />
      <fieldset id="ID3" disabled>
        <input class="" type="text" value="test value5" disabled />
        <input class="" type="text" value="test value6" disabled />
      </fieldset>
      <button type="submit">Submit</button>
    </form>
    </body>
    </html>
    Thanks-a-bunch,
    ~ Mo
    Last edited by mOrloff; 08-20-2010 at 11:16 PM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    I admit I only tested it with MSIE and it worked fine. Disabling the fieldset indeed disabled all the <input> fields except those in that fieldset.

    Ahhh...yes...just tried it with Firefox, and disabling the fieldset does absolutely nothing at all. Even when I bring up the page, with all the <fieldset disabled>, the fields are not disabled at all.

    I think this is one case where MSIE got it right and FF is being dumb.

    But okay, we can easily fix it.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function someFunction(rb)
    {
        var form = rb.form;
        var rbs = form.elements[rb.name];
        var fs = rb.form.getElementsByTagName("fieldset");
        for ( var r = 0; r < rbs.length; ++r )
        {
            var isDisabled = ( rbs[r] != rb );
            fs[r].disabled = isDisabled;
            var inps = fs[r].getElementsByTagName("input");
            for ( var i = 0; i < inps.length; ++i )
            {
                inps[i].disabled = isDisabled;
            }
        }
    }
    </script>
    </head>
    <body>
    
    <form>
      <input type="radio" name="test" onclick="someFunction(this)" />
      <fieldset disabled >
        <input class="" type="text" value="test value1" disabled />
        <input class="" type="text" value="test value2" disabled />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this)" />
      <fieldset disabled>
        <input class="" type="text" value="test value3" disabled />
        <input class="" type="text" value="test value4" disabled />
      </fieldset>
      <input type="radio" name="test" onclick="someFunction(this)" />
      <fieldset disabled>
        <input class="" type="text" value="test value5" disabled />
        <input class="" type="text" value="test value6" disabled />
      </fieldset>
      <button type="submit">Submit</button>
    </form>
    </body>
    </html>
    What a hack! For once, MSIE wins.
    Last edited by Old Pedant; 08-20-2010 at 11:47 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    Wow!
    I'm able to make heads-and-tails of a lot of that, but I think a good portion is still going over my head

    Thankfully I've got plenty of time to figure that all out, but the best part is that it works!

    THANKS!

    Reply to above: While I used to be much closer to the coast, I am now about 1.75 hours inland in Oregon.
    Last edited by mOrloff; 08-21-2010 at 08:24 PM.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    The important part is probably this line:
    Code:
            var inps = fs[r].getElementsByTagName("input");
    It's important to be aware the getElementsByTagName() can be applied to *ANY* "container" object, *NOT* just to the document object! So that line is saying "get me all the "input" elements that are nested inside the fs[r] element (which is of course a <fieldset>).

    Without the ability to only find sub-elements using the method, doing this kind of thing would be much more tedious.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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