После отправки введенный текст исчезнет и перезагрузите страницу (AJAX)

Question

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

<form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
<input type="text" name="name" id="name">
<span id="namenotif" style="color:red;"> <span>
<br>
<input type="text" name="price" id="price">
 <span id="pricenotif" style="color:red;"> <span>


<br>
<input type="submit" name="submit" id="save"><br>
</form>


<script>  
$(document).ready(function() {
$(document).on("click","#save",function(){
var name = $("#name").val();
var price = $("#price").val();
if(name==""){
  $("#namenotif").html("Enter a name");
  $("#name").show("fast");
     $("#save").show("fast");
}
else if(price==""){
   $("#pricenotif").html("Enter a price");
   $("#price").show("fast");
           $("#save").show("fast");
 }else{
  $.ajax({
    url:"addproduct.php",
    type:"POST",
    data:{name:name,price:price}, 
    success:function(data){
      alert("Successful");
       }
      });
     }
  });
});
</script>

Answer 1

Форма отправляется, я думаю, потому что это кнопка по умолчанию для отправки формы, независимо от того, использовали ли вы ajax или нет.так что вы можете предотвратить поведение по умолчанию, просто добавив код в jquery.Измените код следующим образом:

$(document).on("click","#save",function(e){
e.preventDefault();

...............

Остальные коды могут остаться прежними.так что предотвращайте только действие по умолчанию, оно должно работать.

Answer 2

добавить возврат false в конец функции, которая обрабатывает событие клика

Answer 3

Два решения:

1. Измените кнопку type='submit' на type='button'

или (и предпочтительно)

Измените прослушиватель событий на прослушивание события формы onSumbit, затем вызовите event.preventDefault или в jQuery, я думаю, что вы просто делаете return false в обратном вызове.

Answer 4

Это из-за type = "submit"

Использование

<input type="button" name="submit" id="save"><br>

Или

<a href="javascript:void(0) id="save">

или

JQuery's preventDefault();