Formulaire deux fois soumis jquery

Bonjour,

J'ai un formulaire qui traite l'upload de fichiers en php et lorsque je souhaite afficher une miniature de mon image en jquery (que je ne connais pas) mon formulaire est soumis une seconde fois (données, image etc.)
Je vous remercie de votre aide.

Voici le jquery:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
/////////////////////////////// POUR AFFICHER LA MINIATURE//////////////////////////////////////////////
            $(function () {
                $('#frm').on('submit', function (e) {
                    e.preventDefault();// On empêche le navigateur de soumettre le formulaire
 
                    var $form = $(this);
                    var formdata = (window.FormData) ? new FormData($form[0]) : null;
                    var data = (formdata !== null) ? formdata : $form.serialize();
 
                    $.ajax({
                        url: $form.attr('action'),
                        type: $form.attr('method'),
                        contentType: false, // obligatoire pour de l'upload
                        processData: false, // obligatoire pour de l'upload
                        dataType: 'json', // selon le retour attendu
                        data: data,
                    });
                });
 
                // A change sélection de fichier
                $('#frm').find('input[name="fichier"]').on('change', function (e) {
                    var files = $(this)[0].files;
 
                    if (files.length > 0) {
                        // On part du principe qu'il n'y qu'un seul fichier
                        // étant donné que l'on a pas renseigné l'attribut "multiple"
                        var file = files[0],
                            $image_preview = $('#image_preview');
 
                        // Ici on injecte les informations recoltées sur le fichier pour l'utilisateur
                        $image_preview.find('.thumbnail').removeClass('hidden');
                        $image_preview.find('img').attr('src', window.URL.createObjectURL(file));
                        $image_preview.find('.nom_photo').html("La photo se nomme <b>" + file.name + "</b>");
                        $image_preview.find('.poids').html(" Son poids est de <b>" + FileConvertSize(file.size) + '</b>');
                    }
                });
 
                // Bouton "Annuler"
                $('#image_preview').find('button[type="button"]').on('click', function (e) {
                    e.preventDefault();
 
                    $('#frm').find('input[name="fichier"]').val('');
                    $('#image_preview').find('.thumbnail').addClass('hidden');
                });
            });

où est le problème ?
tu fais un code pour soumettre deux fois ton formulaire
il est donc soumis deux fois.

la méthode onsubmit de javascript s'exécute avant la soumission du formulaire
une fois cette méthode terminé le formulaire est soumis
et toi dans ta méthode onsubmit tu soumet en ajax ton formulaire.

A+JYT

Formulaire 2 fois soumis jquery

Oui mais alors comment afficher la miniature sans soumettre une seconde fois mon formulaire ?

soit tu garde ton apel ajax et ta fonction onsubmit doit retourner false ce qui bloque l'envois natif du formulaire

soit tu supprime l'appel ajax

A+JYT

Formulaire 2 fois soumis jquery

Merci beaucoup, j'ai supprimé l'appel AJAX et ça fonctionne bien.