Forcing onChange event on textinput

[simplicity]

Hi folks, can someone help with the following:

(1) I have a textinput which is a Adobe Spry object, well, just a
textinput with some additional features like validation etc. Im my
case it a number that I want to input.
(2) I set up some validation rules: min and max values, no alpha etc,
again some basic Spry stuff. I set this to be triggered onChange.
(3) When the value is invalid, eg. too large I display the icon with
onMouseOver triggering pop-up balloon containing error message.
(4) As I move the cursor away from the icon, I trigger onMouseOut
which is supposed to: close the balloon, revert the wrong value to
default.

So far all of the above work fine.

Here is the problem: as I revert the value of the textbox:
document.getElementById('txtBox').value = defaultValue, the onChange
event IS NOT triggered on the textbox. That means that I have a valid
value in the box and the error icon beside. Urghhhh!!!

I scanned the net looking for hints and it looks that changing the
value of textinput programatically DOES NOT trigger onChange for that
element. I found something promissing Firefox dispatchEvent() / IE
fireEvent() but i am not sure how to use it correctly. As expected,
dispatchEvent(onchange) generated nothing more than the javascrip
error :--(

Is there a way around it?

 

[Peter Michaux]

Hi folks, can someone help with the following:

(1) I have a textinput which is a Adobe Spry object, well, just a
textinput with some additional features like validation etc. Im my
case it a number that I want to input.
(2) I set up some validation rules: min and max values, no alpha etc,
again some basic Spry stuff. I set this to be triggered onChange.
(3) When the value is invalid, eg. too large I display the icon with
onMouseOver triggering pop-up balloon containing error message.
(4) As I move the cursor away from the icon, I trigger onMouseOut
which is supposed to: close the balloon, revert the wrong value to
default.

So far all of the above work fine.

Here is the problem: as I revert the value of the textbox:
document.getElementById('txtBox').value = defaultValue, the onChange
event IS NOT triggered on the textbox. That means that I have a valid
value in the box and the error icon beside. Urghhhh!!!

I scanned the net looking for hints and it looks that changing the
value of textinput programatically DOES NOT trigger onChange for that
element. I found something promissing Firefox dispatchEvent() / IE
fireEvent() but i am not sure how to use it correctly. As expected,
dispatchEvent(onchange) generated nothing more than the javascrip
error :--(

Is there a way around it?

There are at least several ways to do what you want to do. Do you have
a 30 line or less example you can post so folks here have something
concrete to look at?

Peter

 

[simplicity]

There are at least several ways to do what you want to do. Do you have
a 30 line or less example you can post so folks here have something
concrete to look at?

Peter- Hide quoted text -

- Show quoted text -

Sure...

in HTML:
The <span></span> entity is generated by Dreamweaver when I add
validation to Spry textinput. One ov the validations is for a value to
be enetred, hence default 1000000 is the OK condition.

<span id="sprytextfield3">
<input name="dataRate" type="text" id="txt1" value="1000000">
<span class="textfieldRequiredMsg">
<img src="../../images/exclamation.png" id='errorIcon'
onMouseOver="showErrMsg('A value is required.', 'Value required
error');"
onMouseOut="closeErrMsg('txt1');"
width="15" height="15" alt="A value is required." border="0"/>
</span>
(...)
</span>
<script type="text/javascript">
<!--
var sprytextfield3 = new
Spry.Widget.ValidationTextField("sprytextfield3", "integer", {minValue:
0, maxValue:1000000, validateOn:["change"]});
//-->
</script>

The above display the icon when I delete the value from the box. This
works fine.

in js:
function showErrMsg(msg, caption) { // this is formatting the msg and
calling overLIB balloon
if (caption == null) {
return overlib(msg);
} else {
return overlib(msg, CAPTION, caption);
}
}

function closeErrMsg(id) { // this is closing overLIB balloon and
reverts the edit
var rc = nd(); // close baloon
if (confirm ('Do you want to undo the change?')) {
revertValue(id); // revert value
}
return rc;
}

function revertValue(id) {
// this reverts the value in the textinput
document.getElementById(id).value = defaultValue;
}

Here is my problem. I need to trigger onChange immediately after the
value is reset so Spry will hide <span class="textfieldRequiredMsg">.

I tried adding id to <span> and force display='none' but that turns
off the span permanently. This tells me that any "artificial" change
this will generate unwelcomed effects and I must blend with onChange
event.

 

[Gregor Kofler]

simplicity meinte:

function revertValue(id) {
// this reverts the value in the textinput
document.getElementById(id).value = defaultValue;
}

Here is my problem. I need to trigger onChange immediately after the
value is reset so Spry will hide <span class="textfieldRequiredMsg">.

Trigger events with JS varies with the browser. Naturally.

DOM2
var e = document.createEvent("Events");
e.initEvent(yourEventType, true, true);
yourElement.dispatchEvent(e);

MS:
var e = document.createEventObject();
yourElement.fireEvent("on" + yourEventType, e);

With above methods given, you should find plenty of resources with
detailed information.
E.g.
http://developer.mozilla.org/en/docs/DOM:element.dispatchEvent

Gregor

 

[RobG]

I scanned the net looking for hints and it looks that changing the
value of textinput programatically DOES NOT trigger onChange for that
element. I found something promissing Firefox dispatchEvent() / IE
fireEvent() but i am not sure how to use it correctly. As expected,
dispatchEvent(onchange) generated nothing more than the javascrip
error :--(

Don't code by guesswork - use the W3C specs for how it should work and
search the clj archives for examples, e.g.:

<URL:
http://groups.google.com.au/group/c...+dispatchevent+winter&rnum=2#98cea9cdf065a524
Note Mike's comments on fireEvent, the MSDN resource is here:

Is there a way around it?

If you don't need the event to bubble, call the onchange handler
yourself after you change the value:

textArea.value = 'foo';
if ( typeof textArea.onchange == 'function') textArea.onchange();

Some browsers may report the onchange property to be an object rather
than a function, testing will answer that.

 

[David Mark]

Strike one.

You are using Spry to validate a text input?

It's basic JS stuff.

What icon?

Don't validate anything until the form is submitted. Then you won't
need balloons.

Okay.

Your users are going to hate this.

You've tangled up basic validation with some ridiculous library. What
did you expect?

No kidding.

Firefox dispatchEvent() / IE
Never mind that. Just write a basic validation script and call it
from your form's onsubmit handler.

[snip]

Sure...

in HTML:
The <span></span> entity is generated by Dreamweaver when I add

Dreamweaver and Spry are involved with this?

validation to Spry textinput. One ov the validations is for a value to
be enetred, hence default 1000000 is the OK condition.

<span id="sprytextfield3">
<input name="dataRate" type="text" id="txt1" value="1000000">
<span class="textfieldRequiredMsg">
<img src="../../images/exclamation.png" id='errorIcon'
onMouseOver="showErrMsg('A value is required.', 'Value required
error');"
onMouseOut="closeErrMsg('txt1');"
width="15" height="15" alt="A value is required." border="0"/>
</span>
(...)
</span>
<script type="text/javascript">
<!--

Get rid of that comment. It isn't needed.

var sprytextfield3 = new
Spry.Widget.ValidationTextField("sprytextfield3", "integer", {minValue:
0, maxValue:1000000, validateOn:["change"]});

The problems stack up quickly when you rely on something you don't
understand to perform a task that you don't understand.

//-->
</script>

The above display the icon when I delete the value from the box. This
works fine.

I'll take your word for it.

in js:
function showErrMsg(msg, caption) { // this is formatting the msg and
calling overLIB balloon
if (caption == null) {
return overlib(msg);

Overlib too!? Throw all of this extra crap out and Google "Javascript
form validation." Get the basic concept working before throwing in
balloons.

} else {
return overlib(msg, CAPTION, caption);
}

}

function closeErrMsg(id) { // this is closing overLIB balloon and
reverts the edit
var rc = nd(); // close baloon
if (confirm ('Do you want to undo the change?')) {
revertValue(id); // revert value
}
return rc;

Why do you feel you need to implement an undo for an invalid field?

}

function revertValue(id) {
// this reverts the value in the textinput
document.getElementById(id).value = defaultValue;

}

Here is my problem. I need to trigger onChange immediately after the

Your problem is that you don't understand what your problem is.

value is reset so Spry will hide <span class="textfieldRequiredMsg">.

Now you are trying to work around a problem you have created and will
likely add more problems.

I tried adding id to <span> and force display='none' but that turns
off the span permanently. This tells me that

any "artificial" change

Can you guess why? Overlib is probably too stupid to deal with your
meddling. You are trying to choreograph Spry and Overlib to perform
some convoluted task that isn't necessary in the first place.

this will generate unwelcomed effects and I must blend with onChange
event.

Clearly you don't understand the first thing about browser scripting,
so how are you going to teach Spry and Overlib how to behave?
Assuming you can accomplish your task, you can look forward to future
upgrades of Spry and/or Overlib breaking your workaround.