javascript - 尽管返回 false，但通过 action 而不是 javascript 发送表单

标签 javascript jquery html forms

我的问题比标题中写的要深一些。 让我解释一下情况。 我正在构建一个用于购买产品的表格，该表格通过插件分为几步 FormToWizard使用 JQuery。此外，我正在使用 Validate轻松验证它，并使用 ZURB 的可自定义效果和 Reveal.js(抱歉，由于我缺少声誉，无法发布更多链接)，以获得处理发生的错误的良好模式。

我的程序:

  • 验证功能在网站完成加载时启动，并且 提交表单后，它会再次扫描整个表单。
  • 所以我告诉 validate 在出现错误时将变量 error 设置为 true 如果没有错误，则将其设置为 false。
  • 之后它应该调用函数 send() 来处理 模态和发送表格。
  • 它还有一个 return false 来阻止 html 发送它 自然的方式。

我的问题:

  1. 一旦发送函数的代码变得太大，它就不会 继续正常进行并突然被 .php 文件打断 将其称为表单的操作标签。
  2. 如果我减少函数 send() 中的行数，它会起作用 它应该的方式。但是这些额外的行非常重要。

那么我该怎么做才能避免这种情况呢？

我已经尝试将这两个函数包装在 $("#auftragsform").submit() 函数中，但这也不起作用。我尝试了一大堆东西，想了想所有我知道的和我能做的，但没有找到解决方案。

这是我的代码:

$(window).load(function(){    
        $('#auftragsformular').walidate({
            submitSelector: 'input[type="submit"]',
            doIfAllIsValid: function() {
                error = false;
                send();
            },
            doIfSomethingIsInvalid: function() {
                error = true;
                send();
            }
        }); // Initalize the form
        $('#name').walidate('validate'); // Make this element required
        $('#email').walidate('validate', {
            eventHandler: 'blur keyup',
            expression: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,10})+$/,
            invalid: function() {                  
                $(this).tipTip({ delay: 100, defaultPosition: "top", activation: "focus" });
            },
        });
        $('#plz').walidate('validate');
        $('#ort').walidate('validate');
        $('#strasse').walidate('validate');
        $('#hausnr').walidate('validate');
        $('#hoehe').walidate('validate');
        $('#breite').walidate('validate');
        $('input[type=radio][name=varianten]').walidate('validate');
        $('#agb').walidate('validate');
});

function send(){
    if (error == false) {
        if (is_not_bot()) {
            var name = $("#name").val();
            var email = $("#email").val();
            var adresse = $("#uebersicht_d").text();
            var auftrag = $("#uebersicht_a").text();

            $.post('assets/scripts/php/auftragform.php', "name=" + name + "&email=" + email + "&adresse=" + adresse + "&auftrag=" + auftrag, function(msg) {
                    $("#form").slideUp(1000);
                    $("#answer").delay(1000).fadeIn(1500);
                    console.log(msg);   
            });
        }
        return false;
    }

    if (error == true) {
        $('#errorModal').reveal();
        if ($("#versteckt_variante:checked").val() == "nix") {
            $("#alert_varianten").show();
            $("#felderhardcopy").hide();
        }
        if (!$("#agb").attr("checked")) {
            $("label[for=agb]").css("color", "red");
        }
        $("#step0").show();
        $("#step1").hide();
        $("#step2").hide();
        $("#senden").hide();
        selectStep(1);
        return false;
    }
}

HTML:

