By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,610 Members | 2,110 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,610 IT Pros & Developers. It's quick & easy.

How can I dynamically make a text box read only?

P: n/a

Folks,

I have seven text boxes which will contain measurements - I would like
the user to input their values in the order that I have listed the boxes.

How can I therefore make an input type=text name=box2 a readonly while
type=text name=box1 has a length of zero?

This is for an intranet based application and I understand all the
arguements and points that one has to consider in such that my server
side PHP does not expect the data to be input in a certain order - in
addition, I know that some users might want to input the data in
reverse, but I would prefer this not to be the case.

Can someone offer me direction (my js is improving so rough direction
would might well be sufficient).

Thanks/Regards
Randell D.
Jul 23 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Randell D. wrote:

Folks,

I have seven text boxes which will contain measurements - I would like
the user to input their values in the order that I have listed the boxes.

How can I therefore make an input type=text name=box2 a readonly while
type=text name=box1 has a length of zero?

This is for an intranet based application and I understand all the
arguements and points that one has to consider in such that my server
side PHP does not expect the data to be input in a certain order - in
addition, I know that some users might want to input the data in
reverse, but I would prefer this not to be the case.


box1... onchange="if(this.value){box2reference.readonly=fa lse}">

etc.
Mick
Jul 23 '05 #2

P: n/a
Mick White wrote:
Randell D. wrote:

Folks,

I have seven text boxes which will contain measurements - I would like the user to input their values in the order that I have listed the boxes.
How can I therefore make an input type=text name=box2 a readonly while type=text name=box1 has a length of zero?

This is for an intranet based application and I understand all the
arguements and points that one has to consider in such that my server side PHP does not expect the data to be input in a certain order - in addition, I know that some users might want to input the data in
reverse, but I would prefer this not to be the case.


box1... onchange="if(this.value){box2reference.readonly=fa lse}">

etc.
Mick


Think that should be 'readOnly'. ;-)
Here's another approach. No time to test so...

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function inSeq()
{
var els = document.forms[0].elements,
el,
j = 0,
blank = false;
while (el = els[j++])
{
blank = blank || (/^\s*$/.test(el.value));
if (el = els[j])
el.disabled = blank;
}
}

function init()
{
var els = document.forms[0].elements,
el,
j = 0,
blank = false;
while (el = els[j++])
{
if (/\b(normal|dependent)\b/.test(el.className))
el.onkeyup = inSeq;
if (/\bdependent\b/.test(el.className))
{
blank = blank || /^\s*$/.test(el.value);
if (els[j])
els[j].disabled = blank;
}
}
if ((el = els[0]).focus)
el.focus();
}

window.onload = init;

</script>
</head>
<body>
<form>
<h4>Please enter measurements in order.</h4>
<ul>
<li><input type="text" class="normal" name="box1" value="">___box
1</li>
<li><input type="text" class="dependent" name="box2" value="" />___box
2</li>
<li><input type="text" class="dependent" name="box3" value="" />___box
3</li>
<li><input type="text" class="dependent" name="box4" value="" />___box
4</li>
<li><input type="text" class="dependent" name="box5" value="" />___box
5</li>
<li><input type="text" class="dependent" name="box6" value="" />___box
6</li>
<li><input type="text" class="dependent" name="box7" value="" />___box
7</li>
</ul>
</form>
</body>
</html>

Jul 23 '05 #3

P: n/a
Mick White wrote:
Randell D. wrote:

Folks,

I have seven text boxes which will contain measurements - I would like
the user to input their values in the order that I have listed the boxes.

How can I therefore make an input type=text name=box2 a readonly while
type=text name=box1 has a length of zero?

This is for an intranet based application and I understand all the
arguements and points that one has to consider in such that my server
side PHP does not expect the data to be input in a certain order - in
addition, I know that some users might want to input the data in
reverse, but I would prefer this not to be the case.

box1... onchange="if(this.value){box2reference.readonly=fa lse}">

etc.
Mick

Thanks... this is short and sweet and something I can both understand
and support.

Cheers
Randell D.
Jul 23 '05 #4

P: n/a
RobB wrote:
Mick White wrote:
Randell D. wrote:

Folks,

