MENCEGAH MENGSubmit Form Berulang kali dengan PHP dan JQUERY Free Source Code

Preventing repeatedly submit form with jQuery | a web application form will no doubt need to transmit data (submit) to be processed further, either to be stored into the database or simply as variable data on the website created code.

Sometimes, people make mistakes when sending the form to send the same data more than once, causes vary, some by accident, some by accident, it could be because the internet connection is lost when sedeng send form and so forth.

While the application requires only once delivery of data packets only from the form.

DOWNLOAD SOURCE CODE 

To overcome these problems, need to be made the way that form will only be sent once, not repeatedly. There are many ways that can be done, for example, if using PHP can set the length of time the delivery of an IP address, or by utilizing the session.

Or it could also utilize jquery, namely by removing or disabling the submit button when it is clicked so that users can only send data only once.

In this tutorial we will try to prevent the user to send data twice with the help of jQuery, but little use PHP as a complement for sending data using ajax, here's how.

Create an html form to fill in data

Here is the form html form which will be sent using jQuery ajax

<form id="jw-frm" method="post">

  <div class="input-group">Judul <span class="judul-validation validation-error"></span></div>

  <div>

    <input type="text" name="judul" id="judul" class="input-control" />

  </div>

  <div class="input-group">Konten </div>

  <div>

    <textarea rows="5" name="konten" id="konten" class="input-control"></textarea>

  </div>

  <div id="submit-control">

    <input type="button" name="btn-submit" id="btn-submit" value="submit" onClick="ajaxSend();"/>

  </div>

</form>

When the submit button is clicked, it will check whether the data sent is empty or not, if it is empty then display a message, if not empty then jQuery script will send data to a PHP page via Ajax.

During the delivery process, the submit button will be hidden and replaced with a notice that the form is being sent, marked also with a view loading. After the form is displayed again sent the notification that the data has been successfully transmitted, while not re-key so that users can not send the data again, unless he's reloading the web page.

function ajaxSend() { 

  var valid = true;

  valid = checkEmpty($("#judul"));

  if(valid) {

    var judul = $("#judul").val();

    var konten = $("#konten").val();

    $.ajax({

      url: "process-ajax.php",

      data:'judul='+judul+'&konten='+konten,

      type: "POST",

      beforeSend: function(){

        $('#submit-control').html("<img src='loading.gif' /> Data sedang dikirim...");

      },

      success: function(data){

        $('#submit-control').html("Data sudah terkirim");

      }

    });

  }

}

function checkEmpty(obj) {

  var name = $(obj).attr("name");

  $("."+name+"-validation").html(""); 

  $(obj).css("border","");

  if($(obj).val() == "") {

    $(obj).css("border","#FF0000 1px solid");

    $("."+name+"-validation").html("Harus diisi");

    return false;

  } 

  return true;  

}

With tricks like that then when the submit button is clicked, then instantly switch will not be seen again, so the user will not be able to send data repeatedly.

Tweet

Subscribe to receive free email updates: