Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firing an onchange event

    Hello,

    I want to dynamically add an onchange method on a text input field. Then an action (click on a button for example) should invoke the onchange method added dynamically by firing an onchange event, but it only works when the event is written directly in the input field (with an onchange attribute) and I need to add it dynamically... How can I make it work??? Help!

    My test code looks like this (when I click on TestJS, I'd like to have the alert box to appear on the screen...):

    <html>
    <script>
    function testOnchange() {
    document.getElementById('test1').onchange = "alert('Test!')";
    document.getElementById('test1').onchange();
    }
    </script>
    <body>

    <form name="turlut" action="test" >
    <input type="text" id="test1" name="test1" value="test"/><br/>
    <input type="button" name="button1" value="Test JS" onClick="javascript:testOnchange();"/><br/>
    <input type="submit"></button>
    </form>

    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    <html>
    <head>
    <script>
    function testOnchange(el) {
    document.forms[0].elements[el].onchange = function(){alert('Test!')};
    }
    </script>
    </head>
    <body>

    <form name="turlut" action="test" >
    <input type="text" name="test1" value="test"/><br/>
    <input type="button" name="button1" value="Test JS" onClick="testOnchange('test1');"/><br/>
    <input type="submit">
    </form>

    </body>
    </html>

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    the code above does not work

    I've already tried to use this handler without success,

    I use obj.attachEvent('onchange', function() {...}) for IE and obj.addEventListener('change', function() {...}, false) for Mozilla.


    Does anyone have a solution?

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    that code does work for IE, NS4.X and NS6! i've tried it before i posted.
    of course, for the alert to display you have to change the value of the textbox.

  • #5
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Well....

    It works with IE6 and Mozilla 1.0 but only when you change the field's value. If you load the page and click directly on the button, the alert box is not called.
    What I want is to call the onchange methof of the field without changing its value... do you have an idea?

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    that is the purpose of onchange event!
    you can use onblur instead, this is fired when the field leaves focus.
    maybe you can explain in detail of what you actually want to accomplish.

  • #7
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I know, I know! :o)

    My goal is to make dynamic calculation in a form:

    For example:

    I have 2 text fields A and B:

    A's value = 20
    B's value = 30

    Then I have a readonly input (field C) which contains the result of a formula using field A and B. The formula could be A + B:

    C's value in readonly = 20 + 30 = 50

    Then when the user change A or B's value, C's value is updated dynamically. This works fine.

    But now I want to use field C in another formula:
    Now I add a new text field (D):

    D's value = 10

    I also add a readonly input (field E) which contains the result of C + D, so:

    E's value = 50 + 10 = 60

    The problem is that when field C has its value changed (the value is changed dynamically and no onchange method occurs), field E's value is still 60... Therefore I want to force an onchange event on the readonly field C to make field E's value updated!
    Hum, I hope that it's clear?!?

    So, do you have a solution?

    PS: field E's formula must no be: A + B + C + D but C + D

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts

    Re: I know, I know! :o)

    i have no time to make a full code for that, im about to go in a little while. but i can explain:

    create a function that calculates the value of A+B then put it to C, and then calculate C+D then put it to E.

    call this function on onchange event of both field A and B.

    hope this gives you an idea

  • #9
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ...

    I can't do that because field A and B don't "know" that there is a second, third, fourfth.... formula to calculate. This is determined dynamically, that's all the problem

    To be clear, data are stocked in a XML file and then an XSL file is used to display them and when an input with a formula appears it calls a JS function to add dependencies on the fields concerned by the formula...

    I'm stucked !

  • #10
    New Coder
    Join Date
    Jun 2002
    Location
    Spain
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this. I suppose that's you need, right?. I try it on IE6 and Mozilla 1.0

    <html>
    <script>
    function testOnchange() {

    document.getElementById('test1').onchange();
    }
    </script>
    <body>

    <form name="turlut" action="test" >
    <input type="text" id="test1" name="test1" value="test"" onchange="alert('Test!')"/><br/>
    <input type="button" name="button1" value="Test JS" onClick="javascript:testOnchange();"/><br/>
    <input type="submit"></button>
    </form>

    </body>
    </html>


    Joliet Jake, Master of the BluesMen

  • #11
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yes it works but...

    as I told in the first message, I need to add the onchange function dynamically and not directly in the HTML code.
    What I want is the same behaviour of your code but with the possibility to add onchange methods dynamically, that's the problem!

    Thanks for you help but still need help

  • #12
    New Coder
    Join Date
    Jun 2002
    Location
    Spain
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this.

    <html>
    <script>
    function testOnchange() {
    var escribe='<input type="text" id="test1" name="test1" value="test"" onchange="alert(\'Another Test!\')"/><br/>';
    document.getElementById('div01').innerHTML=escribe;

    document.getElementById('test1').onchange();
    }
    </script>
    <body>

    <form name="turlut" action="test" >
    <div id="div01"><input type="text" id="test1" name="test1" value="test"" onchange="alert('Test!')"/><br/></div>

    <input type="button" name="button1" value="Test JS" onClick="javascript:testOnchange();"/><br/>
    <input type="submit"></button>
    </form>

    </body>
    </html>


    Joliet Jake, Master of the BluesMen

  • #13
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Well...

    It works but it's really an heavy solution and I really hope there is another solution...
    The problem is that: I don't know the content of the field/attribute and I should have a generic function to parse the DIV content and find the onchange attribute and change it but it's not (for me) a clean solution...

    Isn't there a simpler solution.... ??? (

  • #14
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Well, it sounds like what you need is a set of constraints, which means that each object (in our case text field) has to do some actions (in our case notify all who care) of changes to its value.
    The way it works is that each text field has an object which holds all of its "listeners", or objects who need to know when its value is changed. By calling its object's notifyAll method, the text field sends a message to all objects who registered before and asked to be notified when its value has changed. You can have any kind of interaction between the fields, and all changes will affect all others on the notification chain. If you want you can have either one-way or both-way notifications.

    This code works for IE and NS6+, I guess it's possible to make it work for NS4, but I didn't bother. If you want to, be my guest.

    hth,

    Amir


    code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <script language="JavaScript">
    function add(obj) {
    this.listeners[this.listeners.length] = obj;
    }
    function notifyAll(value) {
    for (i = 0; i < this.listeners.length; i++) {
    this.listeners[i].notify(value);
    }
    }
    function notify(value) {
    if (this.obj.value != value) {
    this.obj.value = value;
    this.notifyAll(value);
    }
    }
    function newObj(obj) {
    var o1 = new Object();
    o1.listeners = new Array();
    o1.add = add;
    o1.notifyAll = notifyAll;
    o1.notify = notify;
    o1.obj = obj;
    return o1;
    }
    </script>
    <title>Untitled</title>
    </head>

    <body>
    <form>
    <!-- onchange calls the notifyAll method of the object attached to the field with -->
    <!-- the current field's value, but it can send whatever value you want -->
    <input type="text" name="bla" id="bla" onChange="this.obj.notifyAll(this.value);">
    <input type="text" id="bla2" name="bla2" onChange="this.obj.notifyAll(this.value);">
    <input type="text" id="bla3" name="bla3" onChange="this.obj.notifyAll(this.value);">
    <script language="JavaScript">
    // define the objects
    // this can be done after each text input field is defined or all together
    textObj = document.getElementById("bla");
    o = newObj(textObj);
    textObj.obj = o;

    textObj = document.getElementById("bla2");
    o = newObj(textObj);
    textObj.obj = o;

    textObj = document.getElementById("bla3");
    o = newObj(textObj);
    textObj.obj = o;
    // constraints
    // this must be done after all fields were defined or if all constraints
    // are backwards

    // add a constraint which tells 'bla' to notify 'bla2' of all changes to its value
    document.getElementById("bla").obj.add(document.getElementById("bla2").obj);

    // by adding the rest we complete the loop
    // a notification is sent only if the updated value is different than
    // ours so we don't go into an endless loop
    document.getElementById("bla2").obj.add(document.getElementById("bla3").obj);
    document.getElementById("bla3").obj.add(document.getElementById("bla").obj);
    </script>
    </form>
    </body>
    </html>

  • #15
    New Coder
    Join Date
    Jun 2002
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Excellent!

    It's just perfect, thanks.

    I didn't know about Object attached to another object... do you have a link/tutorial to propose about the technic you used?

    Thanks!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •