radio버튼 클릭시 promise 내에서 체크값변경
본문
고수님들께 부탁드립니다...
라디오버튼클릭시 promise내에서 값을 변경시키려고 하는데 잘안되네요...
아래 코드에서 뭐가 잘못되어 안되는지 좀 알려주세요....
<div>
<input type="radio" name="mode" value="api" />
<input type="radio" name="mode" value="game" />
<input type="radio" name="mode" value="provider" />
</div>
...
...
$('input[name=mode]').on('click',function(e){
var mode = e.target.value;
e.preventDefault(); //
Swal.fire({
title: `모드를 변경하시겟습니까?`,
icon: "warning",
showCancelButton: true,
confirmButtonText: "예",
cancelButtonText: "아니요",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
cancelButton: "btn fw-bold btn-light-primary",
}
}).then(function (result) {
if (result.value) {
$.post('/switch/update_mode',{mode:mode},function(res){
if(res.status=="OK"){
toastr.success(res.message);
$(e.target).prop('checked',true)
}
else toastr.warning(res.message);
}).fail(function (res) {
toastr.error(`${res.statusText}`);
});
}
});
})
답변 3
// e.preventDefault(); // 주석처리해주세요
또 $(this).val(); 현재 라디오 버튼을 지칭해주는게 맞습니다.
그리고 쉼표로 구분되어 동시에 실행 되게 해 야 합니다.
즉 선택한 mode 할당한 값과 경고 상자 표시
$('input[name=mode]').on('click', function () {
var mode = $(this).val();
Swal.fire({
title: `모드를 변경하시겠습니까?`,
icon: "warning",
showCancelButton: true,
confirmButtonText: "예",
cancelButtonText: "아니요",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
cancelButton: "btn fw-bold btn-light-primary",
},
}).then(function (result) {
if (result.value) {
$.post('/switch/update_mode', { mode: mode }, function (res) {
if (res.status == "OK") {
toastr.success(res.message);
} else {
toastr.warning(res.message);
}
}).fail(function (res) {
toastr.error(`${res.statusText}`);
});
}
});
});
https://api.jquery.com/jquery.ajax/#jqXHR
<div>
<label><input type="radio" name="mode" value="api" /> api</label>
<label><input type="radio" name="mode" value="game" /> game</label>
<label><input type="radio" name="mode" value="provider" /> provider</label>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
var toastr = {
success: (msg) => console.warn(msg),
warning: (msg) => console.warn(msg),
error: (msg) => console.error(msg),
};
$('input[name=mode]').on('click',function(e){
var mode = e.target.value;
e.preventDefault(); //
Swal.fire({
title: `모드를 변경하시겟습니까?`,
icon: "warning",
showCancelButton: true,
confirmButtonText: "예",
cancelButtonText: "아니요",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
cancelButton: "btn fw-bold btn-light-primary",
}
}).then(function (result) {
// if (result.value) {
// $.post('/switch/update_mode',{mode:mode},function(res){
// if(res.status=="OK"){
// toastr.success(res.message);
// $(e.target).prop('checked',true)
// }
// else toastr.warning(res.message);
// }).fail(function (res) {
// toastr.error(`${res.statusText}`);
// });
// }
if (result.value == true) {
$.post('/switch/update_mode',{mode:mode})
.done(function (data, textStatus, jqXHR) {
if (textStatus == 'success') {
toastr.success(data);
$(e.target).prop('checked',true);
} else {
toastr.warning('textStatus: ' + textStatus);
toastr.warning(data);
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
// toastr.error(jqXHR.statusText);
toastr.error(errorThrown);
});
}
});
});
</script>
$('input[name=mode]').on('click', function (e) {
var mode = e.target.value;
Swal.fire({
title: `모드를 변경하시겠습니까?`,
icon: "warning",
showCancelButton: true,
confirmButtonText: "예",
cancelButtonText: "아니요",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
cancelButton: "btn fw-bold btn-light-primary",
}
}).then(function (result) {
if (result.value) {
$.post('/switch/update_mode', { mode: mode }, function (res) {
if (res.status == "OK") {
toastr.success(res.message);
} else {
toastr.warning(res.message);
}
}).fail(function (res) {
toastr.error(`${res.statusText}`);
});
}
});
});