<form title="Auftrag" id="auftragsformular" action="assets/scripts/php/auftragform.php" method="post" enctype="multipart/form-data">     
        <div id="formcontainer">
            <fieldset title="Kontaktdaten" id="Kontakt"> 
            <legend> Ihre Daten </legend>

                <div class="left">
                    <label for="firma"> Firma</label>
                    <p> <input type="text" name="firma" id="firma" placeholder="Ihre Firma" > </p>

                    <label for="name"> Name</label>
                    <p> <input type="text" name="name" id="name" placeholder="Ihr kompletter Name (erforderlich)"> </p>

                    <label for="email"> Email-Adresse</label> 
                    <p> <input type="text" name="email" id="email" placeholder="Ihre Email (erforderlich)">
                     <a href="#" class="tip-trigger help"><span style="top: -150px;">Eine korrekte, existierende Email-Adresse wie z.B. max.mustermann@online.de ist erforderlich! Kommas, Umlaute, Klammern und Sonderzeichen sind verboten!</span>?</a>
                    </p>

                    <label for="tel"> Telefon</label> 
                    <p> <input type="tel" name="tel" id="tel" placeholder="Ihre Telefonnummer">
                         <a href="#" class="tip-trigger"><span style="top: -110px;">Durch Ihre Telefonnummer können wir Sie schneller erreichen</span>?</a>
                    </p>
                </div>

                <div class="left">
                    <label for="plz"> Postleitzahl</label> 
                    <p> <input type="number" name="plz" id="plz" placeholder="Ihre Postleitzahl (erforderlich)"></p>

                    <label for="ort">Ort</label> 
                    <p> <input type="text" name="ort" id="ort" placeholder="Ihr Wohnort (erforderlich)"></p>

                    <label for="strasse"> Straße</label> 
                    <p> <input type="text" name="strasse" id="strasse" placeholder="Ihre Straße (erforderlich)"></p>

                    <label for="hausnr"> HausNr.</label> 
                    <p> <input type="number" name="hausnr" id="hausnr" placeholder="Ihre Hausnummer (erforderlich)"></p>
                </div>

                <div class="clear"></div>
            </fieldset>




            <fieldset title="Auftrag" id="auftrag">
            <legend> Der Auftrag </legend>

                <label for="hoehe"> Maße des Sicherungskasten(cm)</label>
                <p> <input type="number" name="hoehe" id="hoehe" placeholder="Höhe (erforderlich)"> </p>
                <p style=""> <input type="number" name="breite" id="breite" placeholder="Breite (erforderlich)"></p>


                <div style="position: relative">
                    <label> Wählen Sie die Art des Auftrags </label><p></p>
                    <div class="left radio">
                        <label for="vorlage"> <img src="assets/images/cupcake.jpg" height="200px"/><br/> Motiv aus den Vorlagen auswählen</label> <br/>
                        <input type="radio" class="radio" name="varianten" id="vorlage" value="ausgewählte Vorlage" style="display:none;">
                    </div>
                    <div class="left radio">
                        <label for="digital"> <img src="assets/images/placeholder.png" height="200px"/><br/> Ein Bild hochladen</label> <br/>
                        <input type="radio" class="radio" name="varianten" id="digital" value="ein digitales Bild hochladen" style="display:none;">
                    </div>
                    <div class="left radio">
                        <label for="hardcopy"> <img src="assets/images/hardcopy.jpg" height="200px"/><br/> Ein gedrucktes Bild einsenden </label> <br/>
                        <input type="radio" class="radio" name="varianten" id="hardcopy" value="ein Bild einsenden" style="display:none;">
                    </div>
                    <input type="radio" class="radio" name="varianten" id="versteckt_variante" value="nix" style="display:none;">

                    <div class="clear"></div>
                    <div id="alert_varianten" class="alert"> Bitte wählen Sie eine Variante aus!</div>
                </div>

省略了一些部分，因为表格太大了。如果它们看起来很重要但我认为不重要，因为它们只是无关领域，我会发布它们。

        <p> <input type="checkbox" id="agb" name="agb" value="agb" style="width: auto;"> <label for="agb">Um einen Auftrag abzuschicken müssen Sie die <a href="../agb">AGB</a> akzeptieren</label></p>

    </fieldset>

    <p class="nosee">
      <label for="your_email">This isn´t requested, just a robot detection field:</label>
      <input id="your_email" name="your_email" size="60" value="" />
    </p>

    <input type="submit" value="Abschicken" id="senden" class="buttonwichtig">

</div>
</form>

最佳答案

与其尝试使用全局变量，不如这样做:

$(window).load(function(){    
    $('#auftragsformular').walidate({
        submitSelector: 'input[type="submit"]',
        doIfAllIsValid: function() {
            return send(false);
        },
        doIfSomethingIsInvalid: function() {
            return send(true);
        }
    });
    // ...
    // Code removed for brevity
});

function send(error) {
    if (!error) {
        if (is_not_bot()) {
            var name = $("#name").val();
            var email = $("#email").val();
            var adresse = $("#uebersicht_d").text();
            var auftrag = $("#uebersicht_a").text();

            $.post('assets/scripts/php/auftragform.php', "name=" + name + "&email=" + email + "&adresse=" + adresse + "&auftrag=" + auftrag, function(msg) {
                $("#form").slideUp(1000);
                $("#answer").delay(1000).fadeIn(1500);
                console.log(msg);   
            });
        }
    } else {
        $('#errorModal').reveal();
        if ($("#versteckt_variante:checked").val() == "nix") {
            $("#alert_varianten").show();
            $("#felderhardcopy").hide();
        }
        if (!$("#agb").attr("checked")) {
            $("label[for=agb]").css("color", "red");
        }
        $("#step0").show();
        $("#step1, #step2, #senden").hide();
        selectStep(1);
    }
    return false;
}

关于javascript - 尽管返回 false，但通过 action 而不是 javascript 发送表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17719870/

上一篇：javascript - 如何关闭所有 TinyMCE 内联编辑器

下一篇：javascript - 使用javascript在CSS中获取@font_face标签的url

相关文章：

javascript - Polymer 1.0/leaflet-map 中动态创建的标记不会在 Firefox 中呈现

javascript - 是否可以在 javascript 中将数字与字符串相除？

jquery - 克隆jquery中的div位置问题

html - 如何在 Azure Web App 上设置默认页面

javascript - 如何在 Javascript 中从数组中提取值

jquery - 如何在页面重新加载后保持相同的 `ul` 处于事件状态？

javascript - Ajax-发送前

html - 双色背景显示两列

javascript - 为什么浏览器会自动向下滚动到 '#hashhyperlinks'，我们如何才能阻止它？

javascript - 如何重构复杂的 JavaScript 函数？

©2024 IT工具网  联系我们