Minggu, 03 April 2016

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.



MENCEGAH MENGSubmit Form Berulang kali dengan  PHP dan JQUERY


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.


Free Download Template Blogger/ Blogspot kusus Android 2017 Respoinsive

Download Android Free Blogger Template 2017


Blogspot Template for Android is available for free for TreTan using a media blog to write down all the things related to the world of technology or gadgets. Android is an operating system that Google's latest output of the rival systems such as Symbian OS and others.



Free Download Template Blogger/ Blogspot kusus Android 2017


Android Phone Blogger Template designed in such a way that looks like a gadget like android in Mobile and are animated cartoon android as a supplement and make the display more template nice and interesting to be visited. Template enthusiasts of this type according to the posting form has Plumbers Coding technology and gadgets that are rampant in the market as well as reviews and price it easier for visitors to find out how the budget should be spent them.

the following are also available Blogger Template Android Market (II), which also designed with a view Blogger Slideshow it easy for visitors to know which gadget is again a trend in today's technological world. Template Blogspot Android Market is also complemented by jQuery as a complement to be more visible Awesome that will make visitors feel at home in it and do not get bored and will go back to see the other articles.



Statistik

Translate

Blog Archive