使用自动获取方法提交操作？

Question

我正在开发一个 wordpress 插件，但在提交表单时遇到了一些问题。激活后，插件实质上会创建一个包含三个字段的小联系表，以便用户可以输入他们的姓名、电子邮件和电话号码，然后单击提交，然后将验证代码并将其存储在数据库中。

奇怪的是，当单击提交按钮时，数据似乎是使用 get 方法发送的，因为它显示在 url 中。不过，我正在处理带有 ajax 帖子的 javascript 文件中的按钮单击。这是表单代码：

    <div id="formwrapper" style="border:solid;border-color:red;">
        <form name="contact" action="">

            <label><strong>Contact Us</strong></label>

            </br>
            </br>

            <input type="text" name="name" placeholder="Name & Surname">
            <label class="error" for="name" id="nameErr">Please enter your name and surname</label>

            </br>
            </br>

            <input type="email" name="email" placeholder="Email Address">
            <label class="error" for="email" id="emailErr">Please enter a valid email address</label>

            </br>
            </br>

            <input type="phone" name="phone" placeholder="Cell or Landline">
            <label class="error" for="phone" id="phoneErr">Please enter your cell or landline number</label>

            </br>
            </br>

            <input type="submit" class="button" name="submit" value="Submit" id="submit_button">

        </form>
    </div>

这是我用来处理按钮点击的javascript：

$(".button").click(function() {

            $(".error").hide();

            var name = $("input#name").val();
            if (name == "") {

                $("label#nameErr").show();
                $("input#name").focus();
                return false;
            }

            var email = $("input#email").val();
            if (email == "") {

                $("label#emailErr").show();
                $("input#email").focus();
                return false;
            }

            var phone = $("input#phone").val();
            if (phone == "") {

                $("label#phoneErr").show();
                $("input#email").focus();
                return false;
            }

            var datastring = 'name=' + name + '&email' + email + '&phone' + phone;

            $.ajax({

                type:"POST";,
                url: "bin/process.php",
                data: datastring,
                success: function() {

                    $('#formwrapper').html("div id='message'></div>");
                    $('#message').html("<h2>Contact form submitted!</h2>")
                    .append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
                        $('#message').append("<img id='checkmark' src='images/check.png' />");
                    });
                }
            });
            alert "hello";
            return false;


        }

单击按钮不仅不能正确发布值，而且似乎激活了 wordpress 中的某种搜索功能，因为所有帖子都消失并返回“抱歉，没有帖子符合您的条件”消息。

Answer 1

你的js代码有错误

alert "hello";

无效使用：

alert("hello");

因此，您的return false 不会被触发并且表单会正常提交。

使用 event.preventDefault 而不是返回 false 以便更好地检测此类错误

$(".button").click(function(e){
   e.preventDefault();
   ...

});

正如 Joe Frambach 指出的那样，您的 ajax 选项中存在另一个语法错误

type:"POST";,

应该是

type:"POST",

Answer 2

试试这个

$(".button").click(function() {

        $(".error").hide();

        var name = $("input#name").val();
        if (name == "") {

            $("label#nameErr").show();
            $("input#name").focus();
            return false;
        }

        var email = $("input#email").val();
        if (email == "") {

            $("label#emailErr").show();
            $("input#email").focus();
            return false;
        }

        var phone = $("input#phone").val();
        if (phone == "") {

            $("label#phoneErr").show();
            $("input#email").focus();
            return false;
        }

        var datastring = 'name=' + name + '&email' + email + '&phone' + phone;

        $.ajax({

            type:"GET";,
            url: "bin/process.php",
            data: datastring,
            success: function() {

                $('#formwrapper').html("div id='message'></div>");
                $('#message').html("<h2>Contact form submitted!</h2>")
                .append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
                    $('#message').append("<img id='checkmark' src='images/check.png' />");
                });
            }
        });
        alert "hello";
        return false;


    }