Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Loop thru inputs
- Thread starter crabgrass
- Start date
Crab, this assumes only inputs with a type of 'text' will be set to readOnly. If already readonly it will remove this.
Cheers
Nick
where would we be without rhetorical questions...
Code:
function LoopyLoopTheInput()
{
var inputs = document.getElementsByTagName('input');
for(var i=0;i<=inputs.length;i++){
var input = inputs[i] ;
if(inputs[i].type== 'text'){
if(inputs[i].readOnly==true){
inputs[i].readOnly = false;
}
else
{
inputs[i].readOnly = true;
}
}
}
}Cheers
Nick
where would we be without rhetorical questions...
- Thread starter
- #3
- Thread starter
- #4
Nickdel -
Here is my test page.
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- -->
<!-- Brewed on 11/29/2007 2:18:03 PM -->
<head>
<title>Contacts</title>
<style>
.noedit{background: gray;}
</style>
<script language="JavaScript">
function ClearReadOnly(){
var inputs = document.getElementsByTagName("input");
for (var i=0;i<=inputs.length;i++
{
var input = inputs{i} ;
if(inputs.type== 'text'){
inputs.readOnly = false;
inputs.class = "" ;
}
}
}
</script>
</head>
<body>
<!-- Start of FORM -->
<form method="post" action="">
<input type="text" name="" class="noedit" value="" readonly>
<input type="text" name="" class="noedit" value="" readonly>
<input type="button"
name="cmdEdit"
value="Edit"
style="width: 100px"
onclick="ClearReadOnly();">
<!-- End of FORM -->
</form>
</body>
</html>
</code>
For some reason I can't identify I get an error when Clicking the button. It says "line 36 object expected." Can you see the problem?
Thanks again.
Here is my test page.
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- -->
<!-- Brewed on 11/29/2007 2:18:03 PM -->
<head>
<title>Contacts</title>
<style>
.noedit{background: gray;}
</style>
<script language="JavaScript">
function ClearReadOnly(){
var inputs = document.getElementsByTagName("input");
for (var i=0;i<=inputs.length;i++
{var input = inputs{i} ;
if(inputs.type== 'text'){
inputs.readOnly = false;
inputs.class = "" ;
}
}
}
</script>
</head>
<body>
<!-- Start of FORM -->
<form method="post" action="">
<input type="text" name="" class="noedit" value="" readonly>
<input type="text" name="" class="noedit" value="" readonly>
<input type="button"
name="cmdEdit"
value="Edit"
style="width: 100px"
onclick="ClearReadOnly();">
<!-- End of FORM -->
</form>
</body>
</html>
</code>
For some reason I can't identify I get an error when Clicking the button. It says "line 36 object expected." Can you see the problem?
Thanks again.
trollacious
Programmer
This line will cause you problems:
Lee
Code:
var input = inputs[red][b]{[/b][/red]i[b][red]}[/red][/b];Lee
- Thread starter
- #6
- Thread starter
- #8
Well, I'm back from vacation and still working on this little routine. My test page now looks like this.
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- -->
<!-- Brewed on 11/29/2007 2:18:03 PM -->
<head>
<title>Contacts</title>
<style>
.noedit{background: gray;}
</style>
<script language="JavaScript">
function ClearReadOnly(){
var inputs = document.getElementsByTagName("input");
var i=0 ;
for (i=0;i<=inputs.length;i++){
alert(inputs.type) ;
}
}
</script>
</head>
<body>
<!-- Start of FORM -->
<form method="post" action="" name="form1">
<input type="text" name="txt1" class="noedit" value="" readonly>
<input type="text" name="txt2" class="noedit" value="" readonly>
<input type="button"
name="cmdEdit"
value="Edit"
style="width: 100px"
onclick="ClearReadOnly();">
<!-- End of FORM -->
</form>
</body>
</html>
</code>
The alert will fire 4 times meaning that the inputs collection must include something besides the 2 textboxes and the button. (the form maybe?) Adding the if statement produces an error because the unknown extra input does not have a "type". Do you know what the unknown input is and how to deal with it?
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- -->
<!-- Brewed on 11/29/2007 2:18:03 PM -->
<head>
<title>Contacts</title>
<style>
.noedit{background: gray;}
</style>
<script language="JavaScript">
function ClearReadOnly(){
var inputs = document.getElementsByTagName("input");
var i=0 ;
for (i=0;i<=inputs.length;i++){
alert(inputs.type) ;
}
}
</script>
</head>
<body>
<!-- Start of FORM -->
<form method="post" action="" name="form1">
<input type="text" name="txt1" class="noedit" value="" readonly>
<input type="text" name="txt2" class="noedit" value="" readonly>
<input type="button"
name="cmdEdit"
value="Edit"
style="width: 100px"
onclick="ClearReadOnly();">
<!-- End of FORM -->
</form>
</body>
</html>
</code>
The alert will fire 4 times meaning that the inputs collection must include something besides the 2 textboxes and the button. (the form maybe?) Adding the if statement produces an error because the unknown extra input does not have a "type". Do you know what the unknown input is and how to deal with it?
The reason for 4 alerts:
[ol][li]<input type="text" name="txt1" class="noedit" value="" readonly>[/li]
[li]<input type="text" name="txt2" class="noedit" value="" readonly>[/li]
[li]<input type="button"
name="cmdEdit"
value="Edit"
style="width: 100px"
onclick="ClearReadOnly();">[/li]
[li]for (i=0;i<[!]=[/!]inputs.length;i++)[/li][/ol]
Buttons are still inputs (hence the <input> tag), so that is adding one that you're probably not expecting. Additionally, your loop is going from 0 to 3 (4 total loops). You probably meant to put i < inputs.length - you don't need the equals sign there.
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[ol][li]<input type="text" name="txt1" class="noedit" value="" readonly>[/li]
[li]<input type="text" name="txt2" class="noedit" value="" readonly>[/li]
[li]<input type="button"
name="cmdEdit"
value="Edit"
style="width: 100px"
onclick="ClearReadOnly();">[/li]
[li]for (i=0;i<[!]=[/!]inputs.length;i++)[/li][/ol]
Buttons are still inputs (hence the <input> tag), so that is adding one that you're probably not expecting. Additionally, your loop is going from 0 to 3 (4 total loops). You probably meant to put i < inputs.length - you don't need the equals sign there.
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
- Thread starter
- #10
- Thread starter
- #11
OK, I've got it working. Here's my code.
<code>
function fnClearReadOnly(){
var inputs = document.getElementsByTagName("input");
var i=0 ;
for (i=0;i<inputs.length;i++){
if (inputs.type=="text"){
inputs.readOnly = false ;
inputs.className = "" ;
}
}
}
</code>
I will eventually need to enable/disable <textareas> and <selects> also. The IF will need to be a little different for these. Can you point me in the right direction?
Thx
<code>
function fnClearReadOnly(){
var inputs = document.getElementsByTagName("input");
var i=0 ;
for (i=0;i<inputs.length;i++){
if (inputs.type=="text"){
inputs.readOnly = false ;
inputs.className = "" ;
}
}
}
</code>
I will eventually need to enable/disable <textareas> and <selects> also. The IF will need to be a little different for these. Can you point me in the right direction?
Thx
- Status