Onchage event in javascript

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
LVL 1
MazenAsked:
Who is Participating?
 
justinbilligConnect With a Mentor Commented:
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
 
Oliver_DornaufCommented:
The onChange event does not capture a single keystroke. You need to capture onKeyUp.
0
 
justinbilligCommented:
just have your htc functions call the onchage function
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
MazenAuthor Commented:
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
 
justinbilligCommented:
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
 
MazenAuthor Commented:
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
 
MazenAuthor Commented:
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
 
justinbilligCommented:
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
 
James RodgersWeb Applications DeveloperCommented:
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
 
MazenAuthor Commented:
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
 
justinbilligCommented:
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
 
MazenAuthor Commented:
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
 
justinbilligCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.