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

Question

当用户单击“submit”按钮时，我尝试使用php脚本发送电子邮件，当用户单击“submit”按钮时，该脚本将通过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" );
            });
        });

它添加对话框按钮并执行代码，以便使用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 />';

?>

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

Answer 1

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