Can an onchange eventhandler be re-used by invoking rather than clicking?

[F. Da Costa]

Hi,

I'm trying to call/ mimic an onchange function/ event after a user has
clicked a checkbox. In response to which a buncch of other ones need to be
checked as well.
The caveat is that each of those child-checkboxes need to have an onchange
action take place. All of these child-boxes *have* got a working onchange
eventListener attached (thx to an old post of Lasse Reichstein Nielsen).

Following a snip that suggests (or so the debugger suggests) that the
inputElement.onchange is void, so calling onchange becomes a bit hard.
Any suggestions?

.....
inputElement = _row2checkbox[tb.rows["id"]];
inputElement["checked"] = el["checked"];
if (inputElement.onchange) {
inputElement.onchange();
}
.....

I did come up with a work-around but that ivolves some serious trickery.

TIA
Fermin DCG

 

[Mike]

Hi,

Really the answer is very simple. You didn't post the actual event handlers
you are using so I'll try to create pseudo code that explains the solution.

Your code probably looks something like:

<input type="checkbox" onchange="handleParentChange(event)" /> <!-- parent
input -->
<input type="checkbox" onchange="handleChange(event)" />

function handleChange(event){
[ perform some action ]
}
function handleParentChange(event){
[ perform some complicated action ]
}

What you need to do is seperate the code that actually does the work from
the event handler. This way you can call the code that actually performs the
work independently from a user action. So your code would change to look
like:

function handleChange(event){
var element = //get reference to the object that fired the event
doWork(element);
}

function doWork(inputElement){
[ perform some action ]
}

With this type of set up you can now call the function that performs the
actual work as many times and in as many was as you can think of becuase it
is now independent of a specific user event.

So applying it to your case your "parent" checkbox would have it's own event
handle call it handleParentChange(event) which can then build a collection
of "child" checkboxes which you then pass individually into the
doWork(inputElement) method. So putting it all together you would have
something like:

<input type="checkbox" onchange="handleParentChange(event)" /> <!-- parent
input -->
<input type="checkbox" onchange="handleChange(event)" /> <!-- child
input -->

function handleParentChange(event){
var collection = //get all child inputs
for (var i=0;i<collection.length;i++)
doWork(collection);
}

function handleChange(event){
var element = //get reference to the object that fired the event
doWork(element);
}

function doWork(inputElement){
[ perform some action ]
}

I hope this wasn't too confusing.

Regards
Mike

 

[F. Da Costa]

Hi,

Really the answer is very simple. You didn't post the actual event handlers
you are using so I'll try to create pseudo code that explains the solution.

Your code probably looks something like:

<input type="checkbox" onchange="handleParentChange(event)" /> <!-- parent
input -->
<input type="checkbox" onchange="handleChange(event)" />

function handleChange(event){
[ perform some action ]
}
function handleParentChange(event){
[ perform some complicated action ]
}

Well, it doesn't actually just look like what you defined. Instead i 'slap'
on the eventHandlers in a more dynamic fashion through a js function.

In essence it does, obviously, boil down to the same thing.

What you need to do is seperate the code that actually does the work from
the event handler. This way you can call the code that actually performs the
work independently from a user action. So your code would change to look
like:

I'm still with you there.

function handleChange(event){
var element = //get reference to the object that fired the event
doWork(element);
}

function doWork(inputElement){
[ perform some action ]
}

With this type of set up you can now call the function that performs the
actual work as many times and in as many was as you can think of becuase it
is now independent of a specific user event.

So applying it to your case your "parent" checkbox would have it's own event
handle call it handleParentChange(event) which can then build a collection
of "child" checkboxes which you then pass individually into the
doWork(inputElement) method. So putting it all together you would have
something like:

<input type="checkbox" onchange="handleParentChange(event)" /> <!-- parent
input -->
<input type="checkbox" onchange="handleChange(event)" /> <!-- child
input -->

function handleParentChange(event){
var collection = //get all child inputs
for (var i=0;i<collection.length;i++)
doWork(collection);
}

function handleChange(event){
var element = //get reference to the object that fired the event
doWork(element);
}

function doWork(inputElement){
[ perform some action ]
}

I hope this wasn't too confusing.

Noop, not confusing at all. As it turned out I baasically resolved in a
comparable way, so I guess its true that there is mre than one way to skin
the infamous cat

I am however still surprised about the fact that one cannot utilize the
onchange in the same fashion as onsubmit. Just calling it directly from
some function (compare it so you will to doing a submit of a form via js,
or does that call *not* use the onsumbit function attached to the form?)

Thx for your effort,
Cheers,
Fermin