javascript - Detect if the value of a text input changes with no event - Stack Overflow

I'm looking to get the value of this input if it changes. I have a map.swf that makes the value change depending on what the user selects in the .swf, so I was wondering how to get this done.

<a href="map.php" onclick='return GB_showCenter("",this.href,380,780);' class="page">See Map</a>
<input name="sector_e" type="text" id="sector_e" value="Please click The Map" size="1" readonly>

This jQuery only alerts me if I press a key, I want it to alert if the value changes without any event.

$('#sector_e').bind("keyup", function() {    
    alert($(this).val());
});

I'm looking to get the value of this input if it changes. I have a map.swf that makes the value change depending on what the user selects in the .swf, so I was wondering how to get this done.

<a href="map.php" onclick='return GB_showCenter("",this.href,380,780);' class="page">See Map</a>
<input name="sector_e" type="text" id="sector_e" value="Please click The Map" size="1" readonly>

This jQuery only alerts me if I press a key, I want it to alert if the value changes without any event.

$('#sector_e').bind("keyup", function() {    
    alert($(this).val());
});

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 31, 2012 at 8:46 Teun Zengerink 4,40355 gold badges3232 silver badges3232 bronze badges asked Jan 27, 2012 at 15:26 EredEred 49711 gold badge77 silver badges2424 bronze badges 2

• 1 I am not sure what you mean by 'without any event'. How will you know, without events, when the value changes? – mbx-mbx Commented Jan 27, 2012 at 15:30
• Here are some solutions from a previous question: stackoverflow./questions/5349504/jquery-onchange-detection – jdh Commented Jan 27, 2012 at 15:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

The event "change" should do what you want :)

 $('#sector_e').bind("change", function() {

           alert($(this).val()); 

     });

edit: To make this work, the swf must also trigger the change event.

If this is not possible, you can check every n milliseconds if the value has change and trigger the change event in this case.

var checkChange function($object){
    var currentValue = $object.val();

    var checkChanges = function() {
        if (checkChanges.val() != currentValue) {
            currentValue = checkChanges.val();
            $object.trigger("change");
        }
    }

    window.setInterval(checkChanges, 100);
}

checkChange($('#sector_e'));

You will need to do a bination of things:

1. Use jQuery's data mand capabilities to save the initial value.
2. Use the jQuery's focusout or blur or change event to check the current value against what is saved using data.

Which even you choose depends on whether or not direct user-interaction is possible or not. Further processing can happen once you detect a change.

FOR EXAMPLE:
You might consider marking the element with a class name like "isDirty" using jQuery's addClass mand.

Then you could do things like:

$('.isDirty')

In the meantime...

HERE IS A CODE SAMPLE USING FOCUSOUT:

<script type="text/javascript">
    $(document).ready(function () {
        var txtSectorE = $('#sector_e');

        // Save the initial value
        $.data(txtSectorE, "last", txtSectorE.val());

        // Setup the event
        txtSectorE.focusout(function () {
            var last = $.data(txtSectorE, "last");
            if (last != $(this).val())
                alert("changed");
        });
    });
</script>

<input id="sector_e" name="sector_e" type="text" value="Please click The Map">

Of course, doing it this way is taxing as you would have to write a separate set of calls for each textbox.

So, why not add a class name to each textbox and do it this way...

A BETTER EXAMPLE USING FOCUSOUT:

    <script type="text/javascript">
        $(document).ready(function () {
            var txtSectors = $('.sector');

            $.each(txtSectors, function (index, textbox) {

                // Save the initial value
                $.data(textbox, "last", textbox.val());

                // Setup the event
                textbox.focusout(function () {
                    var element = $(this);
                    var last = $.data(element, "last");
                    if (last != element.val())
                        alert("changed");
                });
            });
        });
    </script>

<input id="sector_a" type="text" class="sector" value="Something">
<input id="sector_b" type="text" class="sector" value="Another">
<input id="sector_c" type="text" class="sector" value="Yet Again">
<input id="sector_d" type="text" class="sector" value="Wow This Arduous">
<input id="sector_e" type="text" class="sector" value="Getting Tired Of Typing">

If there is no event triggered when the value of the text input changes (Via SWF or JS). A solution is to use a timer to constantly check for the value of the text input. If it is different that than the previously stored value is has changed and then you can do your thing.

(Far from optimal but a solution)

See here for an implementation: I want to trigger an event every single time data changes in an HTML text input field regardless of focus

setInterval( function() {
    $('input').each( function() {
        if ($(this).val() != $(this).data("_value")) {
            // Save the new value
            var myVal =  $(this).val();
            $(this).data("_value",myval);

            // TODO - Handle the changed value
        }
    });
}, 100);

From @Plutor