使用:输入时,检查是否选中了复选框/收音机

时间:2014-07-11 09:41:52

标签: jquery

我想使用ajax发布HMTL表单的数据,以便发布与我正常提交的数据相同的数据。

在HTML5之前我会做这样的事情: $("input[type='radio']:checked, input[type='checkbox']:checked, textarea, input[type='text']")

所以我一直在使用$('form :input'),因此对于所有不同的类型=电子邮件/搜索/等等,它更具有未来性。

问题是它仍然会发送checkbox / radio的值,即使它尚未被选中。解决这个问题的最佳方法是什么?

CODE:

$('#button').on('click', function(){
    $.ajax({
        url: 'myurl.com',
        type: 'post',
        data: $('form :input'),
        dataType: 'json',
        success: function() {
            alert('success');
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

2 个答案:

答案 0 :(得分:2)

你试过了吗?

$('#button').on('click', function(){
$.ajax({
    url: 'myurl.com',
    type: 'post',
    data: $('form').serialize(),
    dataType: 'json',
    success: function() {
        alert('success');
    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

});

http://api.jquery.com/serialize/

答案 1 :(得分:0)

作为Tiago Reis的回答,您可以序列化表格。如果您想要更灵活的方式,那么您可以浏览每个表单元素,如下所示。这是不完整的代码段,所以试着理解。

    function getFormData()
    {
        var retObjectc = {};
        $("#myform").find( 'input[type=text],input[type=time], input[type=hidden],input[type=checkbox],input[type=radio], textarea, select' )
        .each( function (key,value)
        {
            if( $(value).prop("tagName") == "INPUT" )
            {
                if( $(value).prop("type") == "checkbox" )
                {
                    retObjectc[$(value).prop("name")] = $(value).is(":checked");
                }
                else
                {
                    retObjectc[$(value).prop("name")] = $(value).val();
                }
            }
            else if( $(value).prop("tagName") == "SELECT" )
            {
                retObjectc[$(value).prop("name")] = $(value).val();
            }
        });

        return JSON.stringify(retObjectc);
    }