联系表格收集数据而非邮寄

时间:2016-01-25 09:11:44

标签: javascript php jquery html5

好。我正在创建一个联系表单,我遇到了问题。事情是,我不控制很多的JavaScript,是我看不到的错误........ 我在javascript文件中知道这个,如果我把它发送给我正确的电子邮件。但随着javascript文件发送电子邮件给我,但它不喜欢选择发布数据,表单,并将其发送给我空。但问题是我需要这个javascript。这是在表单顶部显示一条消息,用于报告已成功提交的内容。没有我重定向到带有信息消息的空白页面。 这是HTML联系表单的一部分:

<div id="contact-section">
    <h3>Contacta con nosotros</h3>
    <div class="status alert alert-success" style="display: none"></div>
    <form id="main-contact-form" class="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="Nombre">
        </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="4" placeholder="Mensaje"></textarea>
        </div>                        
        <div class="form-group pull-right social-icons">
            <input type="submit" class="btn btn-primary pull-right" value="Enviar"</input>
        </div>
    </form>        
</div>

这将它发送到一个名为sendmail.php的文件:

<?php
    header('Content-type: application/json');
    $status = array(
        'type'=>'success',
        'message'=>'Gracias por contactar con nosotros. Nos pondremos en contacto con usted lo antes posible '
    );

    $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 = 'jimprogrammer2015@gmail.com';//replace with your email

    $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函数和我一样以相同的形式教授Message:

// Contact form validation
    var form = $('.contact-form');
    form.submit(function () {'use strict',
        $this = $(this);
        $.post($(this).attr('action'), function(data) {
            $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');
        return false;
    });

然后,后面的javascript代码让我很好地告知发送的消息,并将其发送给我,但电子邮件空白。 没有这个代码发送给我发送电子邮件与帖子上的所有数据,但我转到带有消息的空白页面。它留在那里...... 谢谢你的帮助。

3 个答案:

答案 0 :(得分:0)

您实际上并未发布数据检查文档http://api.jquery.com/jquery.post/

你像这样重写你的js代码

var form = $('.contact-form');
form.submit(function (event) {'use strict',
    event.preventDefault();//preventDefault
    var $this = $(this), data = $this.serialize();//serialize data
    $.post($(this).attr('action'), {data: data}, function(data) {
        $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
    },'json');//add post data as second parameter
});

在你的PHP代码中

<?php
    header('Content-type: application/json');
    $status = array(
        'type'=>'success',
        'message'=>'Gracias por contactar con nosotros. Nos pondremos en contacto con usted lo antes posible '
    );

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

    $email_from = $email;
    $email_to = 'jimprogrammer2015@gmail.com';//replace with your email

    $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;

答案 1 :(得分:0)

// Contact form validation
    var form = $('.contact-form');
    form.submit(function () {'use strict',
        $this = $(this);
        $.post($(this).attr('action'),{data : $(this).serialize()} , function(data) {
            $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');
        return false;
    });

尝试使用此代码段,您必须序列化表单然后发送。

答案 2 :(得分:0)

经过多次测试后(正如我所说,没有javascript不是我的专长)我已经解决了这个问题。在post方法中,没有发送任何内容,我缺少我发送的信息。我寄了这个:

$.post("sendemail.php, function(data) {

$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');

他带着URL并调用我想做的功能。在我的情况下,它是在调用URL(sendemail.php)后,你发送的数据将被加载到URL中,然后调用该函数,如下所示:

$.post("sendemail.php", {name: document.getElementById("name").value, email: document.getElementById("email").value, message: document.getElementById("message").value}, function(data) {

$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        },'json');

如您所见,收集要发送的表单值。我花了很多文件来找我。 谢谢你的帮助。