SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2001
    Location
    UK
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disabling a radio button using another form control

    I should start off by saying I haven't written a line of Javascript in my entire life, so apologies if my question seems a bit "newbie"ish.

    I have a form which currently consists of two radio button fields. See the code below for what I mean:

    Code:
    <form action="article.php" name="cpform" method="post">
    	<!-- field 1 -->
    	<input type="radio" name="confirm" id="rb_1_confirm" value="1" tabindex="1" checked="checked" />Un-validate
    	<input type="radio" name="confirm" id="rb_0_confirm" value="0" tabindex="2" />Permenantly Delete
    	<br />
    	<!-- field 2 -->
    	<input type="radio" name="keepcomments" id="rb_1_keepcomments" value="1" tabindex="3" checked="checked" />Keep Comments
    	<input type="radio" name="keepcomments" id="rb_0_keepcomments" value="0" tabindex="4" />Remove all Comments
    </form>
    What I'm looking to do is to disable second set of radio buttons ("keepcomments") if the user selects the "Permenantly Delete" option in the top set of radio buttons.

    I'm fairly sure that this is a simple thing to do, but I simply haven't a clue on how to go about doing this. Could anyone give me some pointers?
    Regards, Ant.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    HTML Code:
    <form action="article.php" name="cpform" method="post">  
    <!-- field 1 -->  
    <input type="radio" name="confirm" id="rb_1_confirm" 
    value="1" tabindex="1" checked="checked" 
    />Un-validate 
    <input type="radio" name="confirm" id="rb_0_confirm"
     value="0" tabindex="2" onchange="setKeep(this.checked)" />Permenantly Delete 
    <br />  
    <!-- field 2 -->  
    <input type="radio" name="keepcomments" 
    id="rb_1_keepcomments" value="1" tabindex="3" 
    checked="checked" />Keep Comments 
    <input type="radio" name="keepcomments" 
    id="rb_0_keepcomments" value="0" tabindex="4" 
    />Remove all Comments 
    </form>
    Code:
    function setKeep(checkVar) {
     document.forms["cpform"].keepcomments[0].disabled = checkVar;
     document.forms["cpform"].keepcomments[1].disabled = checkVar;
    }

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vinnie -- have I taught you nothing![img]images/smilies/tongue.gif[/img] Use references and don't hardcode functions (or do so as little as possible)!
    Code:
    function setKeep( elem, groupName )
    {
    	var group	= elem.form.elements[groupName],
    		bool	= elem.checked,
    		i	= 0,
    		rb;
    	while( rb = group[i++] )
    	{
    		rb.disabled = bool;
    	}
    }
    Code:
    onchange="setKeep(this,'keepcoments');"
    [img]images/smilies/biggrin.gif[/img]
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Evangelist
    Join Date
    Nov 2001
    Location
    UK
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works great, but when I change the option back to "Un-validated", the second set of radio buttons stay disabled whereas I would prefer them to be "re-enabled".

    Also, would it be possible that along with disabling the second set of radio buttons, the value was changed so show that "Remove All Comments" was selected, just to reinforce to the user that comments will be deleted?

    Thanks to both of you for your help [img]images/smilies/smile.gif[/img]
    Regards, Ant.

  5. #5
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Is this what you want?

    Code:
    function setKeep( elem, groupName, bool )
    {
     var group = elem.form.elements[groupName],
      i = 0,
      rb;
     while( rb = group[i++] )
     {
      rb.checked = !(bool == rb.value)
      rb.disabled = bool;
     }
    }//-->
    </script>
    </head>
    <body>
    <form action="article.php" name="cpform" method="post">  
    <-- field 1 -->  
    <input type="radio" name="confirm" id="rb_1_confirm" 
    value="1" tabindex="1" checked="checked" onchange="setKeep(this,'keepcomments',0)" 
    />Un-validate 
    <input type="radio" name="confirm" id="rb_0_confirm"
     value="0" tabindex="2" onchange="setKeep(this,'keepcomments',1)" />Permenantly Delete
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  6. #6
    SitePoint Evangelist
    Join Date
    Nov 2001
    Location
    UK
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thanks very much
    Regards, Ant.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by beetle
    Vinnie -- have I taught you nothing![img]images/smilies/tongue.gif[/img] Use references and don't hardcode functions (or do so as little as possible)!
    Got me again


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
  •