2

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

这是正确的方法吗？

HTML

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

查询

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

3 回答 3

2

尝试：

<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>
于 2012-11-13T17:17:30.187 回答
1

您必须将表单序列化为 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 提交表单

假设以下 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>

You can just do the following to have the form posted with 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; 
});
于 2012-11-13T17:24:35.603 回答
0

在复选框中尝试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>
于 2012-11-13T17:15:09.180 回答