본문 바로가기
개발자의 공부방/프로젝트

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

by 쌈빡한 쥬니준 2020. 3. 31.

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 의 정의된 테이블에 들어간다.

댓글0