PDA

Click to See Complete Forum and Search --> : My probelm

dianaGill
09-23-2003, 11:36 AM
Hello all.
I have 3 columns esch consisiting of 2 text boxes and radio button. When user click radio button two textboxes on the same line become editable. When he clicks on the other line they become readonly. They are readonly by default. First part works. When radio button is cheked both textboxes become editable. However, when user clicks radio button on another row, only the first textbox of previous row becomes readonly and NOT the second one. But I do want them BOTH to become readonly.
Here is my code.

<HTML><BODY>
<FORM >
<%

for idx = 1 to 3

%>
<INPUT Type=Radio Name="rbGroup" Value="<%=idx%>" onClick="rbClick(this);">
<INPUT Type=Text Name="1rbtxt_<%=idx%>" Readonly Value="<%=idx%>">
<INPUT Type=Text Name="2rbtxt_<%=idx%>" Readonly Value="<%=idx%>">
<br>

<%
next
%>
</FORM>

<SCRIPT Language="JavaScript">

function rbClick( rb )
{
var fld;
var frm = rb.form;
// check all form elements
//alert (frm)
for ( var ix = 0; ix < frm.elements.length; ++ix )
{
fld = frm.elements[ix];
//alert (fld)
// if this is one of the text fields associated
// with a radio button, then...
if ( fld.name.substring(0,7) == "1rbtxt_" )
{
fld.readOnly = true; // disable it!
}
// alert(ix)
}

// now un-disable only the one that corresponds to the click rb
frm.elements["1rbtxt_" + rb.value].readOnly = false;
frm.elements["2rbtxt_" + rb.value].readOnly = false;

}
</SCRIPT>



Could you please tell me what I'm doing wrong.
TIA.
Diana
Charles
09-23-2003, 12:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
fieldset {border:none; margin:0; display:block; float:left; width:33%}
-->
</style>

<script type="text/javascript">
<!--
// Because 13% of users do not use JavaScript, you need the text boxes to be read-only only when JavaScript is enabled
function disable () {for (var i=0; i<document.forms[0].elements.length; i++) {if (document.forms[0].elements[i].type == 'text') document.forms[0].elements[i].readOnly = true}};

onload = disable;
// -->
</script>

<form action="">
<div>
<fieldset>
<label><input type="radio" name="foo" onclick="disable(); this.form.one_one.readOnly = false; this.form.one_two.readOnly = false">First</label>
<label>First Line<input type="text" name="one_one"></label>
<label>Second Line<input type="text" name="one_two"></label>
</fieldset>
<fieldset>
<label><input type="radio" name="foo" onclick="disable(); this.form.two_one.readOnly = false; this.form.two_two.readOnly = false">Second</label>
<label>First Line<input type="text" name="two_one"></label>
<label>Second Line<input type="text" name="two_two"></label>
</fieldset>
<fieldset>
<label><input type="radio" name="foo" onclick="disable(); this.form.three_one.readOnly = false; this.form.three_two.readOnly = false">Third</label>
<label>First Line<input type="text" name="three_one"></label>
<label>Second Line<input type="text" name="three_two"></label>
</fieldset>
</div>
</form>
96turnerri
09-23-2003, 12:09 PM
try this untested code

<HTML><BODY>
<FORM name="rb">
<%

for idx = 1 to 3

%>
<INPUT Type=Radio Name="rbGroup" Value="<%=idx%>" onClick="rbClick(this);">
<INPUT Type=Text Name="1rbtxt_<%=idx%>" Readonly Value="<%=idx%>">
<INPUT Type=Text Name="2rbtxt_<%=idx%>" Readonly Value="<%=idx%>">
<br>

<%
next
%>
</FORM>

<form name="rc">
<%

for idx = 4 to 6

%>
<INPUT Type=Radio Name="rcGroup" Value="<%=idx%>" onClick="rcClick(this);">
<INPUT Type=Text Name="3rbtxt_<%=idx%>" Readonly Value="<%=idx%>">
<INPUT Type=Text Name="4rbtxt_<%=idx%>" Readonly Value="<%=idx%>">
<br>

<%
next
%>
</form>

<SCRIPT Language="JavaScript">

function rcClick( rd )
{
var fld;
var frm = rc.form;
// check all form elements
//alert (frm)
for ( var ix = 0; ix < frm.elements.length; ++ix )
{
fld = frm.elements[ix];
//alert (fld)
// if this is one of the text fields associated
// with a radio button, then...
if ( fld.name.substring(0,7) == "3rbtxt_" )
{
fld.readOnly = true; // disable it!
}
// alert(ix)
}

// now un-disable only the one that corresponds to the click rc
frm.elements["3rbtxt_" + rc.value].readOnly = false;
frm.elements["4rbtxt_" + rc.value].readOnly = false;

}
</SCRIPT>

<SCRIPT Language="JavaScript">

function rbClick( rb )
{
var fld;
var frm = rb.form;
// check all form elements
//alert (frm)
for ( var ix = 0; ix < frm.elements.length; ++ix )
{
fld = frm.elements[ix];
//alert (fld)
// if this is one of the text fields associated
// with a radio button, then...
if ( fld.name.substring(0,7) == "1rbtxt_" )
{
fld.readOnly = true; // disable it!
}
// alert(ix)
}

// now un-disable only the one that corresponds to the click rb
frm.elements["1rbtxt_" + rb.value].readOnly = false;
frm.elements["2rbtxt_" + rb.value].readOnly = false;

}
</SCRIPT>
Charles
09-23-2003, 12:17 PM
Originally posted by 96turnerri
try this untested codeMine is tested, found to work and, unlike yours, employs valid HTML.
96turnerri
09-23-2003, 12:30 PM
whats not valid then?
dianaGill
09-23-2003, 12:32 PM
TO BOTH OF YOU !!!!
D.
Charles
09-23-2003, 12:33 PM
Originally posted by 96turnerri
whats not valid then? Run the ouotput from that through the validator (http://validator.w3.org/) to find out.
96turnerri
09-23-2003, 12:36 PM
doesnt have a character encoding label, but the script is they are after not the whole god damn page
Charles
09-23-2003, 12:39 PM
The character encoding is just the start of it.
dianaGill
09-23-2003, 01:04 PM
I dont see the difference between your code and mine. You just copied and pasted my code again with different variable names.
Khalid Ali
09-23-2003, 01:18 PM
There could be several things which are questionable(just to shed some light)

1.
[b]<FORM name="rb"> [/]

None of the html elements(Nor should be the attributes for that matter) should be in CAPS.

2.[b]Type=Text[/]

Attributes should be in lower case and they must be enclosed in qoutes as well as atttribute value should be in lower case.

type="text"

3.[b]onClick="rbClick(this);"> [/]

input tag requires to close this element which means the above line should be
<input ..../>

Hope this helps
Charles
09-23-2003, 01:29 PM
Those apply if we use the stricter XHTML rules, but just limiting ourselves to HTML there is much wrong there.
96turnerri
09-23-2003, 01:55 PM
i didnt actually write the code, it was duplicated from original so any attritutes or tags that are in CAPS are not due to me, i use lower case ones