JS/Ajax : 페이지 새로 고침 또는 단추 누르기없이 양식 제출

Question

단추 누르기 또는 페이지 새로 고침없이 양식을 제출하려고합니다. 폼이 제출되면 PHP를 통해 입력 필드에 값을 표시합니다. 문제는 타이머를 추가했지만 아무 것도하지 않는 것입니다. 사용자가 타이핑을 멈추고 2 초 (키업)를주고 값을 가져 가면 어떻게 타이머를 설정할 수 있습니까? EXAMPLE

JS

<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>'); 
    } 
?> 

Answer 1

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; 
}); 

}); 

Answer 2

I가 시각적 타이머 자동 리프레시 페이지를 제공하기 위해 다음의 이용. 그것은 당신이 필요로하는 것 이상을하지만, 더 단순한 것으로 되돌려 놓을 수 있습니다.

/** 
* 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); 
      } 
     }); 
} 

그리고 아래

auto_refresh(); 

지원 기능 페이지로드에서

은 시작을 ...

/** 
* 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 }); 
    } 
}