Form submit not working with jQuery Steps

Question

I'm using jQuery steps plugin to make a quotation form. I want to catch the form answers and then to send it by mail. But actually the form.submit() is not working. Here my html

<form id="quotation-form" action="index.php?action=sendQuotation">
    <h3>Type de projet</h3>
    <fieldset>
        <legend>Sélectionnez votre type de projet:*</legend>

        <input id="showcaseBasic" name="project_type" type="radio" required>
        <label for="showcaseBasic">Site vitrine</label>
        <br/>
        <input id="showcaseAppointment" name="project_type" type="radio" required>
        <label for="showcaseAppointment">Site avec réservation de rendez-vous en ligne</label>
        <br/>
        <input id="ecommerce" name="project_type" type="radio" required>
        <label for="ecommerce">Site de e-commerce</label>
        <p>(*) Obligatoire</p>
    </fieldset>

    <h3>Nombre de pages</h3>
    <fieldset>
        <legend>Sélectionnez le nombre de pages dont vous pensez avoir besoin:*</legend>

        <input id="max5" name="max_page" type="radio" required>
        <label for="max5">1 à 5 pages</label>
        <br/>
        <input id="max10" name="max_page" type="radio" required>
        <label for="max10">6 à 10 pages</label>
        <br/>
        <input id="max15" name="max_page" type="radio" required>
        <label for="max15">11 à 15 pages</label>
        <br/>
        <p>(*) Obligatoire</p>
    </fieldset>

    <h3>Vos coordonnées</h3>
    <fieldset>
        <legend>Veuillez renseigner vos coordonnées:*</legend>
        <label for="lastName">Nom </label>
        <input id="lastName" name="lastName" type="text" required>
        <br/>
        <label for="firstName">Prénom </label>
        <input id="firstName" name="firstName" type="text" required>
        <br/>
        <label for="email">Email </label>
        <input id="email" name="email" type="mail" required>
        <br/>
        <p>(*) Obligatoire</p>
    </fieldset>

    <h3>Termes et conditions</h3>
    <fieldset>
        <p>Veuillez accepter les conditions de traitement des données*</p>
        <input id="acceptTerms" name="acceptTerms" type="checkbox" required> <label for="acceptTerms">En soumettant ce
            formulaire, j'accepte que les informations saisies soient utilisées uniquement dans le cadre de ma demande
            et de la relation commerciale éthique et personnalisée qui peut en découler.</label>
        <p>(*) Obligatoire</p>
    </fieldset>

</form>>

The php action is to send my email.

Here is my javascript code:

<script>
    var form = $("#quotation-form").show();

    form.steps({
        headerTag: "h3",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {
// Always allow previous action even if the current form is not valid!
            if (currentIndex > newIndex) {
                return true;
            }

// Needed in some cases if the user went back (clean up)
            if (currentIndex < newIndex) {
// To remove error styles
                form.find(".body:eq(" + newIndex + ") label.error").remove();
                form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
            }
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },

        onFinishing: function (event, currentIndex) {
            form.validate().settings.ignore = ":disabled";
            return form.valid();


        },
        onFinished: function (event, currentIndex) {
            alert("Je vous remercie de votre confiance. Vous recevrez votre simulation de devis sous 48 heures à l'adresse mail indiquée. Pensez à vérifier votre courrier indésirable.");
            /*
            var radioButtonSelected1 = document.querySelector('input[name=project_type]:checked');

            var radioButtonSelected2 = document.querySelector('input[name=max_page]:checked');

            var contactForm_lastName = document.querySelector('input[name=lastName]');

            var contactForm_firstName = document.querySelector('input[name=firstName]');

            var contactForm_email = document.querySelector('input[name=email]');

            var checkboxSelected = document.querySelector('input[name=acceptTerms]:checked');

            console.log(radioButtonSelected1.id);
            console.log(radioButtonSelected2.id);
            console.log(contactForm_lastName.value);
            console.log(contactForm_firstName.value);
            console.log(contactForm_email.value);
            console.log(checkboxSelected.id);
            */
            var form = $(this);
            form.submit();

        }
    }).validate({
        errorPlacement: function errorPlacement(error, element) {
            element.before(error);
        },


    });
</script>

For me, when I call the form.submit(), it will play the action from the form, here my sendQuotation php action. Or in reality the input name are sent in the url and the home page is loaded.

What's wrong in my code?

Thanks for your answer,

Answer 1

If you want to make a POST request (which will preserve any existing query string param parameters on the URL in the action) then you need to set type="POST" on the form.

If you want to make a GET request, in which the form data is encoded in the URL, and include action=sendQuotation in that data, then you need to express action=sendQuotation as the name and value of a hidden <input> and not as part of the action.

Answer 2

Before submitting you have to prevent the default form submit

event.preventDefault();

Add this line before the following line:

form.submit();