Question

我有一张表格：

<form id="main-contact-form" name="contact-form" action="sendemail.php" method="post">
    <div class="form-group">
        <input type="text" name="name" class="form-control" required="required" placeholder="Name">
    </div>
    <div class="form-group">
        <input type="email" name="email" class="form-control" required="required" placeholder="Email">
    </div>
    <div class="form-group">
        <textarea name="message" id="message" required="required" class="form-control" rows="8" placeholder="Message"></textarea>
    </div>                        
    <div class="form-group">
        <input type="submit" name="submit" class="btn btn-submit" value="Send">
    </div>
</form>

sendememail.php是：

<?php

$name = htmlspecialchars($_POST["name"]);
$email = htmlspecialchars($_POST["email"]);

$to = "email@email.com";
$sub = "New message from site";

$message = "New message\n
Name: $name 
Email: $email";

$from  = "From: $name <$name> \r\n";

mail($to, $sub, $message, $from);
return;

?>

javascript是：

var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thanks for you message!</p>').delay(3000).fadeOut();
    });
});

问题：它向电子邮件发送消息，但没有输入字段。他们的价值是空的。我试图在没有JS的情况下做到这一点，并且它正确地发送每个字段。

Answer 1

您可以使用jQuery ajax

使用其他类型的表单提交

<script>
    $('#main-contact-form').submit(function(event){
    event.preventDefault();
    $.ajax({
        type:'post',
        url:'sendememail.php',
        data:$(this).serialize(),
        success:function(response){ 
            if(response==1)
            {   

                setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-success">Review Successfully Submitted......</div></center></h5>');},5);

            }
            else 
            {

                setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-danger">Sorry Your Review Was Not Submitted......</div></center></h5>');},5);

            }
        }

    });
});
</script>

Answer 2

改进了ajax请求：

var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Sending...</p>').fadeIn() );
        },
        // by default method is `GET`, set `POST` explicitly
        method: "POST",
        // provide data that you need in a `data` property
        // there can be many ways to collect your data
        // `serialize` is the simplest method for this case
        data: form.serialize()
    }).done(function(data){
        form_status.html('<p class="text-success">Thanks for you message!</p>').delay(3000).fadeOut();
    });
});

Answer 3

指定要通过ajax发送的方法和数据，因为POST方法：

$.ajax({
        url: $(this).attr('action'),
        method: "POST",
        data: $(this).serialize();
    });

AJAX联系表单无法正常工作

3 个答案: