清除表单值并在提交ajax后显示确认消息

时间:2014-03-06 02:27:34

标签: jquery ajax forms

我是这个级别的编码的新手,所以我可能不应该尝试移动代码,但我很接近我不能放弃它!
我在我正在建立的网站上有一个联系表格 - 我买的模板。我不喜欢表单布局,所以我试图使用我设置的其他网站的表单。两者都使用ajax发送表单,并且两者 - 以其原始形式 - 在发送时都有淡入的确认消息。我已使用旧模板中的代码替换了新模板中的所有代码,我可以获取发送电子邮件的表单,但我无法在提交后清除电子邮件字段,我无法获取显示确认/错误消息。
这是我的代码:
这是我的表格:

<div id="contact-form" class="row">
<div class="large-10 large-centered columns">
<form action="js/sendmail.php" method="post" class="contact-form">  
<input type="hidden" name="type" value="full" />
<p><h5 class="text-white left">Name</h5><br>
<input type="text" name="name" placeholder="name*" /></p>
<p><h5 class="text-white left">Email</h5>
<input type="text" name="email" placeholder="e-mail*" /></p>
<p><h5 class="text-white left">Subject</h5>
<input type="text" name="subject" placeholder="subject*" /></p>
<p><h5 class="text-white left">Message</h5>
<textarea name="message" placeholder="message*" ></textarea></p>
<p><input id="form-button" type="submit" value="Send" /></p>  
</form>
</div>

这是我的php脚本:

<?php
 /**
  * @package Website_Template
  * @since Website 1.0
  *
  * Script for receiving, validating and sending contact form.
  * Use $config variable to define email address for incoming contact forms.
  */

 // -----------------------------------------------------------------------------

 // Configuration
 $config = array
 (
    'title' => 'CC-UK',             // prefix of the contact form message's subject
    'email' => 'my@emailaddress.com' // e-mail address for incoming contact forms
 );

 // -----------------------------------------------------------------------------

 /**
  * Return output
  *
  * @param boolean $result
  * @param string $message
  */
 function output($result, $message)
 {
    echo json_encode(array('result' => $result, 'message' => $message));
    exit;
 }

 // -----------------------------------------------------------------------------

 // Form type
 $full = isset($_POST['type']) && $_POST['type'] == 'full';

 // Parsing POST data
 foreach (array('name', 'email', 'subject', 'message') as $field) {
    ${$field} = isset($_POST[$field]) ? trim(strip_tags($_POST[$field])) : '';
 }
 if (!$full) {
    $name = $email;
 }

 // Data validation
 if (empty($name) && $full) {
    output(false, 'Please enter your name.');
 } else if (!preg_match('/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)+$/i', $email)) {
    output(false, 'Invalid email address.');
 } else if (strlen($message) < 3) {
    output(false, 'Please write your comment.');
 }

 // Data preparing
 $subject = rtrim("[{$config['title']}] ".trim(str_replace(array("\r", "\n"), ' ', $subject)));
 $option = isset($_POST['option']) ? $_POST['option'] : 'no';
 if ($full) {
    $message .= "\r\n\r\nOption: {$option}\r\n\r\n---\r\n{$name}\r\n{$email}";
 } else {
    $message .= "\r\n\r\n---\r\n{$email}";
 }

 // Send mail
 $result = @mail(
    $config['email'],
    '=?UTF-8?B?'.base64_encode($subject).'?=',
    $message,
    "From: {$name} <{$config['email']}>\r\n".
    "Reply-to: {$email}\r\n".
    "MIME-Version: 1.0\r\n".
    "Content-type: text/plain; charset=UTF-8\r\n"
 );
 if ($result) {
    output(true, 'Message sent.');
 } else {
    output(false, 'Error occured. Message couldn\'t be sent.');
 }

这是我的js代码(在单独的脚本文件中):

    // Contact form
    $('.contact-form').submit(function() {
        if ($('input[type="submit"]', this).prop('disabled')) {
            return false;
        }
        var _this = this;
        $('input[type="submit"]', this).prop('disabled', true);
        $('.message', this).slideUp(300);
        $('.load', this).fadeIn(300);
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            complete: function() {
                $('input[type="submit"]', _this).prop('disabled', false);
                $('.load', _this).fadeOut(300);
            },
            success: function(data) {
                $('.message', _this).removeClass('green orange');
                if (data === null) {
                    $('.message', _this)
                        .text('Unknown error.')
                        .addClass('orange')
                        .slideDown(300);
                } else {
                    $('.message', _this)
                        .text(data.message)
                        .addClass(data.result ? 'green' : 'orange')
                        .slideDown(300);
                    if (data.result) {
                        $('input[type="text"], textarea', _this).val('');
                    }
                }
            }
        });
        return false;
    });

 });

所以我无法解决的原因是为什么这在我的原始网站上工作正常(表格清除发送,淡入确认消息出现)但在网站上我正在尝试安装它,虽然电子邮件发送,它不会清除表格,也没有确认。

有什么想法吗?

0 个答案:

没有答案