...

View Full Version : Making an Input Radio readonly through Javascript



Duke Leto
05-26-2006, 03:49 PM
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.

Kravvitz
05-26-2006, 09:13 PM
Why don't you use an <input type="hidden"> to pass the value?

Mr J
05-26-2006, 11:38 PM
Not sure if something like this is what you mean


<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>

Duke Leto
05-27-2006, 07:13 AM
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.)


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.

Kor
05-27-2006, 07:46 AM
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.

Mr J
05-27-2006, 12:05 PM
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


<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>

Duke Leto
05-30-2006, 06:30 PM
For those who care, here's the solution I hit upon:


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;

akuznets
12-24-2007, 09:34 PM
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>

akuznets
12-27-2007, 04:40 AM
<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>

akuznets
01-02-2008, 07:50 PM
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
}

hemebond
01-03-2008, 05:01 AM
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.
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum