Question

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

Answer 1

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