soumissions de formulaire multiples

Juste pour donner un contexte, je suis un programmeur autodidacte sans éducation formelle ou d'expérience afin de présenter des excuses mon code à l'avance ...soumissions de formulaire multiples

code

tente ci-dessous pour transformer un site conçu pour un iPhone en un site d'une seule page (c'est-à-dire en utilisant ajax). J'ai un problème avec les soumissions de formulaires multiples ... on dirait que cela se produit lorsque vous cliquez sur le bouton Soumettre sur le formulaire # id2.

Je l'ai fait quelques recherches et je pense à la mise en œuvre de la solution ci-dessous jquery pour prévenir les soumissions de formulaire multiples: How to prevent form from submitting multiple times from client side?

et cette solution php pour la prévention sous forme de multiples submissionson côté serveur: http://www.ideologics.co.uk/programming/how-to-prevent-multiple-form-submissions-in-php

En outre, certains sites suggèrent que le code postal ajax devrait définir async à false et cache à false mais je ne suis pas entièrement sûr de la raison et si cela est applicable dans mon cas. La raison pour laquelle j'ai dû utiliser la fonction déléguée est que le fait de cliquer sur le formulaire # id1 charge un formulaire avec l'ID # 2 ... J'ai essayé d'utiliser la fonction on que le site jquery remplace la fonction de délégué mais cela n'a pas fonctionné. semble fonctionner. Je charge la version 1.8.2 en utilisant google CDN.

var startUrl = 'menu.php'; 

$(document).ready(function(){ 
    loadPage(startUrl); 
}); 

function loadPage(url) { 
    $('body').append('<div id="progress">Loading...</div>'); 
    scrollTo(0,0); 
    if (url == startUrl) { 
     var element = ' #header ul'; 
    } else { 
     var element = ' #content'; 
    } 

    $('#container').load(url + element, function(){ 
     var title = $('h2').html() || 'Menu'; 
     $('h1').html(title); 
     $('h2').remove(); 
     $('.leftButton').remove(); 

     if (url != startUrl) { 
      $('#header').append('<div class="leftButton">Menu</div>'); 
      $('#header .leftButton').click(function(e){ 
       $(e.target).addClass('clicked'); 
       loadPage(startUrl); 
      });  
     } 

     $("#container").delegate("a", "click", function(e){ 
    var url = e.target.href; 
      if (url.match(/example.com/)) { 
        e.preventDefault(); 
        loadPage(url); 
       } 
    }); 

    $("#container").delegate("form", "submit", function(event){ 
     event.preventDefault(); 
    }); 

     $('#id1').submit(function(){ 
    var formData = $(this).serialize(); 
    $.post('processform1.php',formData,processResults);  

    function processResults(data) { 
     $('#id1').remove(); 
     $('#container').html(data); 
    } 

     }); 

     $("#container").delegate("#id2", "submit", function(event){ 
     var formData = $(this).serialize(); 
    $.post('processform3.php',formData,processResults);  

    function processResults(data) { 
     $('#id2').remove(); 
     $('#container').html(data); 
    } 

     event.preventDefault(); 
    });     

     $('#progress').remove();   

}); 
}

est inférieur à la page d'index:

<html> 
<head> 
    <title>Title</title> 
    <meta name="viewport" content="user-scalable=no, width=device-width" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" /> 
    <link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" /> 
    <link rel="stylesheet" href="iphone.css" type="text/css" media="screen" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="iphone.js"></script> 

</head> 
<body> 
    <div id="header"> 
     <h1>Menu</h1> 
    </div> 
    <div id="container"></div> 

</body> 
</html>

Source

2013-02-08 Ryan Hough

Juste placer dans votre JS pour la page ce bouton est sur

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("input[type='submit']").attr("disabled", false); 
    $("form").submit(function(){ 
     $("input[type='submit']").attr("disabled", true).val("Please wait..."); 
     return true; 
    }) 
    }) 
</script>

Vous devrez peut-être utiliser un gestionnaire d'événements on() ou faire d'autres bricolages selon si le formulaire est généré au chargement de la page.

Source

2013-02-08 20:05:29 adamdehaven

Je reçois toujours le formulaire soumis deux fois - mais j'aime le changement de bouton pour attendre s'il vous plaît! –

Le formulaire est-il codé en dur sur la page lors de son chargement, ou le générez-vous dynamiquement via d'autres Javascript? – adamdehaven

Le formulaire est généré à partir d'un script PHP ... il semble que le nombre de fois que le formulaire est soumis devient progressivement pire ... Je pense que je devrais déconnecter les événements de soumission ou les retirer de la fonction de chargement. –

soumissions de formulaire multiples

Répondre

Questions connexes