检测隐藏表单字段中的更改

时间:2012-01-15 02:10:42

标签: javascript jquery html

我正在编写一个测试代码来执行一个计数器,该计数器将值存储在隐藏的表单字段中。只要单击按钮增加此计数器,计数器值就会存储在隐藏字段中。我对这一部分没有任何问题。

但是,每当隐藏字段被更改时,我都有问题显示警报。请参阅下面的代码并告诉我哪里出错了。谢谢。

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

5 个答案:

答案 0 :(得分:1)

如果您只是在不尝试检测更改的情况下触发事件会怎么样?

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

您还可以在jquery中查看触发器事件:http://api.jquery.com/trigger/

答案 1 :(得分:0)

试试这个

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

为什么不将第一个函数更改为jquery?

答案 2 :(得分:0)

来自description of the change-event
当控件失去输入焦点并且自获得焦点后其值已被修改时,会发生更改事件。

隐藏的输入不会失去焦点(因为它们永远不会有焦点),所以无论如何都不会发生变化。

请参阅Any even to detect when the "Class" attribute is changed for a control了解解决方案。

答案 3 :(得分:0)

我没有使用更改事件,而是使用了每秒检查一次的循环事件。

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

答案 4 :(得分:0)

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

您正在存储更改的值并与相同的值进行比较, 这个if语句没有执行

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

不要直接存储值调用更改事件。

$(document).ready(function() {

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