Bonjour,
Je suis sur un projet Laravel avec un formulaire séparé en plusieurs étapes. J'ai donc en faite plusieurs formulaires qui vont envoyer les données en sessions et la dernière étape enverra le tout en BDD. J'utilise le système de tabs de Bootstrap et mes différents formulaires n'ont pas de boutons submit, c'est en effet les boutons des tabs (pour passer d'une étape à l'autre) qui font office de submit.

Du coup, j'aimerais passer par AJAX pour ne pas que la page se recharge et j'ai pour le moment ceci dans mon code (l'étape 1 du formulaire) :

$.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });

$('.nav-tabs').on('click', 'a', function() {
               if( $(this).attr('aria-controls') == 'step_1') {
                   $('#step-1').submit(function(e) {
                    e.preventDefault();
                       $.ajax({
                           method: $(this).attr('method'),
                           url: $(this).attr('action'),
                           data: $(this).serialize(),
                           dataType: "json"
                       })
                           .done(function(data) {
                               console.log('ok');
                           })
                           .fail(function(data) {

                               var errors = data.responseJSON;
                               $.each(errors, function (key, value) {
                                   var input = '#step-1 input[name="' + key + '"]';
                                   $(input + '+small').text(value);
                                   $(input).parent().addClass('has-error');

                               });
                           });

                       //return false
                   });

                }
       });

Malheureusement, cela ne fonctionne pas. le clic est bien détecté au bon endroit mais il ne se passe rien. Aucune erreur dans la console, Laravel ne me dit rien non plus et la partie network de la console ne m'indique pas que la requête AJAX passe... Quelqu'un aura une idée du pourquoi ? Merci d'avance :)

4 réponses


Maenhyr
Réponse acceptée

Tu as juste besoin d'appeler

$('#step-1').submit();

a la fin de ton code

Bonjour,

tel que tu l'as écrit.submit est un listener et est appelé lorsque ton formulaire est soumis, mais il ne le soumet pas. Du coup je pense que le problème peut venir de là. Sans le reste du code, il est difficile d'en être sûr.

Vable
Auteur

Bonjour,
Je n'ai pas vraiment plus en Js, du moins en ce qui concerne le formulaire... Est-ce qu'il y a un moyen de soumettre le-dit formulaire en utilisant AJAX sans passer par un bouton submit ? Il y a bien le $('#step-1).on('submit', function(){}); mais là encore, comment soumettre le formulaire ?

Vable
Auteur

Bon sang c'était si simple que ça ????
J'ai donc ajouté toute ma fonction AJAX dans un

$('#step-1).on('submit', function()};

en prenant bien soin d'ajouter le e.preventDefault(); à l'intérieur. J'ai ensuite, en dehors du .on, mit mon $('#step-1').submit()et cela fonctionne bien et bien ! J'avais déjà essayé cette méthode mais j'avais mit mon submit avant le .on, du coup, la page se rechargeait....
Merci :D