4

ボタンのクリックやページの更新を行わずにフォームを送信しようとしています。フォームが送信されたら、php を介して入力フィールドの値をエコーし​​ます。問題は、タイマーを追加しましたが、まったく何もしていないことです。ユーザーが入力を停止してから2秒(キーアップ)を与えてから値を取得したら、タイマーを設定するにはどうすればよいですか? 例

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

2 に答える 2

4

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

});

</ p>

于 2012-07-13T23:13:11.917 に答える
2

以下を使用して、視覚的なタイマーを備えた自動更新ページを提供します。必要以上のことを行いますが、単純なものに戻すことができます。

ページの読み込み時に起動します

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-13T22:59:37.667 に答える