Multi form - Récupération de données.

**Ebbdon** · 14/12/2021, 16h09

Bonjour tout le monde

J'aurais besoin d'un petit coup de main sur un point bloquant de mon code... J'ai créé un form wizard, la page html est divisée en deux form (obligé pour le wizard ?). A la fin, j'ai mon code JS qui vérifie un peu tout et qui fait une requête ajax pour traiter le formulaire. Cependant, j'ai un problème avec la partie "data:new FormData(this)" etant donné qu'il y a deux fois "<form enctype="multipart/form-data">" je crois qu'il n'aime pas...

Parce que j'ai l'erreur suivante :

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
at HTMLButtonElement.<anonymous> (form-wizard.js:163)
at HTMLButtonElement.dispatch (vendors.min.js:2)
at HTMLButtonElement.m.handle (vendors.min.js:2)

Voici mes bouts de code :

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<section class="horizontal-wizard">
                            <div class="bs-stepper horizontal-wizard-example">
                                <div class="bs-stepper-header" role="tablist">
                                    <div class="step" data-target="#account-details" role="tab" id="account-details-trigger">
                                        <button type="button" class="step-trigger">
                                            <span class="bs-stepper-box">1</span>
                                            <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">Détails du compte</span>
                                        <span class="bs-stepper-subtitle">Mettre les détails du compte</span>
                                    </span>
                                        </button>
                                    </div>
                                    <div class="line">
                                        <i data-feather="chevron-right" class="font-medium-2"></i>
                                    </div>
                                    <div class="step" data-target="#personal-info" role="tab" id="personal-info-trigger">
                                        <button type="button" class="step-trigger">
                                            <span class="bs-stepper-box">2</span>
                                            <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">Infos personnelles</span>
                                        <span class="bs-stepper-subtitle">Ajouts de vos informations</span>
                                    </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="bs-stepper-content">
                                    <div id="account-details" class="content" role="tabpanel" aria-labelledby="account-details-trigger">
                                        <div class="content-header">
                                            <h5 class="mb-0">Détails du compte</h5>
                                            <small class="text-muted">Mettre les détails du compte.</small>
                                        </div>
                                        <form enctype="multipart/form-data">
                                            <div class="row">
                                                <div class="mb-1 col-md-6">
                                                    <label class="form-label" for="email">Email</label>
                                                    <input type="email" name="email" id="email" class="form-control" placeholder="john@example.fr" aria-label="john.doe" readonly="readonly" value="<?php echo $form_user['user_email'] ?>" />
                                                </div>
                                                <div class="mb-1 col-md-6">
                                                    <label class="form-label" for="phone">Numéro de téléphone</label>
                                                    <input type="number" name="phone" id="phone" class="form-control" placeholder="07 55 22 22 22" />
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="mb-1 form-password-toggle col-md-6">
                                                    <label class="form-label" for="password">Mot de passe</label>
                                                    <input type="password" name="password" id="password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                                                </div>
                                                <div class="mb-1 form-password-toggle col-md-6">
                                                    <label class="form-label" for="confirm-password">Confirmation du mot de passe</label>
                                                    <input type="password" name="confirm-password" id="confirm-password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                                                </div>
                                            </div>
                                        </form>
                                        <div class="d-flex justify-content-between">
                                            <button class="btn btn-outline-secondary btn-prev" disabled>
                                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                                <span class="align-middle d-sm-inline-block d-none">Précédent</span>
                                            </button>
                                            <button class="btn btn-primary btn-next">
                                                <span class="align-middle d-sm-inline-block d-none">Suivant</span>
                                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div id="personal-info" class="content" role="tabpanel" aria-labelledby="personal-info-trigger">
                                        <div class="content-header">
                                            <h5 class="mb-0">Infos personnelles</h5>
                                            <small>Ajouts de vos informations personnelles</small>
                                        </div>
                                        <form enctype="multipart/form-data">
                                            <div class="row">
                                                <div class="mb-1 col-md-6">
                                                    <label class="form-label" for="first-name">Prénom</label>
                                                    <input type="text" name="first-name" id="first-name" class="form-control" readonly="readonly" value="<?php echo $form_user['user_surname'] ?>"/>
                                                </div>
                                                <div class="mb-1 col-md-6">
                                                    <label class="form-label" for="last-name">Nom</label>
                                                    <input type="text" name="last-name" id="last-name" class="form-control" readonly="readonly" value="<?php echo $form_user['user_name'] ?>" />
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="mb-1 col-md-6">
                                                    <label class="form-label" for="theme">Thème</label>
                                                    <select class="select2 w-100" name="theme" id="theme">
                                                        <option value="sun">Clair</option>
                                                        <option value="moon">Sombre</option>
                                                    </select>
                                                </div>
                                                <div class="mb-1 col-md-6">
                                                    <label class="form-label" for="language">Language</label>
                                                    <select class="select2 w-100" name="language" id="language">
                                                        <option value="FR">Français</option>
                                                        <option value="EN">English</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="mb-1 col-md-6">
                                                    <label for="file" class="form-label">Avatar</label>
                                                    <input class="form-control" type="file" id="file" name="file" accept="image/png, image/jpeg, image/jpg"/>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="d-flex justify-content-between">
                                            <button class="btn btn-primary btn-prev">
                                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                                <span class="align-middle d-sm-inline-block d-none">Précedent</span>
                                            </button>
                                            <button class="btn btn-success btn-submit">Envoyer</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

