Ajout d'un événement Click à un bouton de soumission, puis envoi du formulaire

J'ai un formulaire avec un bouton de soumission. J'ai attaché un événement de clic à ce bouton de soumission en utilisant JQuery. Une fois que je l'ai fait, mon formulaire n'a pas été soumis, je pensais que c'était à cause de l'événement que j'ai ajouté - si je supprime cet événement de clic, il soumet le formulaire avec succès.Ajout d'un événement Click à un bouton de soumission, puis envoi du formulaire

J'ai essayé de donner à mon formulaire un identifiant et d'appeler la fonction de soumission mais cela n'a pas réussi non plus. Que puis-je faire?

$('#submit_gen').click(function() { 

    $('#genbtn').html('<img src="images/ajax-loader.gif" alt="loading" />'); 

    $('#action_form').submit(); 

});

Le HTML:

<form id="action_form" action="generate.php" method="post" enctype="multipart/form-data"> 

<input id="file_upload" type="file" name="upload" onchange="file_select();"/> 

<input type="text" id="overlay_input"> 

<div id="genbtn" class="genbtn"> 
<input id="submit_gen" type="submit" value="Upload"> 
</div> 

</form>

Merci à tous

Source

2010-05-21 Abs

Attendez, est-ce que c'est le code qui fonctionne ou qui ne fonctionne pas? Et pouvez-vous montrer le HTML? – Konerak

J'ai ajouté le HTML, ce qui précède ne fonctionne pas. Seule l'icône de chargement apparaît et rien n'est envoyé car la page reste telle quelle. – Abs

Est-ce que votre page ne sera pas vide tant que la soumission est en cours (car ce n'est pas un envoi asynchrone?) – R0MANARMY

Il fonctionne dans Opera, mais Firefox semble en effet de refuser.

Le problème semble être le bouton submit dans la division genbtn. Si vous masquez le bouton, et insérez l'ajax-loader.gif APRÈS le bouton, cela fonctionne. Il ne fonctionne pas si vous supprimez le submitButton (remplacer le html), Firefox semble ne pas soumettre le formulaire plus :)

$('#submit_gen').click(function() { 
    $('#submit_gen').append('<img src="images/ajax-loader.gif" alt="loading" />'); 
    $('#submit_gen').hide(); 
    $('#action_form').submit(); 
});

Source

2010-05-21 22:25:56 Konerak

je vous remercie beaucoup d'avoir souligné cela :). C'est un comportement du navigateur firefox que je n'ai jamais rencontré. Juste pour ajouter, cela fonctionne sans soumettre. – Abs

Avez-vous essayé return true; à la fin de cette fonction anonyme?

Source

2010-05-21 22:08:34 jpabluz

Oui, je n'ai pas l'air de faire quoi que ce soit – Abs

Qu'en est-il du retour faux? –

Même chose avec ça ! Je pensais que l'événement click était une chose distincte de l'événement de soumission pourquoi sont-ils même se faire mutuellement ?! – Abs

Lorsque des choses comme ça m'arrivent, je crée un deuxième bouton invisible qui fait la soumission. Quelque chose comme ça.

<input id="butInvis" style="display:none;" />

Ensuite, dans ma fonction javascript sur le premier bouton, cliquez sur J'appelle butInvis.Click();

Source

2010-05-21 22:12:28

Je pense une meilleure façon de le faire serait de lier votre code personnalisé à la forme se soumettre, il suffit de remplacer votre code avec:

$('#action_form').submit(function() { 
    $('#genbtn').html('<img src="images/ajax-loader.gif" alt="loading" />'); 
});

Source

2010-05-21 22:17:22 mVChr

C'est une bonne idée. Je pense qu'il y a quelque chose qui ne va pas ici J'ai essayé ce qui précède (ça devrait fonctionner et soumettre le formulaire) mais ce n'est pas le cas, seul le chargeur montre, et mon navigateur firefox ne montre aucune indication de soumettre le formulaire. – Abs

mmm votre code ne se comporte pas correctement, êtes-vous sûr que l'ID de formulaire est exactement "action_form" ??? – jpabluz

Eh bien, c'est ce que son identifiant est dans l'exemple HTML. J'ai implémenté exactement ce comportement sur un site commercial actuellement en ligne, donc je ne sais pas pourquoi cela ne fonctionne pas pour vous. Peut-être que le problème est quelque chose de différent? – mVChr

<form id="action_form" action="generate.php" method="post" enctype="multipart/form-data"> 

<input id="file_upload" type="file" name="upload" onchange="file_select();"/> 

<input type="text" id="overlay_input"> 

<div id="genbtn" class="genbtn"> 
</div> 

</form> 

<input id="submit_gen" type="submit" value="Upload">

Est-ce que changer le code html ci-dessus au travail?

Source

2010-05-21 22:37:18 Sijin

Ajout d'un événement Click à un bouton de soumission, puis envoi du formulaire

Répondre

Questions connexes