...

View Full Version : Firing an onchange event



pitchoo
08-27-2002, 08:53 AM
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>

glenngv
08-27-2002, 09:00 AM
<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>

pitchoo
08-27-2002, 09:18 AM
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?

glenngv
08-27-2002, 09:25 AM
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.

pitchoo
08-27-2002, 09:49 AM
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?

glenngv
08-27-2002, 09:57 AM
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.

pitchoo
08-27-2002, 10:16 AM
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

glenngv
08-27-2002, 10:30 AM
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

pitchoo
08-27-2002, 10:40 AM
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 !

jolietjake
08-27-2002, 11:20 AM
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

pitchoo
08-27-2002, 12:04 PM
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

jolietjake
08-27-2002, 12:14 PM
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

pitchoo
08-27-2002, 12:46 PM
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.... ??? :o(

zuckera
08-27-2002, 01:03 PM
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>

pitchoo
08-27-2002, 02:39 PM
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!

zuckera
08-27-2002, 03:16 PM
Hi,

Well, basically any object can have properties, the property can be either a variable or a function.
here (http://webreference.com/js/tips/000112.html) is one link, you can probably find a lot more where this came from, the index is here (http://webreference.com/js/index.html?start=101&page=10) , this (http://www.siteexperts.com/forums/converse.asp?topic=All+Topics&d_id=3774) is a good place to go for information. The web is full of them.

As for constraints, you can probably find it on the web as well, try google, I learned it at the uni. so no web reference here...

Amir

jkd
08-27-2002, 04:21 PM
Didn't read the entire thread, but to fire an event on an object:

IE:

element.fireEvent('onchange');

And via DOM2 Events (for Gecko):

var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);
element.dispatchEvent(evt);

Where element is a reference to an element node.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum