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

Submit action using an automatic get method?

本文关键字:方法 提交 操作 获取      更新时间:2023-09-26

我正在开发一个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中的某种搜索功能,因为所有帖子都会消失并返回"对不起,没有符合您条件的帖子"消息。

你的 js 代码中有错误

alert "hello";

无效使用:

alert("hello");

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

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

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

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

type:"POST";,

应该是

type:"POST",

试试这个

$(".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;

    }