Custom radio button jqgrid edit form

Question

I have a jqgrid which is filled with json data, the column "gender" takes the values either 0 or 1, so when editing a record, in the editing form of jqgrid I added two radio button objects to edit the value, the problem is that when you press the submit button, the value is always 0. How do I get the value of the selected radio button? For example: when you select the radio button "Male" must send value of 0 and when you select the radio button "Female" must send value of 1

My jqgrid code:

function GenderRadio(value, options) {
    var male = '<input type="radio" name="RadioGender" value="0"';
    var breakline = '/>Male';
    var female = '&nbsp;<input type="radio" name="RadioGender" value="1"';
    var end = '/>Female<br>';
    var radiohtml;
    if (value == 0) {
        radiohtml = male + ' checked="checked"' + breakline + female + end;
        return radiohtml;
    } else if (value == 1) {
        radiohtml = male + breakline + female + ' checked="checked"' + end;
        return radiohtml;
    } else {
        return male + breakline + female + end;
    }
}

function GenderValue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    } else if (operation === 'set') {
        $('GenderValue', elem).val(value);
    }
}

function filljqGridCustomers() {
$.mask.definitions['9'] = '[0-9]';
$("#list").jqGrid({
    url: 'PopulateCustomersTable',
    postData: {
        parameter: function () {
            return $("#parameter").val();
        },
        username: function () {
            return $("#txtusrID").val();
        },
        option: function () {
            return $("input[name='srch']:checked").val(); //$('[name="srch"]').val();
        }
    },
    datatype: "json",
    mtype: 'POST',
    colNames: ['Id', 'First Name', 'Last Name', 'Gender'],
    colModel: [{
            name: 'IdMstCustomers',
            index: 'IdMstCustomers',
            width: 50,
            fixed: true,
            align: 'center',
            editable: true,
            editoptions: {
                hidden: true
            }
        }, {
            name: 'FirstName',
            index: 'FirstName',
            width: 100,
            fixed: true,
            align: 'center',
            editable: true
        }, {
            name: 'LastName',
            index: 'LastName',
            width: 100,
            fixed: true,
            align: 'center',
            editable: true
        }, {
            name: 'Gender',
            index: 'Gender',
            width: 100,
            fixed: true,
            align: 'center',
            editable: true,
            formatter: function (cellvalue) {
                if (cellvalue == 0) {
                    return 0;
                } else if (cellvalue == 1) {
                    return 1;
                } else {
                    return '';
                }
            },
            edittype: 'custom',
            editoptions: {
                custom_element: GenderRadio,
                custom_value: GenderValue
            }
        }],
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'FirstName',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Customers',
    jsonReader: {
        repeatitems: false
    },
    editurl: "CustomersServlet",
    hidegrid: false
});

jQuery("#list").jqGrid('navGrid', '#pager', {
        edit: true,
        add: false,
        del: false,
        search: true
    }, {beforeShowForm: function (form) {
            var dlgDiv = $("#editmod" + $('#list')[0].id);
            dlgDiv[0].style.top = 430 + "px";
            dlgDiv[0].style.left = 700 + "px";
        },
        editCaption: 'Edit customer info',
        autosize: true,
        recreateForm: true,
        closeAfterEdit: true,
        resize: false
    });
}

The edit form looks like this

Answer 1

Your code have at least two errors.

The first problem is in the GenderRadio function (used as the value of custom_element). It should return one HTML element, but GenderRadio return HTML fragment which consist of two <input> elements and additional text nodes. You can fix the problem by wrapping the returned value inside of <span>... </span>.

The second problem: the code of GenderValue (used as the value of custom_value) need be fixed. You use strange syntax to set the value: $('GenderValue', elem). What is "GenderValue"? And it's sure is not the name of some element. I suppose that you means the value of name attribute (RadioGender), used by radio buttons. In the case you should use $("input[name=RadioGender]", elem) or better $(elem).find("input[name=RadioGender]"). Additionally you should use .is(":checked") of the first (Male) or on the second (Female) radio button to test whether it's checked or not. The corresponding fixed code could be the following:

function GenderRadio(value, options) {
    var male = '<span><input type="radio" name="RadioGender" value="0"';
    var breakline = '/>Male';
    var female = '&nbsp;<input type="radio" name="RadioGender" value="1"';
    var end = '/>Female</span>';
    var radiohtml;
    if (value == 0) {
        radiohtml = male + ' checked="checked"' + breakline + female + end;
        return radiohtml;
    } else if (value == 1) {
        radiohtml = male + breakline + female + ' checked="checked"' + end;
        return radiohtml;
    } else {
        return male + breakline + female + end;
    }
}

function GenderValue(elem, operation, value) {
    var $elems = $(elem).find("input[name=RadioGender]");
    if (operation === "get") {
        return $elems.first().is(":checked") ? 0 : 1;
    } else if (operation === "set") {
        $elems.val(value);
    }
}