通过增加复选框ID的AJAX提交表单

时间:2011-03-08 22:34:43

标签: javascript jquery ajax forms form-submit

我有一个AJAX表单提交工作正常,但我已经将ID递增到我需要根据选中的复选框提交的复选框,然后当用户提交选中的选项时,数据会传递给我的PHP脚本。

如何通过AJAX将所有选中的复选框传递给我的PHP脚本?

$(function () {
    $(".submit").click(function () {
        var pageReturn = $("#pageReturn").val();
        var sendCheck = $("#sendCheck").val();
        var dataString = 'pageReturn=' + pageReturn + '&sendCheck=' + sendCheck;

        if (emailLink == '' || pageReturn == '' || sendCheck == '') {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        } else {
            $.ajax({
                type: "POST",
                url: "phpscripts/compose.php?artid=<?php echo $artid; ?>&userart=<?php echo $_GET['userart'];?>",
                data: dataString,
                cache: false,
                success: function () {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
});

要通过所有复选框,我会向我的复选框添加+1,如:

var sendCheck = $("#sendCheck").val()+1;

我的复选框的HTML代码如下所示

<input name="sendCheck" id="sendCheck<?php echo $i++; ?>" class="reccomendCheck" type="checkbox" value="<?php echo $row_ArtContact['contact_id'];?>" /> 

带有递增值的复选框,需要传递给我的PHP脚本。

理论上,可以有无限数量的复选框,用户可以随机检查并需要进行登记。

1 个答案:

答案 0 :(得分:2)

使用serialize功能生成数据。

看看这个例子:点击几个复选框,看看会发生什么!

http://jsfiddle.net/VeBDk/

示例:

HTML:

<form>
    Check 1<input type="checkbox" name="check1" id="check1" value="1"/>
    Check 2<input type="checkbox" name="check2" id="check2" value="2"/>
    Check 3<input type="checkbox" name="check3" id="check3" value="3"/>
    Check 4<input type="checkbox" name="check4" id="check4" value="4"/>
    Check 5<input type="checkbox" name="check5" id="check5" value="5"/>
    <button>Submit</button>
</form>

jQuery的:

$(document).ready(function(){
   var data = $('form').serialize();
   $.post('script.php', data, function(){
     //success!
   });
});