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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need help disabling a text input field.

Status
Not open for further replies.
kook04

kook04

Programmer
Jun 26, 2001
58
US
I have a text input field which needs to be enabled/disabled based on the current selection in a Select menu.

I have it 90% working. The easy part is already done, i.e.: I added an "onchange" listener to the Select menu. Whenever it changes, the function checks the current selection, and disables/enables the associated text input field as required.

However, here is the problem...

When the page first loads, the text field is always enabled, regardless of the fact that the default selection in the Select menu requires it to be disabled.

I was hoping that there was some sort of "onload" even handler for a text input field, but it seems that there is not.

Does anyone have a potential solution for this problem?

Thanks in advance...

-Kennedy

------
KJR
 
Sort by date Sort by votes

Yes - in the onload event for your body, call the onchange function for the select box, passing the necessary parameters.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
I'm sorry, I should have explained the problem better...

Using the 'onload' event in the body is not possible because there may be many pairs of Select menus and text fields on the page. Also, there may be other select menus and text fields on the page which do not need to have this functionality.

Therefore, there is really no way for the body's onload event to handle this problem.

I actually tried that path perviously.

Any other ideas?

Thanks.

------
KJR
 
Upvote 0 Downvote
then you'll need to create a function to call on the body's onload event.

in that function you can do that test for each select or call each onchange event.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
You've given me an idea...

Perhaps in the onload event, I could iterate through all of the elements in the form, and "fire" the change event for each Select menu.

Does that sound feasible?

I would need to be able to do things:

1) Know if an element is a Select menu.

2) Trigger each select menu's onchange event.

Are these things possible?

------
KJR
 
Upvote 0 Downvote
example:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script type="text/javascript"><!--
function checkAll() {
    var e = document.forms['formName'].elements;
    doTest( e['select1'], e['text1'] );
    doTest( e['select4'], e['text4'] );
    doTest( e['select5'], e['text5'] );
}

function doTest(src, targ) {
    targ.disabled = (src.selectedIndex == 0) ? true : false;
}

onload = checkAll;

//--></script>
</head>

<body>

</body>
</html>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
to loop through each element:

Code: 
var e = document.forms['formName'].elements;
for (var i = 0; i < e.length; i++) {
    if (e[i].type == 'select-one') {
        e[i].onchange();
    }
}

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Thank you so much for your help.

I will try to implement this solution, and I will let you know the outcome.

Thanks again.

-Kennedy

------
KJR
 
Upvote 0 Downvote
That did it!

Worked like a charm.

Thanks for such a simple and solid solution.

-Kennedy

------
KJR
 
Upvote 0 Downvote
You guys have been so helpful, and I now have one more slight problem. I've implemented the code that cLFlaVA suggested, and it works great for the most part.

I.E.:

var e = document.forms['formName'].elements;
for (var i = 0; i < e.length; i++) {
if (e.type == 'select-one') {
e.onchange();
}
}

The problem is that some of the select-one elements in my form do not have an "onchange" function associated with them. Therefore, when this loops hits one of those elements, it errors.

There is no way around the fact that some of my select-one elements will have an onchange function and some won't. What I'm wondering, is there anyway to check for the existance of this in the loop? I envision it working like this (in psuedocode):

var e = document.forms['formName'].elements;
for (var i = 0; i < e.length; i++) {
if (e.type == 'select-one') {
if (e.hasOnChangeFunction()){
e.onchange();
}
}
}



------
KJR
 
Upvote 0 Downvote
easy:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script type="text/javascript"><!--
function checkAll() {
    var e = document.forms['formName'].elements;
    for (var i = 0; i < e.length; i++) {
        if (e[i].type == 'select-one' && e[i].onchange) {
            e[i].onchange();
        }
    }
}

onload = checkAll;

//--></script>
</head>

<body>
<form name="formName">
    <select name="s1" onchange="alert('in 1');">
      <option>one</option>
      <option>two</option>
    </select>
    <select name="s2">
      <option>one</option>
      <option>two</option>
    </select>
    <select name="s3" onchange="alert('in 3');">
      <option>one</option>
      <option>two</option>
    </select>
    <select name="s4">
      <option>one</option>
      <option>two</option>
    </select>
</form>
</body>
</html>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
682
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
293
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
299
malpa
malpa
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
102
ggriffit
ggriffit
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
104
chikwendu
chikwendu

Part and Inventory Search

Sponsor

Back
Top