ajax.action.php 파일에 추가한 입력 폼 필수 항목 체크하는 방법
본문
해당 링크를 참고하여, 상세페이지 내에 추가입력 폼을 삽입하였습니다.
+ 메인 리스트 장바구니 버튼 클릭 시 나오는 옵션 선택 사항에도 해당 폼을 추가해주었는데요
선택옵션만 선택하고 추가입력폼이 공란일 경우 선택해 달라는 경고창을 띄우고 싶은데
어디에 alert을 삽입해야할지 엮여 있는 소스가 너무 많아서 적용을 못하고 있습니다.
shop.list.action.js 에 선택옵션 경고창이 뜨는 부분을 찾아 아래에 넣어줘도 반응 없이 장바구니에 담기는 현상이 발생하고 있습니다.
//ajax.action.php
<div class="sct_cartop_wr">
<form name="fcart" method="post" action="<?php echo $action_url; ?>">
<input type="hidden" name="action" value="cart_update">
<input type="hidden" name="it_id[]" value="<?php echo $it['it_id']; ?>">
<input type="hidden" name="it_name[]" value="<?php echo stripslashes($it['it_name']); ?>">
<input type="hidden" name="it_price[]" value="<?php echo get_price($it); ?>">
<input type="hidden" name="it_stock[]" value="<?php echo get_it_stock_qty($it['it_id']); ?>">
<input type="hidden" name="io_type[<?php echo $it['it_id']; ?>][]" value="0">
<input type="hidden" name="io_id[<?php echo $it['it_id']; ?>][]" value="">
<input type="hidden" name="io_value[<?php echo $it['it_id']; ?>][]" value="">
<input type="hidden" name="io_price[<?php echo $it['it_id']; ?>][]" value="">
<input type="hidden" name="ct_qty[<?php echo $it['it_id']; ?>][]" value="<?php echo $item_ct_qty; ?>">
<input type="hidden" name="sw_direct" value="0">
<?php
if($option_item) {
$is_option = 1;
?>
<!-- 별도 작업 요청사항 시작 { -->
<div id="sit_spinput">
<div class="get_item_options">
<label>상담희망일자</label>
<span><input name="work_msg" type="text" id="work_msg" readonly required placeholder="희망일자를 선택해주세요."></input></span>
</div>
</div>
<!-- } 별도 작업 요청사항 끝 -->
<?php // 선택옵션
echo $option_item;
?>
<?php
if($supply_item) {
?>
<?php // 추가옵션
echo $supply_item;
?>
<!-- } 추가옵션 끝 -->
<?php
}
?>
<button type="button" class="cartopt_cart_btn">장바구니 담기</button>
<button type="button" class="cartopt_close_btn">닫기</button>
<?php } ?>
</form>
</div>
//shop.list.action.js
<scrpt>
var mainCart = mainCart || {};
mainCart.chr = function(code){
return String.fromCharCode(code);
}
jQuery(function ($) {
var select_option_el = "select.it_option",
overclass = "overlay",
cartclass = "sct_cartop",
cart_btn_class = "sct_btn";
mainCart.add_wishitem = function(el) {
var $el = $(el),
it_id = $el.data("it_id");
if(!it_id) {
alert("상품코드가 올바르지 않습니다.");
return false;
}
$.post(
g5_shop_url + "/ajax.action.php",
{ it_id: it_id, action : "wish_update" },
function(error) {
if(error != "OK") {
alert(error.replace(/\\n/g, "\n"));
return false;
}
mainCart.update_wish_side();
alert("상품을 위시리스트에 담았습니다.");
return;
}
);
}
mainCart.add_cart = function(frm) {
var $frm = $(frm);
var $sel = $frm.find(select_option_el);
var it_name = $frm.find("input[name^=it_name]").val();
var it_price = parseInt($frm.find("input[name^=it_price]").val());
var id = "";
var value, info, sel_opt, item, price, stock, run_error = false;
var option = sep = "";
var count = $sel.length;
if(count > 0) {
$sel.each(function(index) {
value = $(this).val();
item = $(this).prev("label").text();
if(!value) {
run_error = true;
return false;
}
// 옵션선택정보
sel_opt = value.split(",")[0];
if(id == "") {
id = sel_opt;
} else {
id += mainCart.chr(30)+sel_opt;
sep = " / ";
}
option += sep + item + ":" + sel_opt;
});
if(run_error) {
alert(it_name+"의 "+item+"을(를) 선택해 주십시오.");
return false;
}
price = value[1];
stock = value[2];
} else {
price = 0;
stock = $frm.find("input[name^=it_stock]").val();
option = it_name;
}
// 금액 음수 체크
if(it_price + parseInt(price) < 0) {
alert("구매금액이 음수인 상품은 구매할 수 없습니다.");
mainCart.add_cart_after();
return false;
}
// 옵션 선택정보 적용
$frm.find("input[name^=io_id]").val(id);
$frm.find("input[name^=io_value]").val(option);
$frm.find("input[name^=io_price]").val(price);
$.ajax({
url: $(frm).attr("action"),
type: "POST",
data: $(frm).serialize(),
dataType: "json",
async: true,
cache: false,
success: function(data, textStatus) {
mainCart.add_cart_after(frm);
if(data.error != "") {
alert(data.error);
return false;
}
mainCart.update_cart_side();
alert("상품을 장바구니에 담았습니다.");
},
error : function(request, status, error){
mainCart.add_cart_after(frm);
alert('false ajax :'+request.responseText);
}
});
return false;
}
// 5.4 버전의 기본테마의 사이드바의 장바구니를 새로고침합니다.
mainCart.update_cart_side = function(){
var ajax_url = g5_shop_url || g5_shop_url;
$.ajax({
url: ajax_url + "/ajax.action.php",
type: "GET",
data: {"action":"refresh_cart"},
dataType: "html",
async: true,
cache: false,
success: function(data, textStatus) {
var inner_html = $(data).filter(".sbsk").html(),
cart_count = $(data).find(".cart-count").text();
$(".qk_con_wr .sbsk").html(inner_html);
$(".hd_login .shop_cart .count").text(cart_count);
},
error : function(request, status, error){
alert("false ajax :"+request.responseText);
}
});
return true;
}
mainCart.update_wish_side = function(){
var ajax_url = g5_shop_url || g5_shop_url;
if (typeof g5_is_member == "undefined" || ! g5_is_member) {
return false;
}
$.ajax({
url: ajax_url + "/ajax.action.php",
type: "GET",
data: {"action":"refresh_wish"},
dataType: "html",
async: true,
cache: false,
success: function(data, textStatus) {
var inner_html = $(data).filter(".side-wish").html();
$(".qk_con_wr .side-wish").html(inner_html);
},
error : function(request, status, error){
alert("false ajax :"+request.responseText);
}
});
return true;
}
mainCart.add_cart_after = function(frm){
var $over_rayers = $("."+overclass),
$cart_rayers = $("."+cartclass);
$over_rayers.each(function(i) {
$(this).removeClass(overclass);
});
$cart_rayers.each(function(i) {
if( !(frm && $(this).find("select").length) ){
$(this).html("").removeClass(cartclass);
}
});
}
$(document).on("click", ".btn_cart", function(e) {
e.preventDefault();
var $this = $(this),
it_id = $this.data("it_id"),
$sct_li = $this.closest("li.sct_li"),
$opt = $sct_li.find(".cart-layer"),
$btn = $sct_li.find("."+cart_btn_class);
$(".cart-layer").not($opt).removeClass(cartclass).html('');
$("li.sct_li").not($sct_li).removeClass(overclass);
$.ajax({
url: g5_shop_url+"/ajax.action.php",
type: "POST",
data: {
"it_id" : it_id,
"action" : "get_item_option"
},
dataType: "json",
async: true,
cache: false,
success: function(data, textStatus) {
if(data.error != "") {
alert(data.error);
return false;
}
$sct_li.addClass(overclass);
$opt.addClass(cartclass).html(data.html);
if(!data.option) {
mainCart.add_cart($opt.find("form").get(0));
return;
}
//$btn.css("display","none");
//$opt.css("display","block");
},
error : function(request, status, error){
alert('false ajax :'+request.responseText);
}
});
});
$(document).on("change", "select.it_option", function() {
var $frm = $(this).closest("form");
var $sel = $frm.find("select.it_option");
var sel_count = $sel.length;
var idx = $sel.index($(this));
var val = $(this).val();
var it_id = $frm.find("input[name='it_id[]']").val();
// 선택값이 없을 경우 하위 옵션은 disabled
if(val == "") {
$frm.find("select.it_option:gt("+idx+")").val("").attr("disabled", true);
return;
}
// 하위선택옵션로드
if(sel_count > 1 && (idx + 1) < sel_count) {
var opt_id = "";
// 상위 옵션의 값을 읽어 옵션id 만듬
if(idx > 0) {
$frm.find("select.it_option:lt("+idx+")").each(function() {
if(!opt_id)
opt_id = $(this).val();
else
opt_id += mainCart.chr(30)+$(this).val();
});
opt_id += mainCart.chr(30)+val;
} else if(idx == 0) {
opt_id = val;
}
$.post(
g5_shop_url + "/itemoption.php",
{ it_id: it_id, opt_id: opt_id, idx: idx, sel_count: sel_count },
function(data) {
$sel.eq(idx+1).empty().html(data).attr("disabled", false);
// select의 옵션이 변경됐을 경우 하위 옵션 disabled
if(idx+1 < sel_count) {
var idx2 = idx + 1;
$frm.find("select.it_option:gt("+idx2+")").val("").attr("disabled", true);
}
}
);
} else if((idx + 1) == sel_count) { // 선택옵션처리
if(val == "")
return;
var info = val.split(",");
// 재고체크
if(parseInt(info[2]) < 1) {
alert("선택하신 선택옵션상품은 재고가 부족하여 구매할 수 없습니다.");
return false;
}
}
});
$(document).on("click", ".cartopt_cart_btn", function(e) {
e.preventDefault();
mainCart.add_cart(this.form);
});
$(document).on("click", ".cartopt_close_btn", function(e) {
e.preventDefault();
mainCart.add_cart_after();
//$(this).closest(".sct_cartop").css("display","none");
//$(this).closest("li.sct_li").find(".sct_btn").css("display", "");
});
$(document).on("click", ".btn_wish", function(e) {
e.preventDefault();
mainCart.add_wishitem(this);
});
});
</script>
어느 부분에서 경고창을 띄워야 하는지 고수님들의 조언을 부탁드립니다 ㅠ
답변 1
mainCart.add_cart() 함수의
// 금액 음수 체크 전에
추가해보면 어떨까 싶습니다.
// 상담희망일자 필드 검증
var $work_msg = $frm.find("input[name=work_msg]");
if ($work_msg.length > 0 && $work_msg.attr("required") && $work_msg.val() == "") {
alert("희망일자를 선택해주세요.");
$work_msg.focus();
return false;
}
감사합니다! 아주 잘 작동됩니다!
답변을 작성하시기 전에 로그인 해주세요.
