I need to have this button disabled, and when the user checks a checkbox it needs to be enabled its just not working for me at all, the button stays disabled, i know the onclick is calling the script because i placed an alert in the script and it does alert me....
<script type="text/javascript">
function goFurther(){
if (document.getElementById("ID").checked == true)
document.getElementById("Calculate").disabled = false;
else
document.getElementById("Calculate").disabled = true;
}
</script>
<style type="text/css">
input[disabled]
{
color:Gray; text-decoration:none;
}
</style>
<CFOUTPUT query = "qGetOpenItemsTrans">
<TR>
<TD ALIGN = "CENTER">
<input type="checkbox" name = "chkbx" id='#ID#' value="#seq_claim_id#" onClick="goFurther()" unchecked = 0 >
</TD>
<TD ALIGN = "CENTER">#Inventory_Date#</TD>
<TD ALIGN = "CENTER">#seq_claim_id#</TD>
<TD ALIGN = "CENTER">#Month_Closed#</TD>
<TD ALIGN = "CENTER">#Amount_Rcvd_by_FRG#</TD>
<TD ALIGN = "CENTER">#Commission_Amt#</TD>
<TD ALIGN = "CENTER">#Net_Recovery#</TD>
</TR>
<INPUT TYPE ="Button" NAME = "Calculate" VALUE = "Calculate" onClick = "FormSubmit();" style="height:35px; width:150px; font-size:medium; font-weight:bold; color:green;" disabled >
You are calling document.getElementById("Calculate"), but your button does not have an id of "Calculate".
id="Calculate"
In addition to your name attribute needing replaced by (or added with) id attibute, your function is also trying to get an element with the ID value of id. However, your IDs are dynamic via your query loop. Pass the clicked element itself to the goFurther function so you have direct reference to the checked element.
<input type="checkbox" name="chkbx" id='#ID#' value="#seq_claim_id#" onClick="goFurther(this)" >
<INPUT TYPE="Button" id="Calculate" VALUE="Calculate" onClick="FormSubmit();" style="height:35px; width:150px; font-size:medium; font-weight:bold; color:green;" disabled >
<script>function goFurther(elem){
if (elem.checked == true)
document.getElementById("Calculate").disabled = false;
else
document.getElementById("Calculate").disabled = true;
}</script>
You may also simplify your function further by doing the following:
function goFurther(elem){
document.getElementById("Calculate").disabled = !elem.checked;
}
UPDATE:
To your styling issue. this is due to how CSS works. You have a disabled style selector defined in your CSS, but your in-line style is set to color: green which will always take presidence over any defined stylesheets.
<style>
input#Calculate {
color:green;
}
input#Calculate[disabled]
{
color:Gray; text-decoration:none;
}
</style>
<INPUT TYPE="Button" id="Calculate" VALUE="Calculate" onClick="FormSubmit();" style="height:35px; width:150px; font-size:medium; font-weight:bold;" disabled >
You seems to be confused with the attributes "name" and "id".
The attribute "id" give you access to an element (tag)
The attribute "name" defines on form child elements (like input, button) the name of the value.
In your case you should change to
...
<input type="checkbox" name = "chkbx" id='ID'
onClick="goFurther(this); return false;">
...
<script type="text/javascript">
function goFurther(self){
document.getElementById("Calculate").disabled = !self.checked;
}
</script>
I guess this way it much easier to read (but still untested)
<INPUT TYPE ="Button" ID = "Calculate" NAME = "Calculate" VALUE = "Calculate"
onClick = "FormSubmit();" style="height:35px; width:150px; font-size:medium;
font-weight:bold; color:green;" disabled >
Related
The title is self-explanatory, I tried using .checked(and several other methods that also failed), but it did not work.
I want to know how, so I can count the score for a quiz.
Here is the html part for it:
<html>
<head lang=pt>
<meta charset="utf-8">
<title>Formulario</title>
<link rel="stylesheet" type="text/css" href="quiz1.css">
<script src=quiz.js></script>
</head>
<body>
<form class=formulario onsubmit="return mostrar_placar()">
<h3 id = "pergunta">Qual é o nome do inventor da linguagem de programação Python?<br></h3>
<input class = "escolhas" id ="0" type="button" value="Guido van Rossum" onclick="keep_highlighted('0')"><br>
<input class = "escolhas" id ="1" type="button" value="Dennis Ritchie" onclick="return keep_highlighted('1')"><br>
<input class = "escolhas" id ="2" type="button" value="James Gosling" onclick="return keep_highlighted('2')"><br>
<input class = "escolhas" id ="3" type="button" value="Brendan Eich" onclick="return keep_highlighted('3')"><br>
<h3 id = "pergunta">Dentre as alternativas a seguir, qual não é um item de hardware?<br></h3>
<input class = "escolhas" id ="4" type="button" value="Mouse" onclick="return keep_highlighted('4')"><br>
<input class = "escolhas" id ="5" type="button" value="Processador" onclick="return keep_highlighted('5')"><br>
<input class = "escolhas" id ="6" type="button" value="Chipset" onclick="return keep_highlighted('6')"><br>
<input class = "escolhas" id ="7" type="button" value="Debian" onclick="return keep_highlighted('7')"><br><br>
<input type="submit" value="confirmar">
</form>
</body>
</html>
And this is the js:
var certos = ["0", "7"];
function keep_highlighted(id) {
document.getElementById(id).style.background = "white";
document.getElementById(id).style.color = "black";
}
function placar() {
var placar = 0;
for (var i = 0; i < 8; i++) {
console.log(document.getElementById(i.toString()).checked);
if (document.getElementById(i.toString()).checked) {
if (document.getElementById(i.toString()).value == certos[i]) {
placar += 1;
}
}
}
return placar;
}
function mostrar_placar() {
alert("Seu placar é " + placar());
}
The console is only printing 8 falses no matter what I click(showing that its never checked). So it never enters in the condition that counts the score (without if (document.getElementById(i.toString()).checked) it always shows 2 on the score since it loops through all the buttons even the ones not selected). And with it always shows the score as 0....can someone help?
Buttons should not be used to signify an answer unless they are part of a group of choices. Then, you have to decide if only one item from the group should be allowed to be selected or if multiple items are allowable. This is exactly what checkboxes and radio buttons are for.
Now, you don't have to show the user checkboxes or radio buttons - you can show them something that looks like a button instead, but the "buttons" need to behave either like checkboxes or radio buttons. This can be accomplished by actually using checkboxes or radio buttons, but hiding those and, instead, showing label elements that are tied to the hidden items.
Then, in your JavaScript, you can access the actual checkboxes and radio buttons as you normally would.
Here is an example of using hidden checkboxes so that multiple "button" elements can be selected:
document.getElementById("getChecked").addEventListener("click", function(){
// Gather up all the checked checkboxes into an Array;
var checkedCheckboxes =
Array.prototype.slice.call(document.querySelectorAll("input[type='checkbox']:checked"));
// Set up result array
var result = [];
// Loop over them and add selected values to array
checkedCheckboxes.forEach(function(checkbox){
result.push(checkbox.value);
});
// Clear old output and log new results
console.clear();
console.log(result);
});
/* Hide the checkboxes */
input[type='checkbox'] { display:none; }
/* Default styling for labels to make them look like buttons */
input[type='checkbox'] + label {
display:inline-block;
box-shadow:1px 1px grey;
border-radius:3px;
background-color:#e0e0e0;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
}
/* Styling for labels when corresponding checkbox is checked */
input[type='checkbox']:checked + label {
box-shadow:-1px -1px grey;
background-color:#f78d32;
}
<input type="checkbox" id="chk1" name="chk1" value="choice 1">
<label for="chk1">Choice 1</label>
<input type="checkbox" id="chk2" name="chk2" value="choice 2">
<label for="chk2">Choice 2</label>
<input type="checkbox" id="chk3" name="chk3" value="choice 3">
<label for="chk3">Choice 3</label>
<p><button id="getChecked">Get the checked checkbox values</button></p>
Using radio buttons, so that only one "button" can be selected, is almost identical, except for the HTML uses input type=radio and the CSS and JavaScript selectors change to find those radio buttons. Also, since only one radio button can ever be selected (within any given group), there's no need to gather up all the checked radio buttons (from one group) into an array. There will just be one checked button.
document.getElementById("getChecked").addEventListener("click", function(){
// Get the one radio button (within its group) that is checked:
var checkedRadio = document.querySelector("input[type='radio'][name='rad']:checked");
// Clear old output and log new results
console.clear();
console.log(checkedRadio.value);
});
/* Hide the checkboxes */
input[type='radio'] { display:none; }
/* Default styling for labels to make them look like buttons */
input[type='radio'] + label {
display:inline-block;
box-shadow:1px 1px grey;
background-color:#e0e0e0;
padding:5px;
border-radius:3px;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
}
/* Styling for labels when corresponding radio button is checked */
input[type='radio']:checked + label {
box-shadow:-1px -1px grey;
background-color:#f78d32;
}
<input type="radio" id="rad1" name="rad" value="choice 1">
<label for="rad1">Choice 1</label>
<input type="radio" id="rad2" name="rad" value="choice 2">
<label for="rad2">Choice 2</label>
<input type="radio" id="rad3" name="rad" value="choice 3">
<label for="rad3">Choice 3</label>
<p><button id="getChecked">Get the checked radio button value</button></p>
"Ah so how I see if it's highlighted..."
It appears that you want to know if the button is highlighted, which basically is to say that it's the element that is "active" or has focus. You can get this via document.activeElement.
Here's a demo that shows the active element change with clicks on the body.
document.body.onclick = function() {
console.log(document.activeElement);
};
html, body { height: 100%; }
<button>button</button>
<input placeholder="click in here">
However, you're asking about your solution instead of fully explaining the problem. I don't know how this relates to scoring a quiz, so it could be that you need something very different.
An input button cannot be "checked" in itself. You have a few options for how to handle this though. You could change the elements to a form with radio buttons or checkbox buttons. However, if you want to keep the buttons you could also do something in the javascript keep_highlighted method when the button is clicked such as:
if (document.getElementById(id).classList.contains("checked")) {
document.getElementById(id).classList.remove("checked");
} else {
document.getElementById(id).classList.add("checked");
}
and you can get this list of "checked" buttons by using:
document.getElementsByClassName("checked");
This will toggle the "checked" class on the element, which you can get a list of elsewhere in your javascript, such as wherever your submit button directs to
EDIT: Also, you could move your button styling into these if blocks so that you could "toggle" the buttons to be highlighted or not based on them being clicked and users could also "uncheck" a selection.
document.getElementById(id).setAttribute("checked","");
document.getElementById(id).removeAttribute("checked");
You want to set a property such as 'checked' or 'clicked' or 'highlighted' for each button. Then when you click the button, set that to true. Then to check which have been clicked, loop those buttons and check if 'clicked' is true or false.
let buttons = document.querySelectorAll('input[type="button"]');
let buttonData = Array.from(buttons).map((el, i) => {
el.addEventListener('click', ()=>{
const clicked = !buttonData[i].clicked;
buttonData[i].clicked = clicked;
if(clicked){
el.classList.add('highlighted');
} else {
el.classList.remove('highlighted');
}
});
return {element: el, clicked:false}
});
buttonData.forEach((btn, i) => {
});
document.getElementById('check-buttons').addEventListener('click', ()=>{
buttonData.forEach((btn, i) => {
console.log("button:", btn.element.id, "is highlighted?", btn.clicked);
});
});
input[type="button"] {
min-width: 100px;
display: block;
}
.highlighted {
background-color: white;
outline: 2px solid rgba(230,200,100);
}
<input type="button" id="button0" value="button 0">
<input type="button" id="button1" value="button 1">
<input type="button" id="button2" value="button 2">
<input type="button" id="button3" value="button 3">
<br>
<button id="check-buttons"> which buttons are highlighted ?</button>
I have been using the following code to change the color of <p> depending upon the radio button checked.
I have been using two classes red and blue,
but its not working.
So kindly help me out.
<html>
<head>
<script type="text/javascript">
var ele = document.getElementsByName('color');
if (ele[0].checked) { //index has to be j.
$("p").toggleClass("blue");
}
else {
$("p").toggleClass("red");
}
</script>
<style type="text/css">
.blue
{
color:blue;
}
.red
{
color:red;
}
</style>
</head>
<body>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p>When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>
As such, your javascript will be executed before your elements even exist in the DOM. You should put your javascript code at the very end of the body, or include it in an event handler triggered when your document is loaded.
The HTML :
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p id="myParagraph">When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
In Vanilla JS :
document.addEventListener('DOMContentLoaded', function() {
var radioButtons = document.getElementsByName('color');
var paragraph = document.getElementById('myParagraph');
for(var i=0;i< radioButtons.length;i++)
{
var elem = radioButtons[i];
elem.addEventListener('change',function(e){
console.log(paragraph);
if(paragraph.className)
paragraph.className = this.value;
else
paragraph.classList.add(this.value);
}
,false);
}
});
Fiddle of this
Or, if you use jQuery and correctly include it in your page (which is not the case in your example) :
$('document').ready(function() {
$('input:radio').on('change',function(){
$('#myParagraph').addClass(this.value);
});
});
Fiddle of this
I have a problem with a form in IE. I have disabled fields in form i,e. field having property disabled="disabled". These fields show the input text in grey color and that looks very dull/blurred and if i try apply css changes to such fields, it will not work for IE, but works for other browsers like chrome, firefox.
Is there any way to make the text to better font color here?
I thought one way of doing this is removing property disabled="disabled" and add property readonly="readonly" with javascript. If this is possible then how can i do this with Javascript. I am new to Javascript, so please help me
Below HTML to explain the behaviour. Run this in both IE and other browser to see the difference.
<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
</body>
</html>
I am testing this in IE9.
You can change disabled input fields into readonly ones by using the .prop() method available in jQuery. I typically discourage the use of .attr(), and this is why.
$(function (){
$('input').prop({
'disabled': false,
'readonly': true
});
});
Although the method .removeProp() is available, documentation encourages refrain when using it, because, to quote, it "will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead."
View demo here: http://jsfiddle.net/teddyrised/tE98z/
document.getElementById("your_field").readOnly=true;
or, with jQuery:
$('#your_field').attr('readonly', true);
<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
<script type = "text/javascript">
document.getElementById("disabled-field-id").disabled = false;
document.getElementById("disabled-field-id").readOnly = true;
</script>
</body>
</html>
Use the setAttribute property. Note in example that if select 1 apply the readonly attribute on textbox, otherwise remove the attribute readonly.
http://jsfiddle.net/baqxz7ym/2/
document.getElementById("box1").onchange = function(){
if(document.getElementById("box1").value == 1) {
document.getElementById("codigo").setAttribute("readonly", true);
} else {
document.getElementById("codigo").removeAttribute("readonly");
}
};
<input type="text" name="codigo" id="codigo"/>
<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
if you disable the inputs programmatically can set style as you want
try it:
//bloqueo todos los radiobuttons y checkboxs
//block all radiobuttons and checkbox
jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function () {
jQuery(this).prop("checked", false);
});
//bloqueo campos de texto
//block all text fields
jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function () {
jQuery(this).blur();
});
//bloqueo selects
//block all selects
jQuery(document).on("focusin", 'select.yourClass', function (event) {
var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
});
if you want set style they aren't technically disabled
here can see the original code: https://jsfiddle.net/9kjqjLyq/
You need to depend on a pure javascript(preferrably jQuery) solution.
Add a custom attribute to all your controls:
<input type="text" disabled="true" />
Now you can check if they are disabled and you can proceed to block them using javascript:
var value = yourTextBox.value; //the last value that the control holds,
//before it was disabled?
$('yourTextBox').click(function() {
value = $(this).value;
});
$('yourTextBox').blur(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
To add more strictness, add another function:
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
If you want something simple, I would recommend this:
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
return false;
});
I have 10 radio button/buttonset from jQuery. Of course every button has its own value, and I want to show the value beside the button, when the button is hovered.
How can I deal with it?
Illustration:
row1 : radio1.1 radio1.2 radio1.3 print value radio in here when
radio is hovered
row2 : radio2.1 radio2.2 radio2.3 print value radio in here when
radio is hovered
row3 : radio3.1 radio3.2 radio3.3 print value radio in here when
radio is hovered
I have used live function from jQuery to get event mouseover, but how can I specific place the value into specific row?
How can I get which radio is hovered, so I can get its value?
<!DOCTYPE html>
<html>
<head>
<link href="jslib/jquery_theme/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
<script src="jslib/jquery-1.7.1.min.js"></script>
<script src="jslib/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".ter").buttonset();
});
$('.ter > label').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
document.getElementById('mydiv').innerHTML = "Hello World";
//this is when radio is hovered, it should show radio value beside the rwadio
} else {
document.getElementById('mydiv').innerHTML = "out";
//this is when mouse is out from radio
}
});
$(function() {
$("#radio :radio").change(function(e) {
alert(
"run ok"
);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="radio">
<form name='tes' method='post' action='a.php'>
<?php for($I=0;$I<10;$I++){
echo"
<div class='ter' style='border:1px solid; width:400px; margin-bottom:5px;'>
<input type='radio' id='radio1.$I' name='radio.$I' value='4' /><label for='radio1.$I'> </label>
<input type='radio' id='radio2.$I' name='radio.$I' checked='checked' value='3' /><label for='radio2.$I'> </label>
<input type='radio' id='radio3.$I' name='radio.$I' value='2' /><label for='radio3.$I'> </label>
<input type='radio' id='radio4.$I' name='radio.$I' value='1'/><label for='radio4.$I'> </label>
<span id='mydiv'>aaaaaaaaaa</span>
</div> ";
} ?>
<div class='ter'>
<input type='submit' value ='submit'>
</div>
</form>
</div>
</body>
</html>
as i understand from your words, the event will be at the radio buttons
$('input[type=radio]').live({
mouseover:function(){
var value = $(this).attr('value');
$(this).next().html(value);
},
mouseout:function(){
$(this).next().html("");
}
});
when the radio button is hovered, then get it's value and print it in the label(next).
$('.ter > label').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
document.getElementById('mydiv').innerHTML = $("#"+$(this).attr("for")).val();
//this is when radio is hovered, it should show radio value beside the rwadio
} else {
document.getElementById('mydiv').innerHTML = "";
//this is when mouse is out from radio
}
This will put the radio value corresponding to the label, and now you can position the div accordingly.
You can achieve this effect without javascript, using only HTML and CSS:
HTML
<form>
<label><input type="radio" name="Test" value="Something"/></label>
<label><input type="radio" name="Test" value="Something else"/></label>
</form>
CSS
input:hover:after,
input:focus:after {
content: attr(value);
padding-left: 2em;
}
This takes advantage of the CSS content property to extract and display the values of elements it's applied to. You might need to work with the CSS to style it how you want - I'm thinking absolute positioning, relative to each row.
This won't work in older versions of IE. 8+ will definitely work - I'm not sure about 7 and below.
I am javascript learner and have been trying to do this
two radio buttons but1 but2
two text boxes box1 box2
What I need to do is
when but1 is selected, box1 should be editable and box2 should be readonly.
when but2 is selected, box2 should be editable and box1 should be readonly.
On page load both the text boxes should be readonly.
My code is as below
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked = true) {
document.getElementById('box2').readonly = true;
}
else if (document.getElementById('but2').checked = true) {
document.getElementById("box1").readonly = true;
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
I do not want to disable the textboxes but make them readonly, so that on form submit i will have the textbox values that i can send to the server.
I do not know what mistake im doing here. Any help will be greatly appreciated. Thanks
You need to set the "readonly" attibute like this:
document.getElementById('box2').setAttribute('readonly','readonly')
and clear it like thisL
document.getElementById('box2').setAttribute('readonly','')
hope, this code would be of any help.
here is my try:
http://jsfiddle.net/ylokesh/AAAVp/1/
You're making a couple of mistakes.
First of all, your css and javascript code must be included into the <head> tag, which should be placed soon after <html>, before <body>.
Secondly your if statements are incorrect: with just one = sign you assign a value to a variable, you have to use two (or in this case three) of them to check the variables against a value, like this: if (something == value).
Lastly, you'd better use the functions setAttribute() and removeAttribute() to modify the values of the readonly attribute.
The complete code would be:
<html>
<head>
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked === true) {
document.getElementById('box2').setAttribute('readonly','readonly');
document.getElementById('box1').removeAttribute('readonly','');
}
else if (document.getElementById('but2').checked === true) {
document.getElementById('box1').setAttribute('readonly','readonly');
document.getElementById('box2').removeAttribute('readonly','');
}
}
</script>
</head>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
Basically, you're using = instead of == on your conditionals. Also, you always have to set readonly to false on the one of the boxes, or you'll end up with two readonly boxes after two clicks. Try this:
EDIT the attribute name is readOnly, not readonly. Code also edited to manipulate the attribute directly, instead of using setAttribute. See working version on jsfiddle:
function makeChoice() {
document.getElementById('box1').readOnly = document.getElementById('but2').checked
document.getElementById('box2').readOnly = document.getElementById('but1').checked
}
In your IF statements, you are setting a variable, not testing whether it is in one state or another. You need to use this:
if (document.getElementById('but1').checked == true) {
Note that there are two equals signs. This checks whether the two are the same. Basically, one equals sets, two equals compares. Of course change both IF statements to the two equals signs.
Also, you say that onload both should be readonly. To do this, add
readonly="readonly"
to the textboxes. And furthermore, you need to turn readonly off on the appropriate textbox when a radio button is clicked.
So, altogether:
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked) {
document.getElementById('box2').setAttribute('readOnly','readonly');
document.getElementById('box1').removeAttribute('readOnly','');
} else if (document.getElementById('but2').checked) {
document.getElementById('box1').setAttribute('readOnly','readonly');
document.getElementById('box2').removeAttribute('readOnly','');
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde" readonly="readonly">
<input type="text" id="box2" value="pqrst" readonly="readonly">
</table>
</body>
<html>