通过选择字段的更改通过AJAX方法提交表单 [英] submit form via AJAX method on change of select field

问题描述

我想发送表单而不离开当前页面，所以我进一步使用了这种ajaxi方法，我在Select值的onchange方法中使用了Submit，但这是行不通的:

I want to send a form without leaving my current page , so I'm using this ajaxi method furthermore i am using my submit in onchange method of Select value.but it's not work :

<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>

推荐答案

您不应为此附加内联处理程序.当您通过ajax获取回复时，无需提交表格.

You should not attach inline handler for this. As you are getting the response via ajax, there is no need to submit the form.

尝试一下:

$(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>

这篇关于通过选择字段的更改通过AJAX方法提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！