SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question disabling image radio buttons

    I'm looking to disable a group of radio buttons which are really images once when of them has been clicked, also a second set of radio buttons (images) are then made visible and enabled below. Here is what I have:

    Code CSS:
    <style type="text/css">
    #sub1, #sub2 {
    clear:both;
    position: relative;
    width: 180px;
    padding: 10px;
    color: Black;
    display: none;
    }
    </style>

    Code JavaScript:
    <script type="text/javascript">
    var chkboxTicked = new Image();
    chkboxTicked.src = "../images/star_full.jpg";
    var chkboxEmpty = new Image();
    chkboxEmpty.src = "../images/star.jpg";
     
    // Needs solution for getElementsByName in IE
    function submitcheckboxes(){
    	var checkboxes = document.getElementsByName("imagecheckboxes");
    	for(var i in checkboxes){
    		var location = document.getElementById("form1");
    		var input = document.createElement('input');
    		input.setAttribute('style','display:none;');
    		input.setAttribute('type','hidden');
    		input.setAttribute('name',checkboxes[i].title);
    		if(checkboxes[i].src == chkboxTicked.src){
    			input.setAttribute('value',1);
    		} else {
    			input.setAttribute('value',0);
    		}
    		location.appendChild(input);
    	}
    	return true;
    }
     
    function setKeep( elem, groupName )
    {
    	var group	= elem.form.elements[groupName],
    		bool	= elem.checked,
    		i	= 0,
    		rb;
    	while( rb = group[i++] )
    	{
    		rb.disabled = bool;
    	}
     
    	toggleChkBox(this);
    }
    function toggleChkBox(that){
    	if(that.src == chkboxEmpty.src){
    		that.src = chkboxTicked.src;
    	} else {
    		that.src = chkboxEmpty.src;
    	}
    //	setKeep(this, 'radio');
    	validate(this);
    }
     
    function validate(form) {
    // Checking if at least one period button is selected. Or not.
    	if (document.form1.radio[0].checked ){
    		setVisibility('sub1', 'none');
    		setVisibility('sub2','none');
    	} else {
    		setVisibility('sub1','inline');
    		setVisibility('sub2', 'none');
     
    	}
    }
     
    // need to change for IE
    function setVisibility(id, visibility) {
    	document.getElementById(id).style.display = visibility; 
    }
     
    </script>

    Code:
    <form name='form1' method=post action=action_page.php onsubmit='return validate(this)'><b>Here is the question </b><br>
    <img name="imagecheckboxes" src="../images/star.jpg" name=radio onClick="toggleChkBox(this);" />Answer 1:1
    <input type=radio name=radio value='2' onClick="setKeep(this, 'radio');";>Answer 1:2
    <input type=radio name=radio value='3' onClick="validate(this)";>Answer 1:3
    <input type=radio name=radio value='4' onClick="validate(this)";>Answer 1:4
    <input type=reset value=Reset>
    <br />
    <div id="sub1">
    <input type=radio name="radio1" value='5' onClick="validate(this)";>Answer 1a:1
    <input type=radio name="radio1" value='6' onClick="validate(this)";>Answer 1a:2
    <input type=radio name="radio1" value='7' onClick="validate(this)";>Answer 1a:3
    <input type=radio name="radio1" value='8' onClick="validate(this)";>Answer 1a:4
    </div>
    <div id="sub2">
    <input type=radio name="radio2" value='9' onClick="validate(this)";>Answer 1b:1
    <input type=radio name="radio2" value='10' onClick="validate(this)";>Answer 1b:2
    <input type=radio name="radio2" value='11' onClick="validate(this)";>Answer 1b:3
    <input type=radio name="radio2" value='12' onClick="validate(this)";>Answer 1b:4
    </div>
    </form>
    of all the information I can find; this thread has been of particular help:http://www.sitepoint.com/forums/show...e+radio+button but also http://forums.whirlpool.net.au/forum...m/1272828.html is of great interest because it identifies the problem with Internet Explorer (all versions) in that it cannot process 'getElementById' or 'getElementByName'..

    >> anyone who can help or offer any suggestions regarding these points please step forward <<

    _with thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you using getElementsByName? It would be more suitable to use getElementById and give the image an id.

    If this isn't the problem you are having please elaborate a bit more clearly.

    Good luck

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SlickAU View Post
    Why are you using getElementsByName? It would be more suitable to use getElementById and give the image an id.

    If this isn't the problem you are having please elaborate a bit more clearly.

    Good luck
    well there are 2 problems really >>

    1) the code I posted doesn't allow me to disable any image radio buttons when I click on any of them though it works with normal radio buttons > need some guidance here.

    2) if you didn't know getElementById and getElementByName will not work in Internet Explorer so it's not really a serious option <

    >> if anyone can help with any of these points or has any suggestions please post in the interests of progress <

    _with thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) the code I posted doesn't allow me to disable any image radio buttons... - If you are using images as radio buttons then it's probably best to add a css class to the anchor/image and depending on if this class exists then toggle for disabled/enabled.

    2) getElementById...will not work in Internet Explorer...
    - document.getElementById has always worked in IE (well at least in the not-so-prehistoric versions), not sure what you mean by it not working?

  5. #5
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >> thanks for the response and sorry for the delay...

    Quote Originally Posted by SlickAU View Post
    1) the code I posted doesn't allow me to disable any image radio buttons... - If you are using images as radio buttons then it's probably best to add a css class to the anchor/image and depending on if this class exists then toggle for disabled/enabled.
    .. don't think it can be disabled with css - I'm just going to make it so it can only be checked once..

    Quote Originally Posted by SlickAU View Post
    2) getElementById...will not work in Internet Explorer...
    - document.getElementById has always worked in IE (well at least in the not-so-prehistoric versions), not sure what you mean by it not working?
    Have you tried this in IE because I have numerous times with good results in all other browsers except Internet Explorer (testing in IE7) - has anyone else had problems?

    _thanks

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Internet Explorer pollutes the id namespace with name attributes along with the id attributes that should be there. As long as you don't give one field the same name as you used as an id on a different field then this will not cause a problem.

    IE has supported getElementById since IE5 was released (apart from when you use names that are the same as the id on different fields).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •