Question

我正在尝试在任何复选框的on-change事件上提交表单。在这里，我有很多带有标签标签的复选框，但每当发生更改事件时，serialize（）方法都会返回表单参数的空值而不是输入的值。 label标签是否影响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>

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

Answer 1

onchnge应为onchange（根本不需要BTW）

$("#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提交！

以下是一个例子：

＆＃13;

$("#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();
});

＆＃13;

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

＆＃13;

Answer 2

你可能需要在这个小提琴中添加：dataType: "json",到你的ajax：

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

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

以下是代码：

$("#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;
});

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

2 个答案: