I have website that every page is being loaded using ajax both back to previous page, but the problem am facing now is submitting a form using ajax post. I try cache a form data with ajax and is working very fine except when i back to index.php
and load same page again it will submit multiple time. And the more i back and load same page again it will submit how many time i loaded it.
What i really mean is, when i click on Open Page One
from index page
, and submit a form it will work at first browser reload. But when i use my ajax back button to navigate to index page
and load that same Open Page One
without reloading browser, it will submit two times and if i repeat same process again again, it will keep submitting based on how many time i click back and enter the page again.
Please can anyone help me i have also tried making the form id unique but it only work fine for different page ID
.
INDEX.PHP
<div id="ShowPageContent">
<a href="openpage.php?page=1" class="loadwithajax" data-page-link="index.php">Open Page One</a>
<a href="openpage.php?page=2" class="loadwithajax" data-page-link="index.php">Open Page Two</a>
<a href="openpage.php?page=3" class="loadwithajax" data-page-link="index.php">Open Page Three</a>
</div>
<script>
$(function(){
"use strict";
$(document).on('click', '.loadwithajax', function(e){
var targetUrl = e.target.href;
var prevUrl = $(this).attr('data-page-link');
$.ajax({
type: "POST",
url: targetUrl,
data: {targetUrl : targetUrl, prevUrl : prevUrl},
async: false,
beforeSend: function(){},
success: function(htmlBlock){
$('#ShowPageContent').html(htmlBlock);
}
});
e.preventDefault();
});
});
</script>
OPENPAGE.PHP
<?php
$validateForm = 'validate-form-'.md5($_GET['targetUrl']);
?>
<a href="<?php echo $_GET['prevUrl'];?>" class="loadwithajax" data-page-link="">Back To Main Page</a>
<form action="" method="post" class="<?php echo $validateForm;?>">
<input type="text" value=""/>
<input type="submit" value="Send"/>
</form>
<script>
$(function(){
"use strict";
$(document).on('submit', '.<?php echo $validateForm;?>', function(e){
$.ajax({
type: "POST",
url: ajax_appserver('shop', 'update_product.php'),
data: $(self).serialize(),
beforeSend: function(){},
success: function(data){
console.log(data);
}
});
e.preventDefault();
});
});
</script>