Insert into mysql using a php file that is called via AJAX . Before the insert php code executes a select query to find duplicate entries and continue the insert statement .
Problem . When calling php file from ajax. it runs twice and receives the response as a duplicate entry.
Well, I tried error_log from the insert function, which he called twice.
Form Verification Trigger Point
$("#load-modal").on("click","#addcountryformsubmitbtn",function(e){ e.preventDefault(); var $form = $("#addcountryform"), $url = $form.attr('action'); $form.submit(); });
This is the form submitted after validation:
}).on('success.form.bv', function(e){ e.preventDefault(); var $form = $("#addcountryform"), $url = $form.attr('action'); $.post($url,$form.serialize()).done(function(dte){ $("#load-modal").html(dte); }); });
using bootstrapvalidator, Core PHP, mysqli, Chrome browser.
Actual JS:
$(document).ready(function() { $php_self_country="<?php echo $_SERVER['PHP_SELF']."?pg=countrycontent"; ?>"; $("#country-content").load($php_self_country,loadfunctions); $("#country-content").on( "click", ".pagination a", function (e){ e.preventDefault(); $("#country-loading-div").show(); var page = $(this).attr("data-page"); $("#country-content").load($php_self_country,{"page":page}, function(){ $("#country-loading-div").hide(); loadfunctions(); }); }); $("#country-content").on("click","#closebtn",function(e){ e.preventDefault(); $("#country-content").load($php_self_country,loadfunctions); }); }); function loadfunctions(){ $("[data-toggle='tooltip']").tooltip(); $("#country-content").on("click","#addcountrybtn, #addcountrylargebtn",function(e){ e.preventDefault(); $.ajax({ url: $php_self_country, type: "POST", data: { 'addcountry':'Y' }, dataType: "html", cache: false }).done(function(msg){ $("#load-modal").html(msg); $("#load-modal").modal('show'); $('input[type="radio"]').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal' }); modalvalidation(); }).fail(function() { $("#load-modal").html( "Request Failed. Please Try Again Later." ); }); }); $("#country-content").on("click",".tools a",function(e){ e.preventDefault(); var recordid = $(this).attr("record-id"); $.ajax({ url: $php_self_country, type: "POST", data: { 'modifycountry':recordid }, dataType: "html", cache: false }).done(function(msg){ $("#load-modal").html(msg); $("#load-modal").modal('show'); $('input[type="radio"]').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal' }); modalvalidation(); }).fail(function() { $("#load-modal").html( "Request Failed. Please Try Again Later." ); }); }); $("#load-modal").on("click","#addcountryformsubmitbtn",function(e){ e.preventDefault(); var $form = $("#addcountryform"), $url = $form.attr('action'); $form.submit(); }); $("#load-modal").on("hide.bs.modal", function () { window.location.href=$php_self_country_pg; }); } function modalvalidation(){ $('#addcountryform').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { [-------Validation part comes here----------] } }).on('success.form.bv', function(e){ e.preventDefault(); var $form = $("#addcountryform"), $url = $form.attr('action'); $.post($url,$form.serialize()).done(function(dte){ $("#load-modal").html(dte); }); }); }
HTML
this html is called when the addcountrybtn button is addcountrybtn via AJAX and is written to the load-modal div, which is located in the base html file.
<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title"><i class="fa fa-exchange"></i> <?php echo COUNTRYLABEL; ?></h4> </div> <div class="modal-body"> <form role="form" method="POST" action="self.php" name="addcountryform" id="addcountryform" class="form-horizontal"> <div class="form-group"> <div class="col-xs-3"> <label for="countryname" class="pull-right">Country Name</label> </div> <div class="col-xs-9"> <div class="lnbrd"> <input type="text" class="form-control" name="countryname" placeholder="Enter Country Name"> </div> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label for="crncyname" class="pull-right">Currency Name</label> </div> <div class="col-xs-9"> <div class="lnbrd"> <input type="text" class="form-control" name="crncyname" placeholder="Enter Currency Name"> </div> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label for="crncycode" class="pull-right">Currency Code</label> </div> <div class="col-xs-9"> <div class="lnbrd"> <input type="text" class="form-control" name="crncycode" placeholder="Enter Currency Code"> </div> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label for="forrate" class="pull-right">Foreign Currency Rate<?php echo isset($icon)?$icon:''; ?></label> </div> <div class="col-xs-9"> <div class="lnbrd"> <input type="text" class="form-control" name="forrate" placeholder="Enter Foreign Currency Rate."> </div> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label for="taxpercent" class="pull-right">Tax %</label> </div> <div class="col-xs-9"> <div class="lnbrd"> <input type="text" class="form-control" name="taxpercent" placeholder="Enter Tax Percentage"> </div> </div> </div> </form> </div> <div class="modal-footer clearfix"> <button type="button" class="btn btn-danger pull-right" id="addcountryformsubmitbtn">Add</button> </div> </div>
Note: - The database code in the database is working properly.