Избегайте обновления страницы, представляющей форму

Question

При использовании этой формы, которую я сделал (на португальском языке), обновление удаляет все ранее введенные данные со страницы. Почему это происходит, и как я могу это исправить? Спасибо за ваше время.

<script type="text/javascript"> 
     function submitForm(){ 
      // Initiate Variables With Form Content 
      var nome = $("#nome").val(); 
      var email = $("#email").val(); 
      var telefone = $("#telefone").val(); 
      var assunto = $("#assunto").val(); 
      var mensagem = $("#mensagem").val(); 

      $.ajax({ 
       type: "POST", 
       url: "send-contact2.php", 
       data: "nome=" + nome + "&email=" + email + "&telefone=" + telefone + "&assunto=" + assunto + "&mensagem=" + mensagem, 
       cache:false, 
       success: function (data) { 
        alert(data); 
       } 
      }); 
     } 
</script> 

<form id="myForm"> 
    <div class="col col-md-6"> 
     <input type="text" name="nome" id="nome" required value="" tabindex="1" placeholder="Nome"> 
     <input type="text" name="email" id="email" required value="" tabindex="2" placeholder="E-mail"> 
     <input type="text" name="telefone" id="telefone" required value="" tabindex="2" placeholder="Telefone"> 
     <select id="assunto" name="assunto" required> 
      <option value="outros">Outros assuntos</option> 
      <option value="encomendas">Encomendas</option> 
     </select> 
    </div> 
    <div class="col col-md-6"> 
     <textarea name="mensagem" id="mensagem" cols="29" rows="8" placeholder="Mensagem"></textarea> 
    </div> 
    <div class="col col-md-12 "> 
     <button name ="submit" type="submit" onclick="return submitForm();">Enviar</button> 
    </div> 
</form> 

Answer 1

Ваша функция также должна return false, чтобы остановить поведение события клика от отправки формы:

function submitForm(){ 
    // your code... 
    return false; 
} 

еще лучше крюк в submit случае form непосредственно и покончить с неуклюжим onclick обработчиков и использовать serialize(), чтобы собрать данные формы для вас:

<button name="submit" type="submit">Enviar</button> 

<script type="text/javascript"> 
    $(function() { 
     $('#myForm').submit(function(e) { 
      e.preventDefault(); // stop form submission 
      $.ajax({ 
       type: "POST", 
       url: "send-contact2.php", 
       data: $(this).serialize(), 
       cache: false, 
       success: function (data) { 
        alert(data); 
       } 
      }); 
     } 
    }); 
</script> 

Answer 2

Попробуйте изменить onClick действие на onSubmit и добавьте return false после метода. Как это:

<button name ="submit" type="submit" onsubmit="submitForm(); return false;">Enviar</button>

Хорошая практика будет добавить method="POST" ваши атрибуты формы.