使用Jquery和PHP的AJAX复选框

Question

我有两行复选框。当用户点击任何单独的复选框（在某一行中）时，我想在PHP中为我的总和添加一个数字。如果他取消选择单个复选框，我想在没有页面刷新的情况下实时减去总数。 我的问题是我的AJAX调用数据字段中的内容是什么？

，这是正确的方法吗？

HTML

<input type="checkbox" name="standard_form[]" value="A" onclick="processForm()">
<input type="checkbox" name="premium_form[]" value="B" onclick="processForm()">

JQUERY

<script type="text/javascript">
function processForm() { 
        $.ajax( {
            type: 'POST',
            url: 'submit_form.php',
            data: '',

            success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>

PHP

    if(IsChecked('standard_form','A'))
    {
      $price += IsChecked('standard_form','A') ? 10 : 0;
    }
   return $price ; 

---

Answer 1

尝试：

<script type="text/javascript">
 function processForm() { 
    $.ajax( {
        type: 'POST',
        url: 'submit_form.php',
        data: { checked_box : $('input:checkbox:checked').val()},

        success: function(data) {
            $('#message').html(data);
        }
    } );
}
</script>

Answer 2

您必须将表单序列化为JS对象，这是进入数据字段的内容。这是一个简单的序列化函数，可以改进，但会给你一个想法

function serializeForm(form) {
    var obj = {};
    for (var i = 0; i < form.elements.length; i++) {
        var el = form.elements[i];
        if (el.name) {
            if (obj[el.name] && obj[el.name].constructor == Array ) {
               obj[el.name].push(el.value);              
            } else if (obj[el.name]) {
               obj[el.name] = [obj[el.name], el.value];
            } else {
               obj[el.name] = el.value;
            }
        }
    }
    return obj; 
}

有一个插件可让您轻松地使用AJAX提交表单http://jquery.malsup.com/form/请参阅jQuery AJAX submit form

假设以下HTML

<form id="myForm" action="submit_form.php" method="post"> 
  <input type="checkbox" name="standard_form[]" value="A" onclick="processForm()">
  <input type="checkbox" name="premium_form[]" value="B" onclick="processForm()">
</form>

您可以执行以下操作以使用AJAX

发布表单

// attach handler to form's submit event 
$('#myForm').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

Answer 3

在复选框中尝试onclick="processForm(this)"，然后在JavaScript中

<script type="text/javascript">
function processForm(elm) { 
        $.ajax( {
            type: 'POST',
            url: 'submit_form.php',
            data: elm.name+'='+elm.value,

            success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>