?
Solved

Onchage event in javascript

Posted on 2004-09-28
14
Medium Priority
?
399 Views
Last Modified: 2012-08-14
Hello,

   Is there a way to fire events automatically for text boxes and combo boxes when data changes through javascript. Lets say I attached the event "onchange" to a certain function. If I changed the data inside the text box using keyboard, then this event is fired. While if I changed the data inside the textbox using javascript, then the event will not be fired. I know I can fire this event manually using fireEvent, but I need this to be done automatically because I need this events to be fired by themselves since they are attached to htc.

       Thanks,
         Mazen
0
Comment
Question by:Mazen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
14 Comments
 
LVL 4

Expert Comment

by:Oliver_Dornauf
ID: 12169043
The onChange event does not capture a single keystroke. You need to capture onKeyUp.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12169140
just have your htc functions call the onchage function
0
 
LVL 1

Author Comment

by:Mazen
ID: 12169332
It seems that I wasn't clear in my question. The problem is not in using the keyboard, the data inside the text boxes is being changed through javascript functions outside the htc, usually we attach the events to the htc and they will be fired automatically and execute a certain function. As an example, I have a reset button which clears all text boxes. If the text boxes are empty then the are colored yellow and if they have data, then they are colored white. If the user enters data through keyboard, then the color of the text box changes to white which is what I need. But if he presses the reset button, then the textboxes are cleared but the event "onchange" is not fired. I know I can fire it manually but I need it to be automatically fired.

      Thanks,
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 15

Expert Comment

by:justinbillig
ID: 12179211
then you'll have to loop through the elements in the form and call there onchange event

formname.elementname.onchange( );

or loop through them like this

for( intIndex = 0; intIndex < formname.elements.length; intIndex++)
{
         // Text box?
         if( formname.elements[ intIndex ].type.toLowerCase( ) == "text" )
        {
             formname.elements[ intIndex ].onchange( );
         }
}


0
 
LVL 1

Author Comment

by:Mazen
ID: 12179628
It seems that I haven't made my point clear yet. I am attaching the text box to a behavior using htc. Functions in the behavior are called  upon firing the event onchange. I don't want to fire the event manually like justinbillig suggested. I think there should be some way to fire the event onchange upon changing the data inside the text box using javascript, without calling the event by my self.
0
 
LVL 15

Accepted Solution

by:
justinbillig earned 375 total points
ID: 12181695
I think there should be some way to fire the event onchange upon changing the data inside the text box using javascript, without calling the event by my self.

you think there should be, but there isnt.

0
 
LVL 1

Author Comment

by:Mazen
ID: 12774053
Eventhough I didn't get what I wanted from this question, I had to close it. But thanks anyway for taking time and posting comments in this question.

      Mazen
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12774412
Why the B? Just because its not the answer you didn't want to hear doenst mean it is the right answer. If you manually ( with javascript ) change the value of a text field it doens't automatically fire the on change event. That is how javascript works.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 12774551
Justinbillig,
if you are not satisfied with the grade you can contact CS http://www.experts-exchange.com/Community_Support/ and ask for a review
0
 
LVL 1

Author Comment

by:Mazen
ID: 12776266
Actually I was able to solve it in a different way, what I did is that I wrote a function that parses the html document, checked the value inside the controls and changed their state, so it wasn't just that it wasn't the answer that I wanted to hear. Simply by using an function I added to the htc, i was able just to call a single function and it served my purposes instead calling the function "onchange" everytime I changed the value of a control. This is basiclly it. And by the way, I mentioned that I don't want to fire the event manually:
>>"I know I can fire this event manually using fireEvent, but I need this to be done automatically because I need this events to be fired by themselves since they are attached to htc."
So your solution was not what I am asking for because I have mentioned that I already know how to fire an event by code.

      Mazen
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12785031
so let me get this straight, you wrote a function, that goes through all of the controls on the page and changes the colors based on thier thier value ( white for empty, yellow for not empty ).  Which is what the HTC function does right. The HTC function gets called whenver the onchange event is fired. So you write a function that calls the HTC function for each text box.

as i posted earlier

for( intIndex = 0; intIndex < formname.elements.length; intIndex++)
{
         // Text box?
         if( formname.elements[ intIndex ].type.toLowerCase( ) == "text" )
        {
             formname.elements[ intIndex ].onchange( );
         }
}


that loops through each form elemtn on the page, if it is a text box it fires the onchagne event, which will call the HTC function, which will change the color of the text box based on what value is in the text box
0
 
LVL 1

Author Comment

by:Mazen
ID: 12786146
Again, here's what I said in the main question:
>>"I know I can fire this event manually using fireEvent, but I need this to be done automatically because I need this events to be fired by themselves since they are attached to htc."<<
So I have said that I know the method of firing events by code. But to clear my point,
here's the code that I wrote that parses the html document. What I did is that I called the function that attaches the behavior to the controls once after each time the i fill controls with data using js, which in the same time changes the class of the control depending on its state, I didn't post the whole code since this is enough to show u my point:

oColl = window.document.body.all.tags("input");
for(var i=0; i<oColl.length; i++)
{
                        
objInput = oColl[i];
                        
if(objInput.type.toLowerCase() == 'text' || objInput.type.toLowerCase() == 'password'|| objInput.type.toLowerCase() == 'file')
{
                              
if(objInput.getAttribute('required') != null && objInput.required.toLowerCase() == "true" )
{
    attachBehavior(objInput,true);
}
else if(objInput.getAttribute('required') != null && (objInput.required.toLowerCase() == "false" || objInput.required.toLowerCase() == ""))
{
      attachBehavior(objInput,false);
}
else
{
  attachBehavior(objInput,null);
}
}
}

  Hope this sorts things out.
     Mazen
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12794658
no, what you did is lengthy and unneeded. Your attaching the behavior each time you change it with javascript then, instead of just making a function that calls the on change event, your making a function which attaches the behavior STILL EACH TIME!!!, your taking an extra step, but in the end your still doing the same thing i posted. It's fine, B is what you decided and I don't really care.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question