Solved

Onchage event in javascript

Posted on 2004-09-28
14
393 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
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
 
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 125 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

759 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now