dsrw29618
2015-01-02 08:43
浏览 73

使用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.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongzhugao9929 2015-01-02 08:52
    已采纳

    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");
    });
    
    打赏 评论

相关推荐 更多相似问题