prevent redundancy in comment by ajax and stop fire function during request running and reduce response time

Question

i try to make comment system in posts if user submit the form the function will start and ajax request send put if he click submit quickly more one time the function will be fire more one time and that will case comment redundancy

i want to stop form submit until the first request finish

the form code is

     <form method="post" action="addcomment.php"  onsubmit="addreqcomment(<? =$request->id);">
     <input type="text"  name="comment" id="comm_area-<?=$request->id?>" class="input-block-level autosize-normal" placeholder="home.add comment..." required/>
     </form>

the JavaScript function:

  function addreqcomment(id){
      var comment=$.trim( $('#comm_area-'+id).val() );
      if(comment==''){
          alert("please enter comment");
          return false;
        }

        $.post("addcomment.php",{comment:comment,request_id:id},function(data){
        if(data=='error'){
          alert(error);
        }else if(data=='plzcomment'){
          alert("please enter comment");
        }else{
            $(".feed-comments-"+id).append(data);            
        }
         $('#comm_area-'+id).val('');
      });

      return false;

}

note: i submit form by enter button click

Disable the submit button after first click to prevent multiple submissions. And only enable it again when the AJAX call is finished, and clear the comment input field at the same time. (That will of course only prevent accidental double submissions – if a user _wants_ to mess with your system, they will find ways around that. To prevent that, you’d need to take server-side measures.) — CBroe, Feb 14 '15 at 14:22
Well then you could f.e. remove your submit handler for that time and add it again afterwards, or set a flag that lets the handler function know that a request is currently being processed and have it decide not to continue in that case … — CBroe, Feb 14 '15 at 14:44

score 0 · Answer 1 · answered Feb 14 '15 at 14:25

Simplest approach is to disable the submit button.

function addreqcomment(id) {
    var comment=$.trim( $('#comm_area-'+id).val() );
    if(comment=='') {
        alert("please enter comment");
        return false;
    }

    //disable submit button here (and show spinner)

    $.post("addcomment.php", {comment:comment, request_id:id}, function(data){
        if(data=='error') {
            alert(error);
        } else if(data=='plzcomment') {
            alert("please enter comment");
        } else {
            $(".feed-comments-"+id).append(data);            
        }
        $('#comm_area-'+id).val('');

        //enable submit button here (and hide spinner)

    });
    return false;
}

i submit form by click enter button – Mohamed Maree Feb 14 '15 at 14:40 — Mohamed Maree, Feb 14 '15 at 14:40
Enter button, submit button - same thing. What's the issue? – Roamer-1888 Feb 14 '15 at 15:00 — Roamer-1888, Feb 14 '15 at 15:00

score 0 · Answer 2 · edited May 23 '17 at 12:05

Try

var results = $("#results");
$("form").on("submit.ajax", function(e) {
  e.preventDefault();
  if ($.active < 1) {
    // do request stuff
  } else {
    // notify request in progress
    console.log($.active + " requests in progress, please wait")
  }
});

See jQuery.active function

var results = $("#results");
$("form").on("submit.ajax", function(e) {
  e.preventDefault();
  if ($.active < 1) {
    console.log($.active)
    $.get("http://news.feedzilla.com/en_us/headlines/fun-stuff/comics.rss?" + $.now(), null, "xml")
    .done(function(data) {
      results.html("").append($.now() + "<br />");
      $(data.documentElement).find("channel item title").each(function(i, el) {           results
        .append("<br />" + el.innerHTML + "<br />")
      })
    })
  } else {
    alert($.active + " requests in progress, please wait")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="submit" value="click" />
</form>
<div id="results"></div>

prevent redundancy in comment by ajax and stop fire function during request running and reduce response time

2 Answers2