I have seven text boxes which will contain measurements - I would
like
the user to input their values in the order that I have listed the
boxes.
How can I therefore make an input type=text name=box2 a readonly
while
type=text name=box1 has a length of zero?

This is for an intranet based application and I understand all the
arguements and points that one has to consider in such that my
server
side PHP does not expect the data to be input in a certain order -
in
addition, I know that some users might want to input the data in
reverse, but I would prefer this not to be the case.


box1... onchange="if(this.value){box2reference.readonly=fa lse}">

etc.
Mick

Think that should be 'readOnly'. ;-)
Here's another approach. No time to test so...

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function inSeq()
{
var els = document.forms[0].elements,
el,
j = 0,
blank = false;
while (el = els[j++])
{
blank = blank || (/^\s*$/.test(el.value));
if (el = els[j])
el.disabled = blank;
}
}

function init()
{
var els = document.forms[0].elements,
el,
j = 0,
blank = false;
while (el = els[j++])
{
if (/\b(normal|dependent)\b/.test(el.className))
el.onkeyup = inSeq;
if (/\bdependent\b/.test(el.className))
{
blank = blank || /^\s*$/.test(el.value);
if (els[j])
els[j].disabled = blank;
}
}
if ((el = els[0]).focus)
el.focus();
}

window.onload = init;

</script>
</head>
<body>
<form>
<h4>Please enter measurements in order.</h4>
<ul>
<li><input type="text" class="normal" name="box1" value="">___box
1</li>
<li><input type="text" class="dependent" name="box2" value="" />___box
2</li>
<li><input type="text" class="dependent" name="box3" value="" />___box
3</li>
<li><input type="text" class="dependent" name="box4" value="" />___box
4</li>
<li><input type="text" class="dependent" name="box5" value="" />___box
5</li>
<li><input type="text" class="dependent" name="box6" value="" />___box
6</li>
<li><input type="text" class="dependent" name="box7" value="" />___box
7</li>
</ul>
</form>
</body>
</html>


Thanks for the above - its a bit tricky for me and I'd have difficulty
supporting it - I gather you're using a mix of javascript and CSS which
is an interesting approach. I'm going to have to study it a little
though...

Thanks
Randell D.
Jul 23 '05 #5

P: n/a
JRS: In article <usVRd.439326$Xk.154298@pd7tw3no>, dated Sun, 20 Feb
2005 05:43:54, seen in news:comp.lang.javascript, Randell D. <reply.via.
ne********************@fiprojects.moc> posted :
Mick White wrote:
Randell D. wrote:
I have seven text boxes which will contain measurements - I would like
the user to input their values in the order that I have listed the boxes.

How can I therefore make an input type=text name=box2 a readonly while
type=text name=box1 has a length of zero?
box1... onchange="if(this.value){box2reference.readonly=fa lse}">
Thanks... this is short and sweet and something I can both understand
and support.


But should the user then be allowed to alter the previous box? If so,
should all following boxes be auto-emptied?

If a box that has been altered is emptied by the user, should he then be
again able to edit the previous box?

You might do better to have a single entry box and a controlled means of
transferring its contents to the main data set, in boxes or a textarea.
--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #6

P: n/a
Randell D. wrote:

(snip)
Thanks for the above - its a bit tricky for me and I'd have difficulty supporting it - I gather you're using a mix of javascript and CSS which is an interesting approach. I'm going to have to study it a little
though...


No CSS at all, just the HTML "disabled" attribute. Read-only fields,
especially ones that toggle back and forth, can be very confusing for
users. Disablement, familiar by now, at least supplies some visual
feedback . Some UAs shade the field as well (not IE, but this can be
patched in with an htc if desired). There are some usability questions
here which I'll pass on for now. The disabling is initially applied via
the behavioral layer (JS) so, JS-disabled users can still enter data.

Tidied this up a bit...just in case you're interested.

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function inSeq()
{
var els = document.forms[0].elements,
el,
i = 0,
blank = false;
while (el = els[i++])
{
blank = blank || (/^\s*$/.test(el.value));
if (el = els[i])
el.disabled =
blank && /\bdependent\b/.test(el.className);
}
}

