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


Sending a form to a php script using jQuery dialog

我正在尝试使用当用户单击"提交"按钮时通过jquery对话框发送的php脚本发送电子邮件,但我无法使此脚本正常工作。我有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 />';
?>

似乎有一个问题,我无法弄清楚它是什么,如果有人能指出我正确的方向,那将非常感谢。

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