修改脚本以折叠提交表单上的 div

Question

我有以下联系表格及其contact.php 和JS 文件。

它使用 AJAX 在提交表单时使用适当的消息更改具有“messages-contact”类的 div。

我希望整个表单折叠起来，只留下消息。

如何修改此代码来做到这一点？

我的表格是：

<section id="contact">
 <h1>Contact Us</h1>
 <div class="myform">
  <form id="contactform" method="post" action="./stellarcontact.php" role="form">
    <div class="messages-contact"></div>
    <label for="form_name">Firstname *</label>
    <input id="form_name" type="text" name="firstname">
    <label for="form_lastname">Lastname *</label>
    <input id="form_lastname" type="text" name="lastname">
    <label for="form_email">Email *</label>
    <input id="form_email" type="email" name="email">
    <label for="form_subject">Subject *</label>
    <input id="form_subject" type="text" name="subject">
  </form>
 </div>
</section>

我的contact.php是

<?php

//Removed code un-needed for this question

// if requested by AJAX request return JSON response
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 just display the message
else {
    echo $responseArray[ 'message' ];
}

我的 Javascript 是：

$(function() {
    window.verifyRecaptchaCallback = function(response) {
        $('input[data-recaptcha]').val(response).trigger('change')
    }
    window.expiredRecaptchaCallback = function() {
        $('input[data-recaptcha]').val("").trigger('change')
    }
    $('#contactform').validator();
    $('#contactform').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) {
                        $('#contactform').find('.messages-contact').html(alertBox);
                        $('#contactform')[0].reset();
                        grecaptcha.reset()
                    }
                }
            });
            return !1
        }
    })
});

Answer 1

编辑看到这段代码sn-p，点击按钮模拟你的ajax调用。您可以将此代码包含在 ajax success 函数中。

$("#ajaxBtn").click(function(){
  var messageAlert = "Some Alert";
  var messageText = "Some Message";
  var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
  $('.messages-contact').html(alertBox);
  $('.myform').fadeOut();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="contact">
  <h1>Contact Us</h1>
  <div class="messages-contact"></div>
  <div class="myform">
    <form id="contactform" method="post" action="./stellarcontact.php" role="form">
      <label for="form_name">Firstname *</label>
      <input id="form_name" type="text" name="firstname"><br/>
      <label for="form_lastname">Lastname *</label>
      <input id="form_lastname" type="text" name="lastname"><br/>
      <label for="form_email">Email *</label>
      <input id="form_email" type="email" name="email"><br/>
      <label for="form_subject">Subject *</label>
      <input id="form_subject" type="text" name="subject"><br/>
    </form>
  </div><br/>
  <button id="ajaxBtn">Simulate AJAX Call</button>
</section>

您必须在表单之外包含<div class="messages-contact"></div>，并在您的成功函数中执行$('.messages-contact').html(alertBox);。然后您可以使用 CSS display/visibility 或 jQuery hide/fadeOut 等隐藏表单