Javascript 使用jQuery对话框将表单发送到php脚本

我试图使用php脚本发送电子邮件，当用户单击“提交”按钮时，该脚本通过jquery对话框发送，但我无法使该脚本正常工作。我有html格式的对话框：

<div id="join-dialog" class="join-dialog">
<p>Please fill in your details to join the mailing list</p>
<table>
<form action="" method="post">
<tr><td><label for="name">NAME</label></td><td><input id='form-name' type="text" name="name"/></td></tr>
<tr><td><label for="email">EMAIL</label></td><td><input id='form-email' type="email" name="email"/></td></tr>
<tr><td><label for="email">POSTCODE</label></td><td><input  id='form-post' type="text" name="postcode"/></td></tr>
</form>
</table>
</div>

请填写您的详细信息以加入邮件列表

名称
电子邮件
邮政编码

我有一个jQuery：

$(function() {

            function addUser(){

            var name = document.getElementById("#form-name");
            var email = document.getElementById('#form-email');
            var post = document.getElementById('#form-post');

            if(name !==0 || email!==0 || post!==0){

            $.ajax({
                url: 'sendemail.php',
                type: 'POST',
                data: ('name, email, post'),
                success: function(){
                    document.getElementById('#join-dialog').innerHTML("<h2>Thank you for joining the mailing list</h2>");
                    }
                });
                }else{
                     document.getElementById('#join-dialog').append = "There was an error with your form details";
                }
            };

            $( ".join-dialog" ).dialog({
              dialogClass: "no-close",
              autoOpen: false,
              show: {
                effect: "fade",
                duration: 300
              },
              hide: {
                effect: "fade",
                duration: 300
              },
              modal: true,
              buttons:{
                'SUBMIT': addUser,
                'CLOSE': function(){
                    $(this).dialog('close');
                }
              }
            });

            $( "#open1" ).click(function() {
              $( ".join-dialog" ).dialog( "open" );
            });
        });

$（函数（）{
函数addUser（）{
var name=document.getElementById（“#表单名称”）；
var email=document.getElementById（“#表单电子邮件”）；
var post=document.getElementById（“#form post”）；
如果（姓名！==0 | |电子邮件！==0 | |帖子！==0）{
$.ajax({
url:'sendmail.php'，
键入：“POST”，
数据：（‘姓名、电子邮件、帖子’），
成功：函数（）{
document.getElementById（“#join dialog”）.innerHTML（“感谢您加入邮件列表”）；
}
});
}否则{
document.getElementById（“#join dialog”）.append=“表单详细信息出错”；
}
};
$（“.join dialog”）.dialog({
dialogClass：“禁止关闭”，
自动打开：错误，
展示：{
效果：“褪色”，
持续时间：300
},
隐藏：{
效果：“褪色”，
持续时间：300
},
莫代尔：是的，
按钮：{
“提交”：addUser，
“关闭”：函数（）{
$（this.dialog（'close'）；
}
}
});
$（“#open1”）。单击（函数（）{
$（“.join dialog”）.dialog（“打开”）；
});
});

它添加对话框按钮并执行代码，以便使用sendemail.php发送电子邮件，如下所示：

    <?php

    $name= $_POST['name'];
$postcode = $_POST['post'];
$email = $_POST['email'];

$email_to = 'xyz123@hotmail.com';
$email_subject = 'New mailing list subscriber';

$email_message = "Your new subscriber is: ".$name."\n"."Postcode: ".$postcode."\n"."Email: ".$email."\n";

mail($email_to, $email_subject, $email_message);

echo '<p style=\'font-size: 16px;\'>You have been added to Kaylee\'s mailing list!</p>';
echo '<br />';
echo '<br />';

?>

---

似乎有一个问题，我不知道它是什么，如果有人能给我指出正确的方向，那将是非常感谢。

您的html和css看起来不错，但js有一些错误，它可能仍然有一些：

function addUser() {

    var name = $("#form-name").val(),
        email = $('#form-email').val(),
        post = $('#form-post').val();

    if (name !== 0 || email !==0 || post !== 0) {

        $.ajax({
            url: 'sendemail.php',
            type: 'post',
            data: {
                'name': name,
                'email': email,
                'post': post
            },
            success: function() {
                $('#join-dialog').html("<h2>Thank you for joining the mailing list</h2>");
            }
        });

    } else {
        $('#join-dialog').append("There was an error with your form details");
    }

}

$( ".join-dialog" ).dialog({
    'dialogClass': "no-close",
    'autoOpen': false,
    'show': {
        'effect': "fade",
        'duration': 300
    },
    'hide': {
        'effect': "fade",
        'duration': 300
    },
    'modal': true,
    'buttons': {
        'submit': addUser,
        'close': function() {
            $(this).dialog('close');
        }
    }
});

$( "#open1" ).click(function() {
    $( ".join-dialog" ).dialog("open");
});

函数addUser（）{
变量名称=$（“#表单名称”）.val（），
email=$（'#形式email'）.val（），
post=$（'#form post'）.val（）；
如果（姓名！==0 | |电子邮件！==0 | |帖子！==0）{
$.ajax({
url:'sendmail.php'，
键入：“post”，
数据：{
“名称”：名称，
“电子邮件”：电子邮件，
“post”：post
},
成功：函数（）{
$（“#加入对话”）.html（“感谢您加入邮件列表”）；
}
});
}否则{
$（“#加入对话框”）.append（“表单详细信息出错”）；
}
}
$（“.join dialog”）.dialog({
'dialogClass'：“无关闭”，
“自动打开”：false，
“表演”：{
'效果'：“褪色”，
“持续时间”：300
},
“隐藏”：{
'效果'：“褪色”，
“持续时间”：300
},
“模态”：正确，
“按钮”：{
“提交”：addUser，
“关闭”：函数（）{
$（this.dialog（'close'）；
}
}
});
$（“#open1”）。单击（函数（）{
$（“.join dialog”）.dialog（“打开”）；
});

好的，我知道它不起作用-为什么还要发问-但具体症状是什么？谢谢，只是我的语法混乱阻止了它的工作