프로젝트] 제이쿼리 input checkbox value 값 변경 및 ajax 데이터 보내기

JSP 로직 구현 설명

아이디를 불러오면 아이디에 저장되어 있는 결제수단 값들이 불러와지고 또 자유롭게 수정(체크박스 체크 및 해제)해서 저장하는 것을 하려고 한다.

 

불러오는 건 아래와 같이 했다.

function selectSearchCompany() {
    var params = $('#selectType').val();

    $.ajax({
        url: '/admin/company/companyBasicInfo',
        type: 'POST',
        data: {
            idkey: params
        },
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: 'json',
        beforeSend: function(xhr) {
            xhr.setRequestHeader(header, token);
        },
        success: function (result) {
            $('#frmRepresentative').val(result[0].name);
            $('#frmCompany').val(result[0].companyName);
            $('#frmEmail').val(result[0].email);
            $('#frmHomePage').val(result[0].homepageUrl);
            $('#frmTel').val(result[0].tel);
            $('#frmPgCompanyId').val(result[0].midPc);
            $('#frmPgCompanyIdMng').val(result[0].gmallKeyinId);
            $('#frmSMSCode').val(result[0].smsUsercode);
            $('#frmCompanyCode').val(result[0].smsDeptcode);
            $('#frmCommunicationNumber').val(result[0].mailOrderNo);
            $('#frmPaymthdCard').val(result[0].paymthdCard);
            $('#frmPaymthdBank').val(result[0].paymthdBank);
            $('#frmPaymthdVbank').val(result[0].paymthdVbank);

            if($('#frmPaymthdCard').val() === 'Y') {
                $('#frmPaymthdCard').prop("checked", true);
            }
            if($('#frmPaymthdBank').val() === 'Y'){
                $('#frmPaymthdBank').prop("checked", true);
            }
            if($('#frmPaymthdVbank').val() === 'Y'){
                $('#frmPaymthdVbank').prop("checked", true);
            }

        }
    });
}

 

HTML 은 아래와 같다.

<tr>
    <th>결제수단<sup>*</sup></th>
    <td>
        <label><input type="checkbox" id="frmPaymthdCard" name="paymthd_card" class="check" /><span>신용카드</span></label>
        <label><input type="checkbox" id="frmPaymthdBank" name="paymthd_bank" class="check" /><span>실시간계좌이체</span></label>
        <label><input type="checkbox" id="frmPaymthdVbank" name="paymthd_vbank" class="check" /><span>무통장입금(가상계좌)</span></label>
    </td>
</tr>

 

저장 버튼을 누르면 아래의 이벤트를 발생함과 동시에 값을 저장한다.

$('#btnSave').click(function() {
    if(confirm("저장하시겠습니까?") && validation()) {
        var params = {};
        params.name = $('#frmRepresentative').val();
        params.companyName = $('#frmCompany').val();
        params.email = $('#frmEmail').val();
        params.homepageUrl = $('#frmHomePage').val();
        params.tel = $('#frmTel').val();
        params.midPc = $('#frmPgCompanyId').val();
        params.gmallKeyinId = $('#frmPgCompanyIdMng').val();
        params.smsUsercode = $('#frmSMSCode').val();
        params.smsDeptcode = $('#frmCompanyCode').val();
        params.mailOrderNo = $('#frmCommunicationNumber').val();
        params.paymthdCard = $('#frmPaymthdCard').is(":checked") ? 'Y' : 'N';
        params.paymthdBank = $('#frmPaymthdBank').is(":checked") ? 'Y' : 'N';
        params.paymthdVbank = $('#frmPaymthdVbank').is(":checked") ? 'Y' : 'N';
        params.idkey = $('#selectType').val();

        $.ajax({
            url: '/admin/company/companyBasicInfoModify',
            type: 'POST',
            dataType: 'json',
            data: params,
            beforeSend: function(xhr) {
                xhr.setRequestHeader(header, token);
            },
            success: function(data) {
                alert("저장되었습니다.");
                selectSearchCompany();
            }
        });
    }
});

 

params.paymthdCard = $('#frmPaymthdCard').is(":checked") ? 'Y' : 'N';
params.paymthdBank = $('#frmPaymthdBank').is(":checked") ? 'Y' : 'N';
params.paymthdVbank = $('#frmPaymthdVbank').is(":checked") ? 'Y' : 'N';

input box의 check 타입은 val 로 값을 가져올 수 없고 is()를 사용해야 한다.

is로 checked 가 true false 인지 확인을 하고 삼항연산자를 이용해 true 면 Y false 면 N 으로 하게 했다.

 

Y/N 의 값은 MySQL 의 정의된 테이블에 들어간다.