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

I am attempting to send an email using a php script which is sent through the jquery dialog box when the user clicks the 'submit' button but I cant get this script to work. I have the dialog box in 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>

and I have this 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" );
            });
        });

which adds the dialog buttons and executes code in order to fire off an email using the sendemail.php which is here:

    <?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."
"."Postcode: ".$postcode."
"."Email: ".$email."
";

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 />';

?>

there seems to be a problem and I can't figure out what it is, if anyone can point me in the right direction that would be great thanks.

Your html and css looks good, but the js has some errors, it might still have some:

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");
});