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

Question

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 = '[e-mail]';
$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.

Answer 1

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