CODEWITHSUNDEEP
javascriptjqueryhtml
schenker
schenker

Reputation: 953

Detecting change in hidden form field

Im writing a test code to do a counter that stores the value in a hidden form field. Whenever this counter is incremented with a button click, the counter value is stored in the hidden field. I have no problem with this portion.

However, im having problem to display an alert whenever the hidden field is being changed. Pls see my code below and tell me where i have gone wrong. Thank You.

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script type="text/javascript">

        function startRolling() {
            var storage=document.getElementById('store').value;  

            var tonum;

            if(parseInt(storage)==0)
                {
                    tonum=1;

                }
             else {
                 tonum=parseInt(storage,10);

             }

            tonum=tonum+1;
            document.getElementById('store').value=tonum;
            storage=document.getElementById('store').value;
            alert(storage)
        }


        $(document).ready(function() {
var content = $('#store').val();

$('#store').change(function() { 
    if ($('#store').val() != content) {

        alert('Content has been changed')
    }
});

});

    </script>


</head>
<body>
    <input type="button" id="trigger" value="Start" onclick="startRolling()"/>
    <input type="text" id="cnt" readonly="readonly"/>
    <input type="hidden" id="store" value="0"/>
</body>

Upvotes: 2

Views: 1683

Answers (5)

Ramesh Kotha
Ramesh Kotha

Reputation: 8322

var content = $('#store').val();

You are storing the changed value and comparing with the same value, this if statement doesn't execute

if ($('#store').val() != content)

don't store the value just call change event directly.

$(document).ready(function() {

$('#store').change(function() { 
        alert('Content has been changed')
});

Upvotes: 0

uadrive
uadrive

Reputation: 1269

What if you just fire the event without trying to detect the change?

function startRolling() {
        var storage=document.getElementById('store').value;  

        var tonum;

        if(parseInt(storage)==0)
            {
                tonum=1;

            }
         else {
             tonum=parseInt(storage,10);

         }

        tonum=tonum+1;
        document.getElementById('store').value=tonum;
        if(storage != tonum) {
             alertChange();
        }
        //storage=document.getElementById('store').value;
        //alert(storage)
}

function alertChange() {
        alert('Content has been changed');
}

You could also look at the trigger event in jquery: http://api.jquery.com/trigger/.

Upvotes: 1

Kevin Pei
Kevin Pei

Reputation: 5872

Rather than using a change event, I've used a loop event that checks every second.

var content="";
        function startRolling() {
            var storage=document.getElementById('store').value;  

            var tonum;

            if(parseInt(storage)==0)
                {
                    tonum=1;

                }
             else {
                 tonum=parseInt(storage,10);

             }

            tonum=tonum+1;
            document.getElementById('store').value=tonum;  
            storage=document.getElementById('store').value;
            content=storage;
            alert(storage)
        }

function checkifchanged(){
     if ($('#store').val() != content) {
alert('Content has been changed');
    }
    else{
      content = $('#store').val();   
    }
    setTimeout('checkifchanged()',1000);
}
        $(document).ready(function() {
           content = $('#store').val();   
checkifchanged();
            });

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117334

From the description of the change-event:
The change event occurs when a control loses the input focus and its value has been modified since gaining focus.

Hidden inputs cannot lose focus(because they never have focus), so change will not fire there anyway.

See Any even to detect when the "Class" attribute is changed for a control for a solution.

Upvotes: 0

Chibuzo
Chibuzo

Reputation: 6117

Try this

function startRolling() {
        var storage=document.getElementById('store').value;  

        var tonum;

        if(parseInt(storage)==0)
            {
                tonum=1;

            }
         else {
             tonum=parseInt(storage,10);

         }

        tonum=tonum+1;
        document.getElementById('store').value=tonum;
        //storage=document.getElementById('store').value;
        //alert(storage)
}


    $(document).ready(function() {
        //var content = $('#store').val();

        $('#store').change(function() { 
        //if ($('#store').val() != content) {

            alert('Content has been changed')
        }
    });

Why don't you change the first function to jquery?

Upvotes: 0

Related Questions