function init()
{
var els = document.forms[0].elements,
el,
i = 0;
while (el = els[i++])
{
if (/\b(normal|dependent)\b/.test(el.className))
el.onkeyup = inSeq;
if (/\bdependent\b/.test(el.className))
el.onkeyup();
}
if ((el = els[0]).focus)
el.focus();
}

window.onload = init;

</script>
</head>
<body>
<form
onreset="return(confirm('Clear all entries?'))
&&setTimeout('init()',50)">
<h5 style="font:bold 9pt tahoma;">
Please enter measurements in order.
</h5>
<ul>
<li>
<input type="text" class="normal" name="box1" value="">___box 1
</li>
<li>
<input type="text" class="dependent" name="box2" value="" />___box 2
</li>
<li>
<input type="text" class="dependent" name="box3" value="" />___box 3
</li>
<li>
<input type="text" class="dependent" name="box4" value="" />___box 4
</li>
<li>
<input type="text" class="dependent" name="box5" value="" />___box 5
</li>
<li>
<input type="text" class="dependent" name="box6" value="" />___box 6
</li>
<li>
<input type="text" class="dependent" name="box7" value="" />___box 7
</li>
</ul>
<input type="reset" value="clear" />
</form>
</body>
</html>

Jul 23 '05 #7

P: n/a
Mick White wrote:
Randell D. wrote:

Folks,

I have seven text boxes which will contain measurements - I would like
the user to input their values in the order that I have listed the boxes.

How can I therefore make an input type=text name=box2 a readonly while
type=text name=box1 has a length of zero?

This is for an intranet based application and I understand all the
arguements and points that one has to consider in such that my server
side PHP does not expect the data to be input in a certain order - in
addition, I know that some users might want to input the data in
reverse, but I would prefer this not to be the case.

box1... onchange="if(this.value){box2reference.readonly=fa lse}">

etc.
Mick


Mick,
Sorry its taken until now to test out the above but I've got a damned
cold that is giving me dizzy spells...

However... I've tried what you've suggested (with Mozilla 1.7.5) and I
don't get an error or anything - Furthermore, I've checked out the
Javascript Pocket Reference from O'Reillys and I can't find reference to
anything like it... so maybe I need a little extra help... My form is
called products1, my input boxes are su1, su2, su3...su7... Thus...

<form name="products1" method="POST">
<br>Sale Unit 1<input type=text name=su1 id=su1>
<br>Sale Unit 2<input type=text name=su2 id=su2>
<br>Sale Unit 3<input type=text name=su3 id=su3>
</form>

Using your method, I thought I would have to do the following:
<form name="products1" method="POST">
<br>Sale Unit 1
<input type=text name=su1 id=su1 onChange="if(this.value)
{products1.su2.readonly=false}">

<br>Sale Unit 2<input type=text name=su2 id=su2
onChange="if(this.value) {products1.su3.readonly=false}">

<br>Sale Unit 2<input type=text name=su2 id=su2>

</form>

But that didn't do it... can you tell me where I might have gone wrong?

Thanks,
Randell D.
Jul 23 '05 #8

P: n/a
RobB wrote:
Randell D. wrote:

(snip)

Thanks for the above - its a bit tricky for me and I'd have


difficulty
supporting it - I gather you're using a mix of javascript and CSS


which
is an interesting approach. I'm going to have to study it a little
though...

No CSS at all, just the HTML "disabled" attribute. Read-only fields,
especially ones that toggle back and forth, can be very confusing for
users. Disablement, familiar by now, at least supplies some visual
feedback . Some UAs shade the field as well (not IE, but this can be
patched in with an htc if desired). There are some usability questions
here which I'll pass on for now. The disabling is initially applied via
the behavioral layer (JS) so, JS-disabled users can still enter data.

Tidied this up a bit...just in case you're interested.

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function inSeq()
{
var els = document.forms[0].elements,
el,
i = 0,
blank = false;
while (el = els[i++])
{
blank = blank || (/^\s*$/.test(el.value));
if (el = els[i])
el.disabled =
blank && /\bdependent\b/.test(el.className);
}
}

function init()
{
var els = document.forms[0].elements,
el,
i = 0;
while (el = els[i++])
{
if (/\b(normal|dependent)\b/.test(el.className))
el.onkeyup = inSeq;
if (/\bdependent\b/.test(el.className))
el.onkeyup();
}
if ((el = els[0]).focus)
el.focus();
}

