自定义 HTML JQuery 表单在 WordPress 中不起作用答案

【问题标题】：Custom HTML JQuery Form not working in WordPress自定义 HTML JQuery 表单在 WordPress 中不起作用
【发布时间】：2014-02-11 02:19:40
【问题描述】：

我创建了一个表单，它使用 JQuery 和 AJAX 提交表单并交换页面内容，而无需刷新页面。在 WordPress 之外进行测试时，这非常有效。当我添加到 wordpress 并填写表单时，页面只是刷新为空白表单。

jQuery

$(document).ready(function() {
        //When the form is submitted...
        $('#savvyform').on('submit',function(e) {
            //Send the serialized data to mailer.php.
            $.ajax({
                url:'mailer2.php',
                data:$(this).serialize(),
                type:'POST',
                success:function(data){
                console.log(data);
                $("#success").show().fadeOut(5000); //=== Show Success Message==
                },
                error:function(data){
                $("#error").show().fadeOut(5000); //===Show Error Message====
                }
            });
            e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
            //$.post("mailer.php");
            //Take our response, and replace whatever is in the "form2"
            //div with it.
            $('#form1').hide();
            $('#form2').show();
        });
    });

这是 HTML 表单

<form id="savvyform" action="" method="POST" autocomplete="on">
        <table>
        <tr><td>First Name*:</td><td><input type="text" name="formfname" autofocus required></td><td>Address:</td><td><input type="text" name="formaddress"></td></tr>
        <tr><td>Last Name*:</td><td><input type="text" name="formlname" required></td><td>City:</td><td><input type="text" name="formcity"></td></tr>
        <tr><td>E-mail*:</td><td><input type="email" name="formemail" required></td><td>State/Province:</td><td><input type="text" name="formstate"></td></tr>
        <tr><td>Phone*:</td><td><input type="text" name="formphone" required></td><td>Zip:</td><td><input type="text" name="formzip"></td></tr>

        <tr><td colspan="2">Brief description of  goals:</td><td>Country:</td><td><input type="text" name="formcountry"></td></tr>
        <tr><td colspan="2"><textarea name="formgoals"></textarea></td></tr>
        <tr><td><input type="submit" name="submit" value="Submit" onMouseDown="javascript:swapContent('form2');"></td><td>&nbsp;</td></tr>
        </table>
    </form>

【问题讨论】：

标签： jquery wordpress forms

【解决方案1】：

您是将其包含在单独的文件中还是在同一页面的页脚中？

并尝试使用完整的 url 到 mailer2.php 文件。

试试

get_stylesheet_directory().'/mailer2.php'

【讨论】：

【解决方案2】：

您只需要使用 mailer2.php 的完整路径如果它在主题文件夹中使用：

url:<?php echo get_template_directory(); ?>'/mailer2.php'

参考：http://codex.wordpress.org/Function_Reference/get_template_directory

如果它在根目录中，请使用：

url:<?php echo site_url(); ?>'/mailer2.php'

参考：http://codex.wordpress.org/Function_Reference/site_url

上述方法仅适用于.php文件中的此脚本，如果您将此脚本添加到.js文件中，您可以直接将url添加到文件中：

url:'http://www.sireurl.com/path/to/mailer2.php'

【讨论】：

我试过 codeurl:.'mailer2.php' 和 codeurl:get_template_directory().'mailer2.php' 都不起作用，因为它不起作用仅在源代码中显示地址
检查更新的答案，如果你使用get_template_directory()函数你需要使用echo来打印值，它只返回url而不像the_content ()那样打印它
我试过这个，甚至添加了没有结果的永久路径。