Link to home
Create AccountLog in
Avatar of bloggermouth
bloggermouthFlag for Canada

asked on

change event hack for prototype

Hi All

I have added a URL and a code snippet for my issue. I have noticed that the change event in Prototype leaves a little to be desired. The snippet provided is part of a much larger form that requires the user to drill down through the form elements. The value for the input box is automatically provided and is a hidden element. The problem is that when the input box is filled out, the change event isn't fired as expected.

It is too far long into development to suggest another AJAX library, I am using Prototype. I would really appreciate some help with this.


<script type="text/javascript" src="scripts/lib/prototype.js"></script>
    <script type="text/javascript">
        var items = '{"12":{"name":"","type":["double","chest","mini"]}}'.evalJSON(true);
        var optlist = ['type'];
      Event.observe(window, 'load', function() {
//		document.getElementById('item').value='';
            Event.observe('item', 'change', function(){
            var itype = $F('item');
                optlist.each(function(o) {
                    $(o).options.length > 0;
                    if (itype) {
                        if (items[itype][o].length > 0) {
                            for (i = 0; i < items[itype][o].length; i++) {
                                $(o).options[$(o).options.length] = new Option(items[itype][o][i]);
                        } else {
                    } else {
<form action="" method="post">
Item<br />
<input style="width: 113px" type="text"  name="item" id="item" value="" />
<br />
Type<br />
<select name="type" id="type" disabled="disabled">
    <option value="">Please select</option>
</select><br />
<p><input type="submit" /></p>

Open in new window

Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image

Item and type may be getting mixed up for reserved words.

Make them a little more unique.

I would add some'message') through the code to see what is being executed.

Are you using FireBug (FF) or FireBugLite (IE). If so, are there any errors being reported?
Avatar of bloggermouth


I changed the object names. I have Firebug and no errors are present.
I just noticed I forgot to mention that the number 12 should be entered into the input box. The select list should be enabled once the number 2 is entered. I am not trying to capture keyboard events but just simply the change event. You will notice that the select list is enabled once you tab out of the input box.
Have you got a URL I can use/see?

Look to the right of tags above (Just under the source code). The source URL is there.
Can you try watching on blur/keypress. If you want to deal with this as the user types, then change is no good. That is after the focus has left.

You could watch all of them and use a real function as the handler.

I tried the real function as a handler but it appears that prototype disables the native event handlers. The input box in the example will be hidden so therefore any key press events are not going to work.
Prototype does nothing to the native event handlers.

You have to explicitly tell prototype that you do NOT want the default events to operate.


$('form').observe('submit', function(e){
 Event.stop(e); // Stop the form from submitting.
 // Now do the form submission via AJAX.
 new Ajax.Updater(....);

sort of thing.

I tried to use custom javascript functions with the native event handlers to no avail. I am not skilled enough in Javascript to figure that out. PHP is more my area of expertise. When I added onchange to the input field nothing happened. No errors in either firebug or FF's javascript error console.
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account