Question

我正在开发一个wordpress插件，我的表单提交有点麻烦。激活后，插件实际上会创建一个包含三个字段的小联系表单，以便用户能够输入他们的姓名，电子邮件和电话号码，然后单击“提交”，然后验证代码并将其存储在数据库中。

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

    <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中激活某种搜索功能，因为所有帖子都会消失并返回＆＃34;抱歉，没有符合您条件的帖子＆＃34;消息。

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;


    }

使用自动get方法提交动作？

2 个答案: