Question

我正在使用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中发送的，并且主页已加载。

我的代码有什么问题？

感谢您的回答，

Answer 1

如果您要发出POST请求（它将在action中的URL上保留所有现有的查询字符串参数参数），则需要在表单上设置type="POST"。

如果您要发出GET请求（其中表单数据编码在URL中），并且在该数据中并且包括action=sendQuotation，那么您需要表达{{1} }作为隐藏的action=sendQuotation的名称和值，而不是<input>的一部分。

Answer 2

在提交之前，您必须阻止默认表单提交

event.preventDefault();

在以下行之前添加此行：

form.submit();

表单提交不适用于jQuery步骤

2 个答案: