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