Multi form - Récupération de données.
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 :
Citation:
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:
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="············" />
</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="············" />
</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:
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 ?
