JS/Ajax：提交表單而不刷新頁面或點擊按鈕

我試圖提交沒有按鈕單擊或頁面刷新的表單。提交表單後，我將通過php回顯輸入字段中的值。問題是我添加了一個計時器，但根本沒有做任何事情。如何設置一個計時器，一旦用戶停止鍵入兩秒鐘（鍵盤），然後取值？ EXAMPLE JS/Ajax：提交表單而不刷新頁面或點擊按鈕

<script> 
$(function() { 

var timer; 

$(".submit").click(function() { 

    $('submit').on('keyup', function() { 

    var name = $("#name").val(); 


    var dataString = 'name='+ name; 


      $.ajax({ 
      type: "POST", 
      url: "index.php", 
      data: dataString, 
      success: function(result){ 
      /*$('.success').fadeIn(200).show(); 
      $('.error').fadeOut(200).hide();*/ 
      $('#special').append('<p>' + $('#resultval', result).html() + '</p>'); 

       } 

      }); 
      return false; 
}); 

}, 2000; 


}); 
</script>

PHP

<?php 
if($_POST){ 
    $url  = $_POST['name']; 
    echo ('<b><span id="resultval">'.$url.'</span></b>'); 
    } 
?>

來源

2012-07-13 techAddict82

什麼是'var timer;'和'}，2000;'？看起來你正在尋找一個'setInterval'給我。 – 2012-07-13 22:49:17

你爲什麼要在點擊功能中做一個關鍵點？這有沒有甚至火？ – naspinski 2012-07-13 22:53:08

從可用性和可訪問性的角度來看，真的是糟糕的想法。 [自動提交表單是邪惡的]（http://www.w3.org/TR/WCAG-TECHS/F36） – steveax 2012-07-13 22:53:18

http://jsfiddle.net/earlonrails/pXA6U/2/

$(function() { 
var timer = null; 
var dataString; 
function submitForm(){ 
    alert("success"); 
    $.ajax({ type: "POST", 
      url: "index.php", 
      data: dataString, 
      success: function(result){ 
       alert("success"); 
      } 

    }); 
    return false; 
} 
$('#submit').on('keyup', function() { 
    clearTimeout(timer); 
    timer = setTimeout(submitForm, 2000); 
    var name = $("#name").val(); 
    dataString = 'name='+ name; 
}); 

});

來源

2012-07-13 23:13:11 earlonrails

+1謝謝，它在jsfiddle中完美運行。我複製粘貼到我的例子，但沒有得到任何結果或成功的消息。我甚至添加了'$（document）.ready'，但沒有任何啓動。你可以查看[SITE]（http://webprolearner2346.zxq.net/registration-form/） – techAddict82 2012-07-13 23:37:38

我用下面的是提供自動刷新頁面視覺計時器。它比你需要的要多，但它可以被簡化成更簡單的東西。

與

auto_refresh();

支持功能啓動它在頁面加載低於

/** 
* This function checks if the auto-refresh check box is checked and then refreshes the page. 
* 
* 
*/ 
function auto_refresh() { 
    // **************************************** 
    //   Countdown display 
    // **************************************** 
    $("#countdown").progressbar({ value: 100 }); 
    check_refresh(120, 120); 
    $("#autorefresh").click(function() { 
      if ($(this).attr("checked") == "checked") { 
       $("#countdown").progressbar("option", "disabled", false); 
       $("#countdown").progressbar("option", "value", 100); 
       check_refresh(120, 120); 
      } 
     }); 
}

而且......

/** 
* This functions sets the time interval used to auto-refresh the page. 
*/ 
function check_refresh(countdownValue, secondsRemaining) { 
    var autorefresh = $("#autorefresh"); 

    if ($(autorefresh).attr("checked") == "checked") {  
     setTimeout(function() { 
      var value = Math.round(secondsRemaining/countdownValue * 100); 
      // consoleDebug("Seconds remaining: " + secondsRemaining); 
      secondsRemaining -= 10; 
      $("#countdown").progressbar("option", "value", value); 
      if (secondsRemaining < 0) { 
       loadDashboard(); // <--- Launch whatever you want here. 
       check_refresh(120, 120); 
      } else { 
       check_refresh(countdownValue, secondsRemaining); 
      } 
     }, 10000); 
    } else { 
     $("#countdown").progressbar({ disabled: true }); 
    } 
}

來源

2012-07-13 22:59:37 Bill

JS/Ajax：提交表單而不刷新頁面或點擊按鈕

回答

相關問題