Question

我是初学者，正在尝试创建HTML网页。我使用免费在线模板并尝试创建联系页面。联系人调用php脚本发送捕获字段的电子邮件。当我发送电子邮件为纯PHP而没有javascript或ajax时，我可以让这个工作。但是，当我尝试使用带有ajax代码的javascript时，Web表单的内容不会被传递。这里提出了两个几乎相同的问题，但我发现javascript让我自己理解为初学者。 js的微小差异导致数小时试图解决但没有成功。

js deleting submitted form data

PHP form post data not being received due to jQuery

HTML代码

<div class="col-md-4 col-sm-12">
<div class="contact-form bottom">
    <h2>Send a message</h2>
    <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
        <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 Id">
        </div>
        <div class="form-group">
            <textarea name="message" id="message" required class="form-control" rows="8" placeholder="Your text here"></textarea>
        </div>                        
        <div class="form-group">
            <input type="submit" name="submit" class="btn btn-submit" value="Submit">
        </div>
    </form>
</div>

PHP脚本名为sendemail.php

<?php
header('Content-type: application/json');
$status = array(
'type'=>'success',
'message'=>'Thank you for contact us. As early as possible  we will contact you '
);


$name = @trim(stripslashes($_POST['name'])); 
$email = @trim(stripslashes($_POST['email'])); 
$subject = @trim(stripslashes($_POST['subject'])); 
$message = @trim(stripslashes($_POST['message'])); 

$email_from = $email;
$email_to = 'email@email.com';

$body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;
$success = @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');

echo json_encode($status);

die;

javascript如下

// Contact form
var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $.post(this).attr('action'),  
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contacting us. We will reply as soon as possible.</p>').delay(3000).fadeOut();
    });
});

有两个问题，第一个是使用javascript代码时表单数据没有通过。第二个是它显示消息两次并发送两封电子邮件。我认为第二个问题与再次调用该函数的php脚本有关。

帮助＆amp;指导将非常感激，我是初学者，只是尝试一个小小的挑战。

Answer 1

邮件表单似乎是故意禁用的。我花了一段时间才解决它。下面的代码将使其工作。我希望这会有所帮助。

    // Contact form
var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        type     : "POST",
        cache    : false,
        url      : $(this).attr('action'),
        data     : $(this).serialize(),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contacting us. We will reply as soon as possible.</p>').delay(3000).fadeOut();
    });
});

js没有传递php邮件的表单数据

1 个答案: