отправить форму через метод AJAX при изменении поля выбора

Question

Я хочу отправить форму, не покидая мою текущую страницу, поэтому я использую этот метод ajaxi, кроме того, я использую мою отправку в onchange методом Select value.but, это не работает :

<form action="" method="post" id="rati"> 
<select onchange="this.form.submit()" name="rate" style="width:130px;"> 
    <option value="1">☆</option> 
    <option value="2">☆☆</option> 
    <option value="3">☆☆☆</option> 
    <option value="4">☆☆☆☆</option> 
    <option value="5">☆☆☆☆☆</option> 
</select> 
</form> 


<script> 
    $(document).ready(function(e) { 
     $("#rati").submit(function(e) { 
      var url = "/saverate.bc?userid=18&id=122"; 
      $.ajax({ 
       type: "POST", 
       url: url, 
       data: $("#rati").serialize(), 
       success: function(data) { 
        $(".tnxforate").html(data) 
       } 
      }); 
      e.preventDefault(); 
     }); 
    }); 
</script> 

Answer 1

Вы не должны прикреплять встроенный обработчик для этого. Когда вы получаете ответ через ajax, нет необходимости отправлять форму.

Попробуйте это:

$(document).ready(function(e) { 
 
    $("[name='rate']").on('change', function() { 
 
    var url = "/saverate.bc?userid=18&id=122"; 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: url, 
 
     data: $("#rati").serialize(), 
 
     success: function(data) { 
 
     $(".tnxforate").html(data) 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form action="" method="post" id="rati"> 
 
    <select name="rate" style="width:130px;"> 
 
    <option value="1">☆</option> 
 
    <option value="2">☆☆</option> 
 
    <option value="3">☆☆☆</option> 
 
    <option value="4">☆☆☆☆</option> 
 
    <option value="5">☆☆☆☆☆</option> 
 
    </select> 
 
</form>