Search code examples
phpjqueryhtmlkeyup

Keyup show success-message one time

I have a text-area which saves the data in my database every-time the user hits a key or writes inside the text-area . My problem is that when i want to show a success message like "saved" in a <p> it repeats itself every-time someone hits a key, i want it to repeatedly show the same message under but only one time.

If possible may remove the "saved" message on success after 10 seconds.

This is what i mean:
I want to remove this "LAGRET"

HTML:

<div class="form-group">
     <label for="comment">Kommentar:</label>
     <textarea class="form-control" rows="5" id="comment" name="comment"></textarea>
  <p name="message" id="message"></p>

jQuery:

$("#comment").keyup(function (){
    var isTyping = $('#comment').val();
    var data = 'result=' + isTyping;

    $.ajax({
        type: 'POST',
        url: "commentsave.php",
        data: data,
        cache: false,
        success: function(html){  
           $('#message').append('Saved');

        }
    });
});

PHP:

$name = $_POST['result'];
echo $name;

Thank you very much, dont need you to code for me but just guide me :)

Solution

  • Change:-

    $('#message').append('Saved');

    to:-

    $('#message').html('Saved');

    Note:- append() added the new data into the existing-one inside an element, that's why multiple successful messages shown.

    While html() will remove old data from element first and then add new-one. So no-repetition will happen.

    Please try to read every comment under your post and try to implement them for improvement.Specially not sending ajax call on each key-up. It will broke your system at-some point of time.