Soumission de formulaire de soumission à iframe avec jQuery

Question

J'ai une page PHP avec plusieurs formulaires, dont certains se soumettent à un iframe (séparé iframe pour chaque formulaire) pour permettre le téléchargement de fichiers de type ajax. Je ne veux pas que l'utilisateur doive cliquer sur un bouton "Envoyer" après avoir sélectionné chaque fichier, donc je soumets le formulaire en utilisant la fonction .submit() de jQuery à l'intérieur d'un événement .change() sur l'élément d'entrée de fichier.

Les téléchargements de fichiers individuels fonctionnent correctement. Cependant, après que tous les fichiers individuels ont été soumis, l'utilisateur doit cliquer sur un bouton final qui reconnaît avoir examiné les données du formulaire tel qu'affiché. Ce dernier bouton est juste un bouton indépendant. Ce n'est pas un bouton de soumission et il n'est associé à aucun formulaire. Lorsque la page se charge initialement, ce bouton fonctionne correctement.

Cependant, une fois que la fonction .submit() est appelée pour les téléchargements de fichiers, le bouton final semble être lié à l'action de l'autre formulaire.

En gros, la structure de la page est comme suit:

<form id="finalForm" target="finalTarget" action="uploadFile.php?action=final" method="post" enctype="multipart/form-data"> 
    <div id="finalSelect"> 
    <input type="file" name="finalDraft" id="finalDraft" value="file" /> 
    <input type="submit" value="Submit" id="finalSubmitButton" /> 
</form> 
<iframe id="finalTarget" name="finalTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe> 

<form id="signForm" target="signTarget" action="uploadFile.php?action=sign" method="post" enctype="multipart/form-data"> 
    <div id="signSelect"> 
    <input type="file" name="signPage" id="signPage" value="file" /> 
    <input type="submit" value="Submit" id="signSubmitButton" /> 
</form> 
<iframe id="signTarget" name="signTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe> 

<button type="button" id="mainSubmitButton">Submit</button> 

le jQuery est comme suit:

$("#mainSubmitButton").click(function(){ 
    document.location.href='pageName.php'; 
}); 

$("#finalDraft").change(function(){ 
    $("#finalForm").submit(); 
} 

après avoir fait un projet final soumettre, quand je clique sur le mainSubmitButton il charge uploadFile.php.

Est-ce que quelqu'un sait pourquoi cela se produit, et ce que je peux faire pour corriger le problème?

Merci d'avance pour votre aide. Kate

Answer 1

Retourne "false" à partir du bouton cliquez pour annuler tout comportement par défaut.

$("#mainSubmitButton").click(function(){ 
    document.location.href='pageName.php'; 
    return false; 
}); 

Answer 2

la raison de cela, je pense est que l'élément bouton que vous avez utilisé agit comme un bouton d'envoi, pas comme vous l'intention d'agir - comme un bouton régulier. Il suffit de passer à

<input type="button"> 

et vous devriez tous être ensemble.

départ http://reference.sitepoint.com/html/button pour plus d'infos

Référence implementation.