title: Ajax live insertion double submit glitch
body: <p>This code is a savings system. But the withdrawal is not finished yet because i've found a glitch in my code. This code works fine. It can validate properly and deposite properly. And i found the glitch after I accidentally press the enter twice. And i noticed that i inserted two records in the database before clearing the password of the cashier. I want is even the cashier pressed the enter twiced.It's just insert one record in the transaction table. </p>
  
  <p>this is my SavingsAddInsert.php</p>
  
  <pre><code>    &lt;?php
  include("general.php");
  
      if(isset($_POST['Submit'])){
          $Amount = $_POST['Amount'];
          $Password = $_POST['Password'];
          $Transaction = $_POST['Transaction'];
          $SaverAccount = $_POST['AccountID'];
  
  
          if(empty($Amount) &amp;&amp; empty($Password) &amp;&amp; $Transaction == "undefined"){
              $error[] = "Please Select Transaction Type and put an Amount and Password!";
          }else{
              if(empty($Amount) === true || $Amount === null){
                  $error[] = "Amount is empty";
              }else{
                  if(!preg_match('/^[0-9.]*$/',$Amount)){
                      $error[] = "i only accept numeric and decimal";
                  }
              }
              if(empty($Password) === true || $Password === null){
                  $error[] = "Password is empty";
              }else{
                  $Cashier_Password = Cashier_password($_SESSION['AccountID'],$Password);
                  if($Cashier_Password === false){
                      $error[] = "Cashier Password is wrong";
                  }
              }
  
              if($Transaction == "undefined"){
                  $error[] = "Please select Category in Transaction Type ";
              }else{
                  if($Transaction == "WITHDRAW"){
                      if($Amount &gt; Check_Balance($SaverAccount)){
                          $error[] = "Insufficient Balance!";
                      }
                  }
              }
          }
  
          if(isset($error)){
              echo output_errors($error);
          }
  
  
          if(empty($error) || $error = 0){
              if($Transaction == "DEPOSITE"){//deposite
                  $Balance = Check_Balance($SaverAccount);
                  $TotalAmount = $Balance + $Amount;
                  $Cashier = $_SESSION['AccountID'];
                  $SavingsID = Get_SavingsID($SaverAccount);
  
                  $update_savings = mysql_query("UPDATE tblsavings SET TotalSavings = '$TotalAmount' WHERE AccountID = '$SaverAccount'");
  
                  if($update_savings){
  
                      $insert_transaction = mysql_query("INSERT INTO tbltransaction 
                                                                      (SavingsID,Cashier,ReceiveWithdraw,RunningBalance,TransactionType,Date,Time) VALUES
                                                                      ('$SavingsID','$Cashier','$Amount','$TotalAmount','$Transaction',now(),now())") or die(mysql_error());
  
                          if($insert_transaction){
                              echo "&lt;p&gt;&lt;i class='fa fa-check' aria-hidden='true'&gt;&lt;/i&gt;Transaction Complete. The Total Amount of AccountNo:'".get_AccountNo($SaverAccount)."' is ".$TotalAmount."&lt;/p&gt;";
  
                          }
                  }
              }
              else if($Transaction == "WITHDRAW"){//withdraw
                  unset($Password);
              }
          }
      }
      ?&gt;
  </code></pre>
  
  <p>this is my SavingsAdd.php</p>
  
  <pre><code>&lt;div class="popup-wrapper"&gt;
          &lt;div class="popup-body"&gt;
              &lt;div class="popup-head"&gt;
                  &lt;p&gt;Withdraw and Deposite&lt;/p&gt;
              &lt;/div&gt;
              &lt;?php 
                  if(isset($_GET['Account'])){
                      $Account = $_GET['Account'];
                      $get_info1 = mysql_query("SELECT tbluserdetail.FirstName,
                                                          tbluserdetail.MiddleName,
                                                          tbluserdetail.LastName,
                                                          tbluserdetail.Image,
                                                          tbluserdetail.ImageName,
                                                          tbluserdetail.Gender,
                                                          useraccounts.AccountNo,
                                                          useraccounts.AccountID,
                                                          useraccounts.Position
                                                          FROM useraccounts 
                                                          INNER JOIN tbluserdetail
                                                          ON useraccounts.UserID=tbluserdetail.UserID
                                                          WHERE useraccounts.AccountID = '$Account'");
  
                  while($row1 = mysql_fetch_array($get_info1)){
                      $FirstName_p = $row1['FirstName'];
                      $MiddleName_p = $row1['MiddleName'];
                      $LastName_p = $row1['LastName'];
                      $AccountNo_p = $row1['AccountNo'];
                      $AccountID_p = $row1['AccountID'];
                      $Gender_p = $row1['Gender'];
                      $Image_p = $row1['Image'];
              ?&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="p-header col-md-2 col-sm-2 col-xs-2"&gt;
                          &lt;?php
                              if(empty($Image_p)){
                                  if($Gender_p == "Male"){
                                      echo '&lt;img src="img/default-male.jpg"/&gt;';
                                  }else if($Gender_p == "Female"){
                                      echo '&lt;img src="img/default-female.jpg"/&gt;';
                                  }               
                              }else{
                                      echo '&lt;img src="data:image/jpeg;base64,'.base64_encode( $Image_p ).'"/&gt;';
                              }
  
                          ?&gt;
                      &lt;/div&gt;
                      &lt;div class="p-info col-md-9 col-sm-9 col-xs-9"&gt;
                          &lt;div class="row"&gt;
                              &lt;p&gt;&lt;?php if(isset($_GET['Account'])){ echo $FirstName_p." ".$MiddleName_p." ".$LastName_p;} ?&gt;&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;p&gt;Account No: &lt;?php if(isset($_GET['Account'])){ echo $AccountNo_p;} ?&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;hr/&gt;
                  &lt;div id="ajaxResult"&gt;
                  &lt;/div&gt;
                  &lt;hr/&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-5 col-sm-5 col-xs-5"&gt;
                          &lt;p&gt;Transaction Type:&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-7 col-sm-7 col-xs-7"&gt;
                          &lt;select class="form-control" name="Transaction"&gt;
                              &lt;option value="undefined"&gt;Select&lt;/option&gt;
                              &lt;option value="WITHDRAW"&gt;Withdraw&lt;/option&gt;
                              &lt;option value="DEPOSITE"&gt;Deposite&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-5 col-sm-5 col-xs-5"&gt;
                          &lt;p&gt;Amount:&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-7 col-sm-7 col-xs-7"&gt;
                          &lt;input type="text" class="form-control" name="Amount" id="Amount" placeholder="0.00"/&gt;
                          &lt;input type="hidden" class="form-control" name="AccountID" id="AccountID" value="&lt;?php if(isset($_GET['Account'])){ echo $AccountID_p;} ?&gt;" readonly&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-5 col-sm-5 col-xs-5"&gt;
                          &lt;p&gt;Cashier password:&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-7 col-sm-7 col-xs-7"&gt;
                          &lt;input type="password" class="form-control" name="Password" id="Password" placeholder="••••••••••"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="float-right col-md-12"&gt;
                          &lt;input type="button" value="Cancel" name="Cancel" class="btn btn-danger"/&gt;
                          &lt;input type="submit" value="Submit" name="Submit" id="Submit" class="btn btn-success"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;?php }}?&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>and this is my javascript inside the SavingsAdd.php</p>
  
  <pre><code>var form = document.forms.namedItem("myForm");
      form.addEventListener('submit', function(ev) {
  
        var oOutput = document.getElementById("ajaxResult"),
            fn = new FormData(form);
  
  
        fn.append("Submit", fn.get('Submit'));
        fn.append("Amount", fn.get('Amount'));
        fn.append("AccountID", fn.get('AccountID'));
        fn.append("Password", fn.get('Password'));
        fn.append("Transaction", fn.get('Transaction'));
  
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'SavingAddInsert.php', true);
  
        xhr.onreadystatechange = function() {
              if(xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
                  if(form){
                      document.getElementById('Amount').value = null;
                      document.getElementById('Password').value = null;
                      var return_data = xhr.responseText;
                      document.getElementById("ajaxResult").innerHTML = return_data;
                  }
  
  
  
              }
          }
        xhr.send(fn);
        ev.preventDefault();
      }, false);
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/It0N0.png" alt="as"></p>
  
  <p>as you can see in the image. i try to submit by pressing double enter. and the record inserted it twice.</p>