Форма отправки не работает с jQuery Steps - PullRequest
Новая
       34

Форма отправки не работает с jQuery Steps

0 голосов
/ 03 июня 2019

Я использую плагин шагов jQuery, чтобы создать форму цитаты.Я хочу поймать ответы на вопросы, а затем отправить их по почте.Но на самом деле form.submit() не работает.Вот мой 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>>

Действие php заключается в отправке моего электронного письма.

Вот мой код JavaScript: 

<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>

Для меня, когда я звоню form.submit(), он будет воспроизводить действие из формы, здесь мое sendQuotation php действие.Или на самом деле вводимое имя отправляется в URL и загружается домашняя страница.

Что не так в моем коде?

Спасибо за ваш ответ,

Ответы [ 2 ]

0 голосов
/ 03 июня 2019

Перед отправкой вы должны запретить отправку формы по умолчанию 

event.preventDefault();

Добавьте эту строку перед следующей строкой: 

form.submit();
0 голосов
/ 03 июня 2019

Если вы хотите сделать POST-запрос (который сохранит все существующие параметры параметра строки запроса в URL-адресе в action), вам необходимо установить type="POST" в форме.

Если вы хотите сделать запрос GET, в котором данные формы закодированы в URL-адресе, и включают action=sendQuotation в эти данные, то вам нужно указать action=sendQuotation в качестве имени и Значение скрыто <input>, а не как часть action.

...