Ajax页面内容提交表单的次数是加载页面的多倍

Question

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>

Answer 1

The problem happens because every time you load the page you attach an onsubmit handler to the document. Loading that page multiple times and document will have multiple copies of the same handler attached to it.

Adding $(document).off('submit', '.<?php echo $validateForm;?>') before $(document).on('submit'... will remove the previously attached handlers before adding a new one, and will solve your problem.