Div появляется после использования .hide() jquery

Question

Я проверил все похожие вопросы и попробовал разные решения, но не повезло.

У меня есть очень простой div, чтобы поймать имя и фамилию. Я хочу сделать это, если поля ввода не пустые, отправьте сообщение на другую страницу (с помощью jquery), удалите или скройте div1 и покажите div2, чтобы задать вопрос (div 2 скрыт).

По какой-то причине, когда я нажимаю кнопку отправки, имя и фамилия публикуются на другой странице и сохраняются в базе данных, но после предупреждения снова появляется div1, а div 2 исчезает. Может ли кто-нибудь дать мне руку здесь, пожалуйста?

спасибо!

Jquery код:

<script> 
     function saveDetailsToDB() 
     { 

      var name = document.getElementById('name').value; 
      var surname = document.getElementById('surname').value; 

      if (name === "" && surname === "") 
      { 
       alert("Please, enter your details!"); 
       $("#UQ").css("display", "none"); 

      } 

      else if(name !== "" && surname === "") 
      { 
       alert("Please, enter your Surname"); 
       $("#UQ").css("display", "none"); 

      } 

      else if(name === "" && surname !== "") 
      { 
       alert("Please, enter your Name"); 
       $("#UQ").css("display", "none"); 
      } 
      else 
      { 

       $.post("saveDetails.php",{ name: name,surname: surname }); 
       $("#detailsDiv").hide(); 
       $("#UQ").show(); 
       alert('You have been successfully registered!'); 

      } 
     } 
    </script> 

HTML:

<div id = "detailsDiv"> 
     <form> 
      <b><label>Name:</label></b><br> 
      <input type = "text" id = "name"><br><br> 

      <b><label>Surname:</label></b><br> 
      <input type = "text" id = "surname"><br><br> 
      <button onclick="saveDetailsToDB();">Send</button> 
     </form> 

    </div> 

    <div id = "UQ"> 
    <b><label>Please enter your question.</label></b><br><br> 
    <form> 
     <textarea id = "question" rows="4" cols="40"></textarea><br><br> 
     <button onclick="saveQuestionToDB()">Save</button> 
    </form> 
</div> 

Answer 1

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

<button onclick="saveDetailsToDB(); return false;">Send</button> 

Или еще лучше, удалить устаревшие onclick атрибут из вашего HTML и прикрепить события с помощью JavaScript:

<button class="btn-save">Send</button> 

$(function() { 
    $('.btn-save').click(function(e) { 
     e.preventDefault(); 

     var name = $('#name').val(); 
     var surname = $('#surname').val(); 

     if (name === "" && surname === "") { 
      alert("Please, enter your details!"); 
      $("#UQ").hide(); 
     } 
     else if(name !== "" && surname === "") { 
      alert("Please, enter your Surname"); 
      $("#UQ").hide(); 
     } 
     else if(name === "" && surname !== "") { 
      alert("Please, enter your Name"); 
      $("#UQ").hide(); 
     } 
     else { 
      $.post("saveDetails.php", { 
       name: name, 
       surname: surname 
      }); 
      $("#detailsDiv").hide(); 
      $("#UQ").show(); 
      alert('You have been successfully registered!'); 
     } 
    }); 
});