Question

To keep things brief I need to direct you to my website.
Please visit http://www.plotsandhouses.com/user/register. Scroll down until you see the address portion of the registration form.

You will see various textfields. The one you are primarily interested in is the city textfield. Double click on the city label. That should "unhide" a second city textfield above the first.

The first city textfield is ajax enabled and dynamically searches for options as you type. The idea is to copy data from the first into the second(the one above) which isn’t ajax enabled. We are doing this so we can minimized user typos.

As an example, just type in the letter ‘L’ and select any of the provided options. The option you selected should have copied into the city textfield above.

Now the problem …

with the following code:

$('div#edit-field-city-0-value-wrapper').insertAfter('fieldset.location div#edit-field-company-address-0-city-wrapper');

    $('div#edit-field-company-address-0-city-wrapper').hide();

    

    $('div#edit-field-city-0-value-wrapper input').change(

        function(){

            var $selectedLGA    =   $(this).val();

            $('fieldset.location div#edit-field-company-address-0-city-wrapper input').val( $selectedLGA );

        }

    );

    

    $('div#edit-field-city-0-value-wrapper label').dblclick(

        function(){

            $('div#edit-field-company-address-0-city-wrapper').toggle();

        }

    );

In Firefox, the copying from ajax enable to non-ajax textfield works fine. But, not on IE, Chrome, Chromium nor Arora. And those browsers are a mix from Windows and Linux operating systems.

What might I be doing wrong or not doing period?

Answer 1

Possible problems that come to my mind are:

1. change event (perhaps you could try with keyup)
2. $(this).val() (check what do you receive as a value if this is called at all in situations you encountered when it doesn’t work)