Изменить скрипт, чтобы свернуть div в форме отправки

Question

У меня есть следующая форма контакта с ее файлами contact.php и JS.

Он использует AJAX для изменения div с классом "messages-contact" с соответствующими сообщениями при отправке формы.

Я хочу, чтобы вся форма свернулась и осталось только сообщение.

Как мне изменить этот код, чтобы сделать это?

Моя форма:

<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

Редактировать См. Этот фрагмент кода, нажмите кнопку, чтобы смоделировать ваш вызов 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 и т. Д.