HTML / JS联系表单未发送或显示错误消息

时间:2014-04-03 17:50:19

标签: javascript php html contact-form

我有一张联系表单,似乎无法发送到我的Gmail帐户。它与我见过的所有联系表单不同,因为错误消息在HTML中。按下提交按钮时没有任何反应(没有电子邮件,没有错误或成功消息)。请温柔,我对PHP有些新意。我需要一些帮助。

HTML

<div class="contactForm">
        <div class="successMessage alert alert-success alert-dismissable" style="display: none">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Thank You! E-mail was sent.
          </div>
          <div class="errorMessage alert alert-danger alert-dismissable" style="display: none">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Oops! An error occured. Please try again later.
          </div>

          <form class="liveForm" role="form" action="form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" data-hide-form="false">
            <fieldset>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">Name <span>(Required)</span></label>
                    <input type="text" required name="field[]" class="form-control">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label">Email <span>(Required)</span></label>
                    <input type="email" required name="field[]" class="form-control">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label class="control-label">Subject</label>
                    <input type="text" name="field[]" class="form-control">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label class="control-label">Message <span>(Required)</span></label>
                    <textarea name="field[]" required class="form-control" rows="5"></textarea>
                  </div>
                </div>
              </div>
              <input type="submit" class="btn btn-primary" value="Send Message">
            </fieldset>
          </form>

        </div>
      </div>

JS

/**
 * Contact Form
 */
jQuery(document).ready(function ($) {
    "use strict";
    $ = jQuery.noConflict();

    var debug = false; //show system errors

    $('.liveForm').submit(function () {
        var $f = $(this);
        var showErrors = $f.attr('data-show-errors') == 'true';
        var hideForm = $f.attr('data-hide-form') == 'true';

        var emailSubject = $f.attr('data-email-subject');

        var $submit = $f.find('[type="submit"]');

        //prevent double click
        if ($submit.hasClass('disabled')) {
            return false;
        }

        $('[name="field[]"]', $f).each(function (key, e) {
            var $e = $(e);
              var p = $e.parent().find("label").text();

            if (p) {
                var t = $e.attr('required') ? '[required]' : '[optional]';
                var type = $e.attr('type') ? $e.attr('type') : 'unknown';
                t = t + '[' + type + ']';

                var n = $e.attr('name').replace('[]', '[' + p + ']');

                n = n + t;
                $e.attr('data-previous-name', $e.attr('name'));
                $e.attr('name', n);
            }
        });

        $submit.addClass('disabled');

        $f.append('<input class="temp" type="hidden" name="email_subject" value="' + emailSubject + '">');

        $.ajax({
            url: $f.attr('action'),
            method: 'post',
            data: $f.serialize(),
            dataType: 'json',
            success: function (data) {
                $('span.error', $f).remove();
                $('.error', $f).removeClass('error');
                $('.form-group', $f).removeClass('has-error');

                if (data.errors) {
                    $.each(data.errors, function (i, k) {
                        var input = $('[name^="' + i + '"]', $f).addClass('error');
                        if (showErrors) {
                            input.after('<span class="error help-block">' + k + '</span>');
                        }

                        if (input.parent('.form-group')) {
                            input.parent('.form-group').addClass('has-error');
                        }
                    });
                } else {
                    var item = data.success ? '.successMessage' : '.errorMessage';
                    if (hideForm) {
                        $f.fadeOut(function () {
                            $f.parent().find(item).show();
                        });
                    } else {
                        $f.parent().find(item).fadeIn();
                        $f[0].reset();
                    }
                }

                $submit.removeClass('disabled');
                cleanupForm($f);
            },
            error: function (data) {
                if (debug) {
                    alert(data.responseText);
                }
                $submit.removeClass('disabled');
                cleanupForm($f);
            }
        });

        return false;
    });

    function cleanupForm($f) {
        $f.find('.temp').remove();

        $f.find('[data-previous-name]').each(function () {
            var $e = jQuery(this);
            $e.attr('name', $e.attr('data-previous-name'));
            $e.removeAttr('data-previous-name');
        });
    }
});

PHP

<?php
// Contact subject
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
// Enter your email address
$to ='divagraphicsinc@gmail.com';
$send_contact=mail($to,$subject,$message,$header);
?>

1 个答案:

答案 0 :(得分:0)

<?php
$ajax = (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
$ajax = true;
//we do not allow direct script access
if (!$ajax) {
    //redirect to contact form
    echo "Please enable Javascript";
    exit;
}
require_once "config.php";

//we set up subject
$mail->Subject = isset($_REQUEST['email_subject']) ? $_REQUEST['email_subject'] : "Message from site";

//let's validate and return errors if required
$data = $mail->validateDynamic(array('required_error' => $requiredMessage, 'email_error' => $invalidEmail), $_REQUEST);

if ($data['errors']) {
    echo json_encode(array('errors' => $data['errors']));
    exit;
}

$html = '<div style="width: 640px; font-size: 11px;">
  <h2>' . $mail->Subject . '</h2><ul>
';

foreach ($data['fields'] as $label => $val) {
    $html .= '<li>' . $label . ': ' . $val . '</li>';
}

$html .= '</ul></div>';

$mail->setup($html, $_REQUEST, array());

$result = array('success' => 1);
if (!$mail->Send()) {
    $result['success'] = 0;
}

echo json_encode($result);
exit;