2

我有两个 AJAX 函数。第一个函数获取第一个输入字段的结果并连接一个字符串，然后更改第二个输入字段的值。第二个输入字段是(type=”hidden”)。第二个函数检查是否在第二个输入字段中触发了更改，然后在第三个输入字段上显示该值。输入字段＃2中的值更改不会触发任何内容。示例

<script>
$(document).ready(function () {
    var timer = null;
    var $result=$("#result");
     $result.data('url',$result.val());

    function submitForm( input ) {
        $.ajax({
            type: "POST",
            url: "/concatenate/index.php",
            data: {input:input},
            dataType: "html",
            success: function (data) {
                var url=$result.data('url'),
                newUrl= url+input+'/';
                $result.val(newUrl);
            }
        });
        return false
    }

    $("#input").on("keyup", function() {
        var input = $(this).val();
        clearTimeout(timer);
        timer = setTimeout(function(){
             submitForm(input) ;
        }, 40);
    })
});

$(document).ready(function () {
    var timer = null;
    var $result=$("#result").val();

    function submitForm( input ) {
        $.ajax({
            type: "POST",
            url: "/concatenate/index.php",
            data: {input:input},
            dataType: "html",
            success: function (data) {
                $result.val();
            }
        });
        return false
    }

    $("#result").on("change", function() {
        var input = $(this).val();
        clearTimeout(timer);
        timer = setTimeout(function(){
             submitForm(input) ;
        }, 40);
    })
});
</script>
</head>
<body>

<h1>Enter a word:</h1>

<form action="index.php" method="post">
Input: <input type="text" id="input" name="input"></br>
Concatenated Result1(hidden): <input type="hidden" style="width:200px;" id="result" name="result" value="http//www.example.com/"></br>
Concatenated Result2: <input type="text" id="result2" name="result2" value=""></br>
</form>
4

2 回答 2

2

这个答案实际上是对您的代码的修改，但也许它会做您需要的事情并简化事情。

如果您只是扔掉第二个输入框，并显示#result（使其不隐藏），我认为这段代码可能会帮助您完成您需要完成的工作，并简化一些事情。

这应该做的是将请求提交给服务器的频率不超过每 40 毫秒，并且在该请求成功时，我们会更新 #result 的显示值。

我现在注意到，如果这确实解决了问题，那么你已经onChange完全摆脱了这个问题，因为现在真正的触发因素是keyup事件。

$(document).ready(function() {

  /** get the inputs we might need */
  var $result = $('#result');
  var $input = $('#input');

  $result.data('url', $result.val());
  var timer;

  /** function to submit data to the server and
      update the result input on success */
  function submitForm( input, newValue) {
    $.ajax({
      type: "POST",
      url: "/concatenate/index.php",
      data: {input:input},
      dataType: "html",
      success: function (data) {
        $result.val(newValue);
      }
    });
  };

  /** on key up, fill #result with the url + input */
  $input.bind('keyup', function() {
    var $this = $(this);
    var inp = $this.val();
    var url = $result.data('url');
    var newValue = url + inp + '/';

    if(timer) { clearTimeout(timer); }
    timer = setTimeout(function(){
      submitForm(inp, newValue) ;
    }, 40);
    return false;
  });

});
于 2013-11-10T00:43:14.373 回答
0

当以编程方式更改字段的内容时，不会触发 OnChange 事件。仅当用户在字段中输入数据时才会引发 OnChange 事件。

这就是它的工作方式。

于 2013-11-09T23:46:25.053 回答