skip to Main Content

I need the textarea auto save every 5 second, but somehow it just save at the first 5 second and will not save after that. can someone help????

index.php

<div class="container"> 
<div class="form-group">  
                 <textarea name="iti" style="border-style:none" id="iti" rows="3" class="form-control"><?php echo $res['iti'];?></textarea>  
            </div>
<div class="form-group">  
                 <input type="hidden" name="gp_name" id="gp_name" value="<?php echo $res['gp_name'];?>" />
                 <div id="autoSave"></div>  
            </div>  
       </div>

<script>  
$(document).ready(function(){
var timer;
var timeout = 1000;
$('#iti').change(function(){

if(timer) {
clearTimeout(timer);
}
timer = setTimeout(autoSave, timeout); 

});
});

function autoSave(){
       var iti = $('#iti').val();
       var gp_name = $('#gp_name').val();
if(iti != '')  
{  
        $.ajax({  
             url:"lotus_iti_save.php",  
             method:"POST",  
                 data:{iti:iti, gp_name:gp_name},  
             dataType:"text",  
             success:function(data)  
            {  
                  if(data != '')  
                  {  
                       $('#gp_name').val(data);
                  }  
                  $('#autoSave').text(location.reload());  

            }  
    });  
} 
}   
</script>

<div class="container"> 
<div class="form-group">  
                 <textarea name="iti" style="border-style:none" id="iti2" rows="3" class="form-control"><?php echo $res['iti2'];?></textarea>  
            </div>
<div class="form-group">  
                 <input type="hidden" name="gp_name" id="gp_name" value="<?php echo $res['gp_name'];?>" />
                 <div id="autoSave2"></div>  
            </div>  
       </div>

<script>  
$(document).ready(function(){
var timer2;
var timeout2 = 1000;
$('#iti2').change(function(){

if(timer2) {
clearTimeout(timer2);
}
timer2 = setTimeout(autoSave2, timeout2); 

});
});

function autoSave2(){
       var iti = $('#iti2').val();
       var gp_name = $('#gp_name').val();
if(iti != '')  
{  
        $.ajax({  
             url:"lotus_iti_save.php",  
             method:"POST",  
                 data:{iti:iti, gp_name:gp_name},  
             dataType:"text",  
             success:function(data)  
            {  
                  if(data != '')  
                  {  
                       $('#gp_name').val(data);
                  }  
                  $('#autoSave2').text(location.reload());  

            }  
    });  
} 
}   
</script>

autosave.php

 $connect = mysqli_connect("localhost", "root", "", "test");
 if(isset($_POST["iti"]) )
 {
 $post_iti = mysqli_real_escape_string($connect, $_POST["iti"]);
 if($_POST["gp_name"] != '')  
 {  
 //update post  
 $sql = "UPDATE info SET iti = '".$post_iti."' WHERE gp_name = '".$_POST["gp_name"]."'";  
 mysqli_query($connect, $sql);  
 }  
 }

I have try to find solution on the internet, but unfortunately that I cannot find it at the moment, someone could help me out????

I have update my code, there are two textarea, the js code seems cannot share with the other textarea, so I create the other one, it is working fine for the first one and the rest are not working.

I have try to delete the first one, then the second one is working

2

Answers


  1. $(document).ready(function(){
     var timer;
     var timeout = 5000;
     $('#postTitle,#postContent').keyup(function(){
    
      if(timer) {
       clearTimeout(timer);
      }
      timer = setTimeout(autoSave, timeout); 
    
     });
    });
    
    function autoSave(){
        var postid = $('#postid').val();
        var title = $('#postTitle').val().trim();
        var content = $('#postContent').val().trim();
        var iti = $('#iti').val();
           var gp_name = $('#gp_name').val();
           if(iti != '')  
           {  
                $.ajax({  
                     url:"autosave.php",  
                     method:"POST",  
                     data:{iti:iti, gp_name:gp_name},  
                     dataType:"text",  
                     success:function(data)  
                    {  
                          if(data != '')  
                          {  
                               $('#gp_name').val(data);
                          }  
                          $('#autoSave').text("Post save as draft");  
    
                    }  
            });  
        } 
    }
    

    Try this code and move the function out of ready function.

    Login or Signup to reply.
  2. Your code seems to be fine just try returning some response from the autosave.php file so that your data can be put into the hidden input.

     $(document).ready(function(){  
     function autoSave()  
     {  
       var iti = $('#iti').val();
       var gp_name = $('#gp_name').val();
       if(iti != '')  
       {  
            $.ajax({  
                 url:"test2.php",  
                 method:"POST",  
                 data:{iti:iti, gp_name:gp_name},  
                 dataType:"text",  
                 success:function(data)  
                 {      
    
                      if(data != '')  
                      {  
                           $('#gp_name').val($.trim(data));
                      }  
                      $('#autoSave').text("Post save as draft");  
                      setInterval(function(){  
                           $('#autoSave').text('');  
                      }, 5000);  
                 }  
            });  
       }            
     }  
      setInterval(function(){   
          autoSave();   
         }, 5000);  
     });
    
     $connect = mysqli_connect("localhost", "root", "", "test");
     if(isset($_POST["iti"]) )
     {
       $post_iti = mysqli_real_escape_string($connect, $_POST["iti"]);
       if($_POST["gp_name"] != '')  
       {  
        //update post  
         $sql = "UPDATE info SET iti = '".$post_iti."' WHERE gp_name = '".$_POST["gp_name"]."'";  
       mysqli_query($connect, $sql);  
       echo $_POST['gp_name'];die;
      }  
     }
    

    Also try different time between show hide and request send. so change this time to

    setInterval(function(){  
         $('#autoSave').text('');  
    }, 3000);
    

    So that you can see success message.

    Warning: You are wide open to SQL Injections and should use parameterized prepared statements instead of manually building your queries.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search