CODEWITHSUNDEEP
javascriptjqueryhtml
Ered
Ered

Reputation: 497

Detect if the value of a text input changes with no event

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());
});

Upvotes: 2

Views: 13525

Answers (3)

Prisoner ZERO
Prisoner ZERO

Reputation: 14176

You will need to do a combination of things:

  1. Use jQuery's data command 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 command.

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">

Upvotes: 0

RvdK
RvdK

Reputation: 19800

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

Upvotes: 0

arthur
arthur

Reputation: 950

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'));

Upvotes: 1

Related Questions