473,218 Members | 1,724 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,218 software developers and data experts.

How can I dynamically make a text box read only?


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
11 26282
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
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
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
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
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
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
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
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
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
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
>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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: reneeccwest | last post by:
<input type="text" size="7" name="test" maxlength="4" value="4Tyourname"> Is there any way I can make first 2 characters as a read only value?
2
by: Michael Winter | last post by:
Below is the IDL definition of the HTMLOptionElement. interface HTMLOptionElement : HTMLElement { readonly attribute HTMLFormElement form; attribute boolean defaultSelected;...
7
by: Brian Genisio | last post by:
Hello all, I am developing a class where speed is important, and memory size is also important. I need to give the user of the class read-only access to one of the private members (size as an...
1
by: Bruce Hendry | last post by:
In a nutshell, I have a stored proc that takes appx 15 minutes when it uses a read-only database, and about 2 minutes when the database is not read-only. Details: SQL Server 7 The stored...
5
by: manokumar | last post by:
hiye, i notice that some if not all of my folders in winxp pro. are set as read only and its giving me some problem with development. so as the natural thing, i unchecked the read only option and...
2
by: Julie | last post by:
I'm wondering what standard/best practices are for the following scenario: I have a page representing several fields for stored data. If the user has sufficient access privileges, the page is...
6
by: Samuel M. Smith | last post by:
I have been playing around with a subclass of dict wrt a recipe for setting dict items using attribute syntax. The dict class has some read only attributes that generate an exception if I try to...
5
by: =?Utf-8?B?bXBhaW5l?= | last post by:
Hello, I am completely lost as to why I can't update a DropDownList inside a DetailsView after I perform an insert into an object datasource. I tried to simply it down to the core demostration:...
5
by: Noorain | last post by:
i want dynamically text box add and its value concat by coma. and at last show all data store in php variable. please help me................. i use this following code to dynamically add text...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.