Как сохранить Html элемент скрытым, пока Ajax не отправит сообщение

Question

У меня есть форма, созданная с помощью начальной загрузки.

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="${pageContext.request.contextPath}/Post" method="POST">
    <div class="form-group">
      <label for="Name">Name:</label>
      <input type="text" class="form-control" id="name" placeholder="" >
    </div>
    <div class="form-group">
      <label for="Age">Age:</label>
      <input type="text" class="form-control" id="age" placeholder="" >
    </div>
    <div class="form-group">
      <label id="target" class="hidden" style="color:red;">Hi msg</label>    
    </div>
    <button type="submit" class="btn btn-default" id="press">Submit</button>
  </form>
</div>    

Форма имеет в последнем метку, которая отображает текст (привет сообщения). я хочу это быть скрытым изначально, а затем станет видимым после того, как мой запрос POST будет успешным, мой вызов ajax выглядит следующим образом.

$(document).ready(function(){
  $("#press").click(function(){
    $.ajax({
      type: "POST",
      url: "${pageContext.request.contextPath}/Post",
      success: function() {
        $("#target").removeClass("hidden");
      }
    }); 
  });
});

В основном это попытка удалить скрытый класс из метки после почтовый запрос успешен. Что я делаю неправильно ? Проблема в том, что он становится видимым только на пару секунд, пока не станет скрытым снова.

Answer 1

Вы можете попробовать просто вызвать метод show (). Обычно «скрытый» класс устанавливает только свойство display в css.

$(document).ready(function(){
  $("#press").click(function(){
    $.ajax({
      type: "POST",
      url: "${pageContext.request.contextPath}/Post",
      success: function() {
        $("#target").show();
      }
    }); 
  });
});

Answer 2

I Actually Figured out the answer. the problem was the <button> tag which keeps on calling other Styles related to the button causing a reload effect at the Post Request. i changed the <button> tag to a <div>.

Basically From this;
<button type="submit" class="btn btn-default" id="press"> Submit </button>

To this;
<div type="submit" class="btn btn-default" id="press"> Submit </div>

then my original code worked fine.

Answer 3

Я думаю, что вы не правы с классом Bootstrap hidden. Попробуйте заменить этот класс на d-none.

Вот пример:

JSFIDDLE

Edit: Чтобы проверить, был ли ваш почтовый запрос успешным, вот пример:

$(document).ready(function(){
  $("#press").click(function(){
    $.ajax({
      type: "POST",
      url: "${pageContext.request.contextPath}/Post",
      success: function(data) {
        if (data === 'true') {
            $("#target").removeClass("d-none");
        }        
      }
    }); 
  });
});

В этом случае, если URL " $ {pageContext.request.contextPath} / Post " возвращает строку true , класс d-none будет удален.