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 11 of 11
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making an Input Radio readonly through Javascript

    I've been going through as many methods as I can think of to display a Radio Button set that can be set in code and optionally prevent the user from changing it.

    Nothing seems to do the job, particularly given that neither of the options being selected must be an option.

    The onFocus and onChange events have effects that seem... unpredictable, and disabled is simply not an option since I need the value to post on submit no matter what.

    I was hoping somebody else had encountered this problem before.

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why don't you use an <input type="hidden"> to pass the value?
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Not sure if something like this is what you mean

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">

    indexNum=3
    disableRadios
    =1

    function chkRadio(){

    if(
    disableRadios==1){
    document.myform.r1[indexNum].checked=true
    }


    // checking selected value
    for(var  i=0;i<document.myform.r1.length;i++){
    if(
    document.myform.r1[i].checked==true){
    document.getElementById("temp").innerHTML="Radio value = "+document.myform.r1[i].value
    }
    }

    }

    </script>

    </HEAD>
    <BODY onload="chkRadio()">

    <div id="temp"></div>

    <form name="myform">

    <input type="radio" name="r1" value="1" onclick="chkRadio()" checked><BR>
    <input type="radio" name="r1" value="2" onclick="chkRadio()"><BR>
    <input type="radio" name="r1" value="3" onclick="chkRadio()"><BR>
    <input type="radio" name="r1" value="4" onclick="chkRadio()"><BR>
    <input type="radio" name="r1" value="5" onclick="chkRadio()"><BR>

    </form>

    </BODY>
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mr J
    Not sure if something like this is what you mean
    That actually comes very close, but I have to have the default value be nothing selected with a NULL postback to the SQL Server. (I may need to check into this... the problem is that I don't think we can assume for the purposes of the data that no response = yes or no response = no.)

    Quote Originally Posted by Kravvitz
    Why don't you use an <input type="hidden"> to pass the value?
    I actually tried to do that. But I need to display the read only value in the disabled and unhidden option list.

    Now that I think about it... if the "disabled" radio options consisted of one disabled option list with the unselected button and one enabled list with the one option that's seelcted, and the "REAL" inputs were hidden, then the user could see the fields in question and not be able to change them and I' get my postback.

    It only remains to be seen if the disabled property works in the DOM...

    I'll try that and get back to you.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    If the shape is not important to you, you may use checkboxes. A small javascript code can make them have the same exclusive behaviour as a radio group (ie a single checked option). Check boxes accept readOnly.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I'll throw in this last attempt, just in case

    If disableRadios = 1 no radios are selected and the variable radioValue returns null.

    If disableRadios = 0 radios are selectable and the variable radioValue returns the selected radio value

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">

    disableRadios=1

    function chkRadio(){

    if(
    disableRadios==1){

    for(var  
    i=0;i<document.myform.r1.length;i++){
    document.myform.r1[i].checked=false
    radioValue
    =null
    }

    }
    else{

    for(var  
    i=0;i<document.myform.r1.length;i++){
    if(
    document.myform.r1[i].checked==true){
    radioValue=document.myform.r1[i].value
    }
    }

    }

    document.getElementById("temp").innerHTML="Radio value = "+radioValue
    }

    </script>

    </HEAD>
    <BODY onload="chkRadio()">

    <div id="temp"></div>

    <form name="myform">

    <input type="radio" name="r1" value="1" onclick="chkRadio()" checked><BR>
    <input type="radio" name="r1" value="2" onclick="chkRadio()"><BR>
    <input type="radio" name="r1" value="3" onclick="chkRadio()"><BR>
    <input type="radio" name="r1" value="4" onclick="chkRadio()"><BR>
    <input type="radio" name="r1" value="5" onclick="chkRadio()"><BR>

    </form>

    </BODY>
    </HTML> 
    Last edited by Mr J; 05-27-2006 at 12:08 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For those who care, here's the solution I hit upon:

    Code:
    			document.doctorform.PhysicianFellow.value = '';
    			document.doctorform.LockedPhysicianFellowYes.checked = false;
    			document.doctorform.LockedPhysicianFellowNo.checked = false;
    			document.doctorform.LockedPhysicianFellowYes.disabled = true;
    			document.doctorform.LockedPhysicianFellowNo.disabled = true;
    			
    			
    			if (dataArray[13] == 'Yes')  {
    					document.doctorform.PhysicianFellow.value = 'Yes';
    					document.doctorform.LockedPhysicianFellowYes.disabled = false;
    					document.doctorform.LockedPhysicianFellowYes.checked = true;
    			
    			}
    			
    		
    			if (dataArray[13] == 'No')  {
    					document.doctorform.PhysicianFellow.value = 'No';
    					document.doctorform.LockedPhysicianFellowNo.disabled = false;
    					document.doctorform.LockedPhysicianFellowNo.checked = true;

  • #8
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is really easy.
    using the example in the previous post:


    <HTML>
    <HEAD>
    <script type="text/javascript">

    function setRadioHdl(e){
    var srcEl = getSrc(e);
    var ra = srcEl.form[srcEl.name]
    if(ra.ind+1 > 0) return
    ra.ind = -1
    for(var i=0;i<ra.length;i++) if(ra[i].checked){ra.ind = i; break;}

    for(var i=0;i<ra.length;i++) ra[i].onclick = restoreRadioOnClick
    }


    function setRadioSelIndxOnFocus(e){
    var srcEl = getSrc(e);
    var ra = srcEl.form[srcEl.name]
    ra.ind = -1
    for(var i=0;i<ra.length;i++) if(ra[i].checked){ra.ind = i;break}

    }

    function restoreRadioOnClick(e){
    var srcEl = getSrc(e);
    var ra = srcEl.form[srcEl.name]
    if(ra.ind+1) ra[ra.ind].click()
    else srcEl.checked = false
    }

    function getSrc(e)
    {
    return e? e.target || e.srcElement : event.srcElement;
    }

    </script>

    </HEAD>
    <BODY >


    <form name="myform">

    <input type=radio name="zzz1" value="1" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)" >
    <input type=radio name="zzz1" value="2" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)">
    <input type=radio name="zzz1" value="3" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)" checked>
    <input type=radio name="zzz1" value="4" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)">
    <input type=radio name="zzz1" value="5" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)">

    <p>

    <input type=radio name="zzz2" value="1" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)" >
    <input type=radio name="zzz2" value="2" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)">
    <input type=radio name="zzz2" value="3" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)" >
    <input type=radio name="zzz2" value="4" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)" >
    <input type=radio name="zzz2" value="5" onclick="restoreRadioOnClick(event)" onfocus="setRadioSelIndxOnFocus(event)">

    <p>

    <input type=radio name="zzz3" value="1" onfocus="setRadioHdl(event)" >
    <input type=radio name="zzz3" value="2" onfocus="setRadioHdl(event)" checked>
    <input type=radio name="zzz3" value="3" onfocus="setRadioHdl(event)" >
    <input type=radio name="zzz3" value="4" onfocus="setRadioHdl(event)">
    <input type=radio name="zzz3" value="5" onfocus="setRadioHdl(event)">


    </form>

    </BODY>
    </HTML>

  • #9
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    even shorter

    <HTML>
    <HEAD>
    <script type="text/javascript">

    function setRadioCl(e){
    var srcEl = getSrc(e);
    var ra = srcEl.form[srcEl.name]
    for(var i=0;i<ra.length;i++){
    if(ra[i].checked) ra[i].onpropertychange = function(e){getSrc(e).click()}
    else ra[i].onclick = function(){return false};
    }
    }


    function getSrc(e)
    {
    return e? e.target || e.srcElement : event.srcElement;
    }

    </script>

    </HEAD>
    <BODY >


    <form name="myform">


    <input type=radio id=id1 name="zzz4" value="1" onfocus="setRadioCl(event)" >
    <input type=radio id=id2 name="zzz4" value="2" onfocus="setRadioCl(event)" checked>
    <input type=radio id=id3 name="zzz4" value="3" onfocus="setRadioCl(event)" >


    </form>

    </BODY>
    </HTML>

  • #10
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    corrections to functions

    function setRadioSelIndxOnFocus(e){
    var srcEl = getSrc(e);
    var ra = srcEl.form[srcEl.name]
    // remember selected index and save as expando propery of the element[0]
    if(ra[0].indxSelctd >= -1) return
    ra[0].indxSelctd = -1

    for(var i=0;i<ra.length;i++) if(ra[i].checked){ra[0].indxSelctd = i; break;}
    }

    function restoreRadioOnClick(e){
    var srcEl = getSrc(e);
    var ra = srcEl.form[srcEl.name]
    if(ra[0].indxSelctd > -1) ra[ra[0].indxSelctd].click()else srcEl.checked = false
    }

  • #11
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Duke Leto View Post
    display a Radio Button set that can be set in code and optionally prevent the user from changing it.
    This should be done server-side.
    Quote Originally Posted by Duke Leto View Post
    Nothing seems to do the job, particularly given that neither of the options being selected must be an option.
    You might want to include an "empty" option or another input that toggles whether or not to use the radio button value.
    and disabled is simply not an option since I need the value to post on submit no matter what.
    This is a server-side issue.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).


  •  

    Posting Permissions

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