在复选框的 onchange 事件上提交表单答案

【问题标题】：submit a form on onchange event of checkboxes在复选框的 onchange 事件上提交表单
【发布时间】：2016-04-09 17:42:59
【问题描述】：

我正在尝试提交有关任何复选框的更改事件的表单。在这里，我有许多被标签标记包围的复选框，但是每当发生更改事件时，serialize() 方法都会为表单参数返回一个空值，而不是输入的值。标签标签是否会影响 Ajax 的工作？我是 Ajax 的新手，所以可能只有一个小错误。任何帮助将不胜感激。

JavaScript

<script src ="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    var form = $('#ajaxform');

    $("#ajaxform input:checkbox").on('change',function () {
        //alert(this.name+' '+this.value+' '+this.checked);
        $.ajax({
             type: form.attr('method'),
             url: form.attr('action'),
             data: $(this).parent("form").serialize(),
             success: function (data) {
                 var result=data;
                 $('#content').html(result);
             }
         });

         return false;
     }); 
</script>

HTML

  <!DOCTYPE html>
  <html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Ajax form Example</title>
  </head>

  <body>
    <div id='content'>
    </div>
    <form id='ajaxform' name='ajaxform' action='./ajaxformexample' method='post'>

      First Name:
      <input type='text' id='firstname' name='firstname' size='30' required/>
      <br/>Last Name:
      <input type='text' id='lastname' name='lastname' size='30' required/>
      <br/>Email:
      <input type='email' id='emailid' name='emailid' size='30' required/>
      <br/>Password:
      <input type='password' id='pwd' name='pwd' size='30' required/>
      <br/>checkbox:
      <input type='checkbox' id='cb' name='cb' value='1' />
      <br/>checkbox2:
      <input type='checkbox' id='cb1' name='cb1' />
      <br/>
      <label class="checkbox">
        <input type="checkbox" value="50-200" name="price">50-200</label>
      <label class="checkbox">
        <input type="checkbox" value="200-500" name="price">200-500</label>
      <label class="checkbox">
        <input type="checkbox" value="500-1000" name="price">500-1000</label>
      <label class="checkbox">
        <input type="checkbox" value="1000-1500" name="price">1000-1500</label>
      <label class="checkbox">
        <input type="checkbox" value="1500-3000" name="price">1500-3000</label>
      <label class="checkbox">
        <input type="checkbox" value="3000-5000" name="price">3000-5000</label>
      <label class="checkbox">
        <input type="checkbox" value="5000-10000" name="price">5000-10000</label>
      <label class="checkbox">
        <input type="checkbox" value="10000-50000" name="price">10000-50000</label>

    </form>

  </body>

  </html>

在上面的代码中，当我删除标签元素时，它工作正常并且我得到了所有预期的参数值，但是当我使用标签时它返回 null 而不是参数值。

【问题讨论】：

在更改标签的类名后尝试，class="checkbox_abc" 或其他任何内容...
仍然无法正常工作@ManjeetBarnala
我尝试删除类属性，但无法正常工作。所以我想这与标签有关。
试试$("#ajaxform").on('change','input[type="checkbox"]', function () {
这工作正常！我正在获取所有参数的输入值，但这会将我重定向到 servlet，并且我正在 servlet 上获取输出，我希望在 index.jsp 上输出。

标签： jquery ajax

【解决方案1】：

onchnge 应该是 onchange（根本不需要）

$("#ajaxform input: checkbox ") 应该是$("#ajaxform input:checkbox")

< script src = "http://code.jquery.com/jquery-1.10.2.min.js" > < /script>

是糟糕的标记：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

好多了。

另外你最好只使用你的事件监听器而不是那些内联 JS 所以删除每个onchnge="document.ajaxform.submit();"

name="price">>50-200</label> 也应该是name="price">50-200</label>

另外，既然您使用 AJAX 向 PHP 发送数据？你可以使用像

这样的扩展

./ajaxformexample.php

或任何文件，但最重要的是您需要阻止默认的 FORM 提交！

这是一个例子：

$("#ajaxform").on("submit", function(evt) {
  evt.preventDefault();
  var serializedData = $(this).serialize();

  alert( serializedData );

  $.ajax({
    type: this.method,
    url:  this.action,
    data: serializedData,
    success: function (data) {
      $('#content').html(data);
    }
  });

}).on("change", ":checkbox", function(){
  $(this).closest("form").submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='ajaxform' action='./ajaxformexample.php' method='post'>

  First Name:
  <input type='text' id='firstname' name='firstname' size='30' required/>
  <br/>Last Name:
  <input type='text' id='lastname' name='lastname' size='30' required/>
  <br/>Email:
  <input type='email' id='emailid' name='emailid' size='30' required/>
  <br/>Password:
  <input type='password' id='pwd' name='pwd' size='30' required/>
  <br/>checkbox:
  <input type='checkbox' id='cb' name='cb' value='1' />
  <br/>checkbox2:
  <input type='checkbox' id='cb1' name='cb1' />
  <br/>
  <label class="checkbox">
    <input type="checkbox" value="50-200" name="price">50-200</label>
  <label class="checkbox">
    <input type="checkbox" value="200-500" name="price">200-500</label>
  <label class="checkbox">
    <input type="checkbox" value="500-1000" name="price">500-1000</label>
  <label class="checkbox">
    <input type="checkbox" value="1000-1500" name="price">1000-1500</label>
  <label class="checkbox">
    <input type="checkbox" value="1500-3000" name="price">1500-3000</label>
  <label class="checkbox">
    <input type="checkbox" value="3000-5000" name="price">3000-5000</label>
  <label class="checkbox">
    <input type="checkbox" value="5000-10000" name="price">5000-10000</label>
  <label class="checkbox">
    <input type="checkbox" value="10000-50000" name="price">10000-50000</label>

</form>

【讨论】：

在此之前，我尝试过 onchange 事件，但该功能不起作用。之后我用谷歌搜索并找到了这段代码。当我删除标签元素时，这工作正常。
@baby_401 使用标签的方式并没有错，只是name="price">>50-200</label>的问题应该是name="price">50-200</label>
@baby_401 停止使用 Word 或记事本进行代码编辑。找到一个更好的带有代码高亮功能的文本编辑器，它会在此类格式问题上发出警报。
我做了你建议的所有更改，但是每当我检查标签元素包围的复选框时，它仍然为参数发送空值。适用于没有标签属性的前两个复选框
@baby_401 添加了一个示例。如果您遵循每条建议，一切都会正常工作。

【解决方案2】：

您可能需要在您的 ajax 中添加：dataType: "json",，就像在这个小提琴中一样：

https://jsfiddle.net/MarkSchultheiss/a28raLk1/5/

注意，我还将var form = $('#ajaxform'); 放在函数内部以避免全局。我主要是一名 .Net 开发人员，对 java 方面没有太多了解。

下面是代码：

$("#ajaxform").on('change', 'input[type="checkbox"]', function() {
  var form = $('#ajaxform');
  var mydata = $("#ajaxform").serialize();
  $('#serialcontent').html($("#ajaxform").serialize());
  console.dir($("#ajaxform").serialize());
  $.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    dataType: "json",
    data: mydata,
    success: function(data) {
      var result = data;
      $('#content').html(result);
    }
  });

  return false;
});

【讨论】：