Ajax更新textarea，无需按钮或页面刷新

Question

I am trying to create a textarea that automatically updates the database without the need to press a button or refresh the page. After a "keyup" occurs there will be a timer that will countdown for 2 seconds. If no other input is made within those 2 seconds then that the data should be updated in the database. If a input is made the timer will restart.

I've written the ajax code below, it doesn't seem to work.

 $(document).ready(function() { var timer; $('#about').on('keyup', function() { var value = this.value; clearTimeout(timer); timer = setTimeout(function() { //do your submit here $("#about").submit() alert(value); }, 2000); }); var about = $('#about').val().trim(); $.ajax({ url: "comment.php?customer_id=" + "<?php echo $customer_id; ?>", type: 'post', data: { about: about }, success: function(response) { $('#cid').val(response); } }); }); 

 /* This is comment.php */ <?php session_start(); require_once 'config/config.php'; require_once 'includes/auth_validate.php'; $cid = $_GET['customer_id']; $about = $_POST['about']; $sql = ("UPDATE patient_id SET about = ? WHERE id = ?;"); $stmt = mysqli_stmt_init($conn); mysqli_stmt_prepare($stmt, $sql); mysqli_stmt_bind_param($stmt, "si", $about, $cid); mysqli_stmt_execute($stmt); ?> 

Answer 1

Move the ajax into the timeout, rather than performing the submit, since you want to update with ajax.

 $(document).ready(function() { var timer; $('#about').on('input', function() { var value = this.value; clearTimeout(timer); timer = setTimeout(function() { alert(value); $.ajax({ url: "comment.php?customer_id=" + "<?php echo $customer_id; ?>", type: 'post', data: { about: value }, success: function(response) { $('#cid').val(response); } }); }, 2000); }); });