關於隱藏輸入字段內的更改事件

我有兩個AJAX函數。第一個函數獲取第一個輸入字段的結果並連接一個字符串，然後更改第二個輸入字段的值。第二個輸入字段是(type=」hidden」)。第二個函數檢查是否在第二個輸入字段中觸發了更改，然後在第三個輸入字段中顯示該值。什麼都沒有通過的值在輸入欄＃2 Example 關於隱藏輸入字段內的更改事件

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

來源

2013-11-09 techAddict82

是不是真的需要換你的腳本在兩個單獨的DOM準備的事件&mash;一個就夠了:) – Terry

@Terry，你能告訴我怎麼樣？我試過，但它不適合我 – techAddict82

爲什麼2 ajax調用？它看起來像第一個對響應「數據」沒有任何作用。這可能只是一個沒有Ajax調用的函數。也許稍微澄清一下你想要完成的事情會有所幫助。將所有內容放在一個onload中的問題是，您在兩者中都使用'submitForm'。所以如果你把它們都放在一個onload中，你需要改變你的函數名。 –

這個答案實際上是對你的代碼的修改，但也許它會做你需要和簡化的事情。

如果你只是扔掉第二個輸入框，並顯示#result（使其不隱藏），我認爲這段代碼可能會得到你需要完成的東西，並簡化一些事情。

這個應該做的是不要每隔40ms向服務器提交請求，並且在成功請求時，我們更新#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-10 00:43:14

+1好吧，它的工作！是否可以在同一個函數中的字段2中輸入ajax api'GET'請求？ – techAddict82

我不確定是否準確。但是，如果其他輸入字段是人們可以輸入的內容，那麼您可以在$ result的關鍵字上執行另一個綁定，並且基本上運行相同的事情。如果你走這條路線，你可能想要使用另一個定時器變量（timer2），以便在第二個輸入發生錯誤時不清除第一個定時器的超時。 –

當字段的內容以編程方式更改將不會觸發onchange事件所做的更改觸發。 OnChange事件僅在用戶將數據輸入到字段中時引發。

這就是它的工作方式。

來源

2013-11-09 23:46:25 HaukurHaf

關於隱藏輸入字段內的更改事件

回答

相關問題