Question

我有一个完整工作的html联系页面，带有一个php电子邮件脚本，带有recaptcha 2 - 所有这些都完美无缺。

以前，表单重定向到php文件，显示基本成功消息。再次，这很好。

我尝试将contact.js文件合并到页面上，表单提交仍然有效，但PHP脚本中的成功消息未显示。

对于JS而言，我是个白痴，所以这可能是个问题，但任何帮助都会感激不尽。

这里是HTML，PHP和JS：

<form id="contact-form" method="post" action="#" role="form">
   <div class="messages"></div>
   <div class="controls">
      <div class="row">
        <div class="col-md-7">
            <div class="form-group">
                <label for="form_name">Name *</label>
                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your name *" required="required" data-error="Name is required">
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <label for="form_email">Email *</label>
                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email address *" required="required" data-error="A valid email is required">
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <label for="form_phone">Telephone</label>
                <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter a contact telephone number (optional)">
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <label for="form_message">Message *</label>
                <textarea id="form_message" name="message" class="form-control" placeholder="Please enter your message *" rows="4" required="required" data-error="Please enter your message"></textarea>
                <div class="help-block with-errors"></div>
            </div>
            <p><div class="g-recaptcha" data-sitekey="xxxxxx"></div></p>
            <input type="submit" class="btn btn-success btn-send" value="Submit" onClick="window.location = '#formstart'"></p>
            <br><p class="text-muted"><strong>*</strong> These fields are required.</p>
</form>

PHP：

<?php

$sendTo = "email@email.com";
$subject = "New message from email.com";
$headers .= 'From: <enquiries@email.com' . "\r\n";

$name = @$_POST['name'];
$phone = @$_POST['phone'];
$email = @$_POST['email'];
$message = @$_POST['message'];

$okMessage = 'Thank you for your message. One of the team will be in touch as soon as possible.';
$errorMessage = 'There was an error while submitting the form. Please try again later';$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = "XXXXX";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
$emailText = "Name: $name \n Phone: $phone \n Email: $email \n Message: $message";

if (isset($data->success) AND $data->success==true) {

    mail($sendTo, $subject, $emailText, $headers);
    $responseArray = $okMessage;
   }
   else
   {
   //verification failed
   $responseArray = $errorMessage;
   }

    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
    }
    else {
    echo $responseArray;
    }

JS：

$(function () {

$('#contact-form').validator();

$('#contact-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
        var url = "contact.php";

        $.ajax({
            type: "POST",
            url: url,
            data: $(this).serialize(),
            success: function (data)
            {
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;

                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                if (messageAlert && messageText) {
                    $('#contact-form').find('.messages').html(alertBox);
                    $('#contact-form')[0].reset();
                    grecaptcha.reset();
                }
            }
        });
        return false;
    }
})
});

任何帮助都非常感谢！

Answer 1

将：

if (messageAlert && messageText) {
                    $('#contact-form').find('.messages').html(alertBox);
                    $('#contact-form')[0].reset();
                    grecaptcha.reset();
                }

这不清楚你试图调用的消息吗？

因为类消息是“#contact-form”上的第一个子节点，所以在放入之前的行中的数据后，它是否总是会立即重置你输入的消息？

另外，为什么不只是切换模态或弹出窗口而不是动态注入整个div？这似乎是很多工作，因为预先加载的html可以更容易地做到这一点？或者我错过了一些明显的东西？

我当然假设警报是“成功”消息。但为什么在代码中将其称为警报？为什么不称之为成功消息？使用适当的术语将有助于您自己和其他人稍后阅读您的代码;）

ajax方法中有一个选项可以为失败和成功提供单独的功能。

我希望我能帮到你，即使我错了你为什么看不到你的文字。

尝试添加

if (messageAlert && messageText) {
                    alert("Test");
                    $('#contact-form').find('.messages').html(alertBox);
                    $('#contact-form')[0].reset();
                    grecaptcha.reset();
                }

表单提交成功消息未显示

1 个答案: