输入值改变时的事件

Question

你好，当我的输入值改变时，我想要一个弹出窗口。我试过了，我的输入测试：

<input onchange="maFonction()" id="result" readonly="readonly" type="text" value="0" size = "10" />

我的功能

maFonction = function(){
$.post("yourFile.php");
}

你的文件.php

<?php

$a = 40 ;
if ($result > $a) {
    ?>
    <script> alert("yay!"); </script> 
     <?php } elseif ($result == $a) {
     ?>
                    <input onclick="s(this.form);" type="button" value="sauvegarder" /> 
        <?php
        } else {
    ?>
    <script> alert("boooo!"); </script> 
    <?php
}




?>

我解释只读：它就像一个计算器：我有很多 (7) 个输入，我可以存储值，而只读是总数。所以当它低于 40 时，我需要一个 msg，当它相等时，当它超过 40 时。

感谢您的帮助，因为目前我没有任何错误，当我的页面在什么都没有刷新时，我只是弹出嘘声。

Answer 1

正如我在评论中所说，您不需要服务器端代码来执行此操作。 Here's a fiddle 用 jQuery 来做。很简单：

HTML：

<input type="text" id="myInput"/>

Javascript（假设您包含 jQuery）：

$('document').ready(function() {
   $('#myInput').on('change',function(){
       if(isNaN(this.value))
           alert("Please enter a number");
        else
        {
            var a = 40;
            var myNumber = parseInt(this.value);
            if(myNumber > a) alert("yay!");
            else if (myNumber == a) alert("equals!");
            else alert("boooo!");
        }
    }); 
});

我认为代码很容易理解。请注意，您必须保留文本字段才能触发“更改”事件，并且它假设您实际上更改了某些内容。如果您想每次触发而不是仅在值更改时触发，则可以使用 blur 事件。

如果您想要或需要在服务器端进行这种检查（这可能比比较两个数字不那么容易），您确实可以使用 AJAX。但在这种情况下，我建议从您的服务器端代码返回 XML 、 JSON 甚至是未格式化的字符串，并在 javascript 中处理响应。例如，您可以简单地返回 'bigger', 'smaller','equal' ，并在 AJAX 调用的 success 事件中采取相应的行动。但这是另一个教训;-)

编辑以下 OP 的评论：

HTML

<input type="text" id="input1" /><br/>
<input type="text" id="input2" /><br/>
<input type="text" id="input3" /><br/>
<input type="text" id="myInput" readonly="readonly"/>

Javascript：

$('document').ready(function() {
    $('#input1,#input2,#input3').each(function()   {$(this).on('change',recalculate);}
       );

});

function recalculate()
{
    if(isNaN(this.value))
       alert("Please enter a number");
    else
    {
        var a = 40;
        var value1 = $('#input1').val().trim() == "" ? 0 :  parseInt($('#input1').val());
        var value2 = $('#input2').val().trim() == "" ? 0 :  parseInt($('#input2').val());
        var value3 = $('#input3').val().trim() == "" ? 0 :  parseInt($('#input3').val());
        var total =  value1 + value2 + value3
        $('#myInput').val(total);
        if(total > a) alert("yay!");
        else if (total == a) alert("equals!");
        else alert("boooo!");
    }
}

The fiddle

如果您希望仅在所有 3 个字段均已填写时才计算和提醒：

$('document').ready(function() {
    $('#input1,#input2,#input3').each(function()   {$(this).on('change',recalculate);}
       );

});

function recalculate()
{
    if(isNaN(this.value))
       alert("Please enter a number");
    else
    {
        if($('#input1').val().trim() !== "" && $('#input2').val().trim() !== "" && $('#input3').val().trim() !== "")
        {
            var a = 40;
            var value1 = $('#input1').val().trim() == "" ? 0 :  parseInt($('#input1').val());
            var value2 = $('#input2').val().trim() == "" ? 0 :  parseInt($('#input2').val());
            var value3 = $('#input3').val().trim() == "" ? 0 :  parseInt($('#input3').val());
            var total =  value1 + value2 + value3
            $('#myInput').val(total);
            if(total > a) alert("yay!");
            else if (total == a) alert("equals!");
            else alert("boooo!");
        }
    }
}

The fiddle