L
L
Lyubov Ivanova2018-03-27 08:37:45
JavaScript
Lyubov Ivanova, 2018-03-27 08:37:45

How to hide form after submit?

Hi everybody.

Problem with form hiding after successful submission.
There is a form of the letter in popup and js to it.
What does js.
On successful submission, hides the header and displays a message about successful submission in its place, but does not hide the form.
When submitting an error, hides the header in its place, displays an error message and also does not hide the form.

Added form hiding on successful submission by adding display:none. But the problem is that it also hides it on error... Added display: block on error, but still only none.... tell me the solution pliz, what is wrong with my

form code

<div class="remodal" data-remodal-id="secondModal" data-remodal-options="hashTracking: false,closeOnConfirm: false">
  <button data-remodal-action="close" class="remodal-close"></button>
  <div class="formArea">
  
  <form id="secondForm" class="form" autocomplete="off">
  <p class="msgs"></p>

      <fieldset class="form-fieldset ui-input __first hide">
        <input name="uname" type="text" id="username" tabindex="0"/>
        <label for="username">
          <span data-text="Введите ваше имя">Введите ваше имя</span>
        </label>
      </fieldset>

      <fieldset class="form-fieldset ui-input __second hide">
        <input name="uphone" type="tel" id="phone" tabindex="0" pattern="^[ 0-9]+$"/>
        <label for="phone">
          <span data-text="Введите ваш телефон">Введите ваш телефон</span>
        </label>
      </fieldset>

      <input name="formInfo" class="formInfo" type="hidden" value=""/>

      <div class="form-footer">
        <input type="submit" class="formBtn" value="Заказать" />
      </div>
  </form>
  </div>
</div>


And js code
$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        var message = $(formNm).find(".msgs"); // Ищес класс .msgs в текущей форме  и записываем в переменную
        var formTitle = $(formNm).find(".formTitle"); // Ищес класс .formtitle в текущей форме и записываем в переменную
        $.ajax({
            type: "POST",
            url: 'modalform/mail.php',
            data: formNm.serialize(),
            success: function (data) {
              // Вывод сообщения об успешной отправке
              message.html(data);
              formTitle.css("display","none");
              $('.formBtn').css("display","none");
              $('.hide').css("display","none");
              form.css("display","none");
              setTimeout(function(){
                $('.formTitle').css("display","block");
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                message.html(error);
                formTitle.css("display","none");
              $('.formBtn').css("display","block");
              $('.hide').css("display","block");
                 $(formNm).css("display","none");
                setTimeout(function(){
                  $('.formTitle').css("display","block");
                  $('.msgs').html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });
    //для стилей формы
      var $input = $('.form-fieldset > input');
      $input.blur(function (e) {
        $(this).toggleClass('filled', !!$(this).val());
      });
});

Answer the question

In order to leave comments, you need to log in

2 answer(s)
H
hardcorelite, 2018-03-27
@hardcorelite

success: function (data) {
              // Вывод сообщения об успешной отправке
              message.html(data);
              formTitle.css("display","none");
              $('.formBtn').css("display","none");
              $('.hide').css("display","none");
              form.css("display","none");
              setTimeout(function(){
                $('.formTitle').css("display","block");
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
              $(".remodal").hide();
            },

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question