JS / Ajax：提交表单而不刷新页面或单击按钮

Question

I am trying to submit a form without a button click or page refresh. Once the form is submitted then I will echo the value in the input field through php. The problem is that I added a timer but is not doing anything at all. How can i set a timer once user stops typing give two seconds(keyup) and then take the value? 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 use the following to provide an auto-refreshing page with a visual timer. It does more than you need, but it could be stripped back to something simpler.

Launch it at page load with

auto_refresh();

Supporting functions below

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

And...

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