window.onload = init;

</script>
</head>
<body>
<form
onreset="return(confirm('Clear all entries?'))
&&setTimeout('init()',50)">
<h5 style="font:bold 9pt tahoma;">
Please enter measurements in order.
</h5>
<ul>
<li>
<input type="text" class="normal" name="box1" value="">___box 1
</li>
<li>
<input type="text" class="dependent" name="box2" value="" />___box 2
</li>
<li>
<input type="text" class="dependent" name="box3" value="" />___box 3
</li>
<li>
<input type="text" class="dependent" name="box4" value="" />___box 4
</li>
<li>
<input type="text" class="dependent" name="box5" value="" />___box 5
</li>
<li>
<input type="text" class="dependent" name="box6" value="" />___box 6
</li>
<li>
<input type="text" class="dependent" name="box7" value="" />___box 7
</li>
</ul>
<input type="reset" value="clear" />
</form>
</body>
</html>


I've had another look at your code - I like it but its a bit tricky for
me to grasp and support... I've never seen/used "class" before except
for a style-sheet setting... I think I'll have to play with your code to
fully understand it. Thanks again for the solution/suggestion.

randelld
Jul 23 '05 #9

P: n/a
Dr John Stockton wrote:
JRS: In article <usVRd.439326$Xk.154298@pd7tw3no>, dated Sun, 20 Feb
2005 05:43:54, seen in news:comp.lang.javascript, Randell D. <reply.via.
ne********************@fiprojects.moc> posted :
Mick White wrote:
Randell D. wrote:
I have seven text boxes which will contain measurements - I would like
the user to input their values in the order that I have listed the boxes.

How can I therefore make an input type=text name=box2 a readonly while
type=text name=box1 has a length of zero?
box1... onchange="if(this.value){box2reference.readonly=fa lse}">


Thanks... this is short and sweet and something I can both understand
and support.

But should the user then be allowed to alter the previous box? If so,
should all following boxes be auto-emptied?

If a box that has been altered is emptied by the user, should he then be
again able to edit the previous box?

You might do better to have a single entry box and a controlled means of
transferring its contents to the main data set, in boxes or a textarea.


Thanks - at first I thought you might be nit-picking with semantics, but
I'll give you credit as they are constructive questions. My data entry
isn't as rigid as that - its just a preference - however I'm thinking of
shelving the idea and give the client greater flexability. I'm still
curious on making a field readonly via an event elsewhere in a form...
the simpler the better (the easier it will be for me to support). I'm
open viewing existing URLs and learning a bit if need be as I think I'm
grasping js a little more recently...

Again... Thanks for the comments,
randell d.
Jul 23 '05 #10

P: n/a
Randell D. wrote:
Mick White wrote:
Randell D. wrote:

Folks,

I have seven text boxes which will contain measurements - I would
like the user to input their values in the order that I have listed
the boxes.

How can I therefore make an input type=text name=box2 a readonly
while type=text name=box1 has a length of zero?

This is for an intranet based application and I understand all the
arguements and points that one has to consider in such that my server
side PHP does not expect the data to be input in a certain order - in
addition, I know that some users might want to input the data in
reverse, but I would prefer this not to be the case.


box1... onchange="if(this.value){box2reference.readonly=fa lse}">

etc.
Mick

Mick,
Sorry its taken until now to test out the above but I've got a damned
cold that is giving me dizzy spells...


should be: ... onchange="if(this.value){box2reference.readOnly=fa lse}">
Notice "readOnly"

Mick
[snip]
Jul 23 '05 #11

P: n/a
>From the HTML 4.01 spec:

class = list
This attribute assigns a class name or set of class names to
an element. Any number of elements may be assigned the same
class name or names. Multiple class names must be separated
by white space characters.
Animatable: yes.

The class attribute assigns one or more class names to an
element. The element may be said to belong to these classes.
A class name may be shared by several element instances. The
class attribute has several roles:

* As a style sheet selector (when an author wishes to assign
style information to a set of elements).
* For general purpose processing by user agents.

Jul 23 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.