How can I dynamically make a text box read only?

R

Randell D.

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

Mick White

Randell said:
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.
Click to expand...

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

etc.
Mick
 
R

RobB

Mick said:
box1... onchange="if(this.value){box2reference.readonly=false}">

etc.
Mick
Click to expand...

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

Randell D.

Mick said:
box1... onchange="if(this.value){box2reference.readonly=false}">

etc.
Mick
Click to expand...


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

Cheers
Randell D.
 
R

Randell D.

RobB said:
Mick said:
Randell D. wrote:


like

boxes.

while

server

in


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

etc.
Mick
Click to expand...


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>
Click to expand...

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

Dr John Stockton

JRS: In article <usVRd.439326$Xk.154298@pd7tw3no>, dated Sun, 20 Feb
2005 05:43:54, seen in Randell D. <reply.via.
(e-mail address removed)> posted :
Thanks... this is short and sweet and something I can both understand
and support.
Click to expand...

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

RobB

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...
Click to expand...

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

Randell D.

Mick said:
box1... onchange="if(this.value){box2reference.readonly=false}">

etc.
Mick
Click to expand...

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

Randell D.

RobB said:
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...
Click to expand...


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)
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>
Click to expand...


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
 
R

Randell D.

Dr said:
JRS: In article <usVRd.439326$Xk.154298@pd7tw3no>, dated Sun, 20 Feb
2005 05:43:54, seen in Randell D. <reply.via.
(e-mail address removed)> posted :



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.
Click to expand...

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

RobB

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I arrange a series of radio buttons? 2
How to make an input box enable for only past dates and for the startdate if it falls in the current month? 5
Text box simply do not stand out against the wall paper. 3
"input-group-text" help 7
How can I execute a function ONLY if fetch request returns 404 status? 0
My code doesn't seem to run i get a error message but i don't see a problem maybe someone can 3
How can I create a table using the input element? 1
Uhhhhh, What can I do next? 6

Members online

Total: 158 (members: 1, guests: 157)
Robots: 264

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top