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：提交表单而不刷新页面或点击按钮

回答

相关问题