不显示表单提交成功消息

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

以前，表单重定向到 php 文件，该文件显示基本成功消息。同样，这工作正常。

我尝试将联系人.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' . "rn";
$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;
    }
})
});

任何帮助非常感谢！

会：

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();
                }

相关内容

最新更新

热门标签：