检查使用：input时是否选中复选框/收音机

Question

I want to post the data of a HMTL form using ajax so that it posts the same data as if I had submitted it normally.

Before HTML5 I would do something like this: $("input[type='radio']:checked, input[type='checkbox']:checked, textarea, input[type='text']")

So I have been using $('form :input') so that it is more future proof for all the different type=email/search/etc.

The problem is that it will still send the value for checkbox/radio even though it hasn't been selected. What is the best way to get around this?

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);
        }
    });
});

Answer 1

have you tried out:

$('#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/

Answer 2

As Tiago Reis's answer you can serialize form. If you want to more flexible way, then you can go-through each form element like below. This is incomplete code segment so try to get the idea.

    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);
    }