Ma partie JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
58
59
    $(horizontalWizard)
      .find('.btn-next')
      .each(function () {
        $(this).on('click', function (e) {
          var isValid = $(this).parent().siblings('form').valid();
          if (isValid) {
            numberedStepper.next();
          } else {
            e.preventDefault();
          }
        });
      });
 
    $(horizontalWizard)
      .find('.btn-prev')
      .on('click', function () {
        numberedStepper.previous();
      });
 
    $(horizontalWizard)
      .find('.btn-submit')
      .on('click', function () {
        var isValid = $(this).parent().siblings('form').valid();
        if (isValid) {
          $.ajax({
            url: assetPath + 'php/ajax-first-connection-insert.php',
            method:'POST',
            data:new FormData(this),
            contentType:false,
            processData:false,
            success:function(response)
            {
              if (response == 1) {
                Swal.fire({
                  icon: 'success',
                  title: 'Finalisation terminée !',
                  text: 'Votre compte est correctement finalisé.',
                  confirmButtonText: 'Parfait !',
                  allowOutsideClick: false,
                  customClass: {
                    confirmButton: 'btn btn-primary'
                  }
                });
              } else {
                Swal.fire({
                  icon: 'error',
                  title: 'Échec de la finalisation !',
                  text: 'Il y a eu une anomalie quelque part... Contactez un administrateur du SI.',
                  confirmButtonText: 'D\'accord',
                  allowOutsideClick: false,
                  customClass: {
                    confirmButton: 'btn btn-primary'
                  }
                });
              }
            }
          });
        }
      });

Sauriez-vous comment faire ?

**Toufik83** · 14/12/2021, 16h46

Bonjour,

Quand tu as utilisé this dans new FormData(this), this vaut le bouton .btn btn-success.btn-submit et donc ce n'est pas un <form>.

Vu que tu as un seul bouton submit et 2 form, le plus simple est de remplire manuellement les clés/valeurs du FormData comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
let fd=new FormData();
fd.append("email",$("#email").val());
fd.append('phone',$("#phone").val());
/*ainsi de suite pour les autres valeurs...*/
/*Pour l'image :*/
fd.append("image",$('#file').get(0).files[0]);
$.ajax({
....,
data:fd
});

ou bien avec une boucle $.each :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$("#email,#phone,#password,#confirm-password,#first-name,#last-name,#theme,#language,#file")
.each(function(){
     if($(this).attr("id")=="file") fd.append("image",$(this).get(0).files[0]);
     else fd.append($(this).attr('name'),$(this).val());
});

**NoSmoking** · 14/12/2021, 16h48

Bonjour,
quand tu écris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data:new FormData(this)

pose toi la question :« mais que vaut this à ce niveau ? ».

La signature est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

formData = new FormData("ElementHTML<form>")

**Ebbdon** · 14/12/2021, 17h12

Envoyé par Toufik83

Quand tu as utilisé this dans new FormData(this), this vaut le bouton .btn btn-success.btn-submit et donc ce n'est pas un <form>.

Vu que tu as un seul bouton submit et 2 form, le plus simple est de remplire manuellement les clés/valeurs du FormData comme ça :

Merci beaucoup, j'ai fait ça et ça fonctionne Parfaitement !

@NoSmoking , je comprends, merci aussi pour le temps consacré à me répondre

Multi form - Récupération de données.

AJAX

Discussions similaires

Partager

Partager