구매시 전하실말씀 질문드립니다!

구매시 전하실말씀 질문드립니다!

QA

구매시 전하실말씀 질문드립니다!

본문

2113630518_1666325189.8706.jpg

 

위에 모바일 버전 주문작성 페이지입니다.

 

전하실말씀에서 기타로 두고 내용을 기재하면

기재한내용채로 박스가 사라져 버려서 기타만 남게됩니다.

 

PC버전은 잘되는데 모바일만 이러네요...

 


$(function() {
 
    $(document).on("change", ".sel_od_memo", function () {
        if ($(this).val() === "기타") {
            $('select[name=od_memo]').attr('name', '');
            $(this).after("<textarea name=\"od_memo\" id=\"od_memo\" class=\"frm_input required sel_od_memo\" required></textarea>");
        } else {
            $(this).attr('name', 'od_memo');
            $('textarea[name=od_memo]').remove();
        }
    });

 

해당소스코드는 이쪽인거같은데

 

PC버전은

 

 
$(this).after("<textarea name=\"od_memo\" id=\"od_memo\" class=\"required\" required></textarea>");

 

이렇게되어있어서 똑같이했더니 주문하기 누르면 페이지가 넘어가질 않는현상이 생기네요...

ㅠㅠ

이 질문에 댓글 쓰기 :

답변 1

sel_od_memo 이게 셀렉트 엘리먼트인가요?

기타일때 value는 어떻게 작성되있나요?


     <label for="od_memo">전하실 말씀</label>
                            <select name="od_memo" id="od_memo" class="frm_input required sel_od_memo" required>
                                <option value="">메시지를 선택해주세요.</option>
                                <option value="부재시 경비실/관리실에 맡겨주세요.">부재시 경비실/관리실에 맡겨주세요.</option>
                                <option value="배송 전에 미리 연락주세요.">배송 전에 미리 연락주세요.</option>
                                <option value="빠른 배송 부탁드립니다.">빠른 배송 부탁드립니다.</option>
                                <option value="파손의 위험이 있으므로, 주의하여 배송해 주세요.">파손의 위험이 있으므로, 주의하여 배송해 주세요.</option>
                                <option value="문 앞에 놓아주세요.">문 앞에 놓아주세요.</option>
                                <option value="기타">기타</option>


이렇게 되어있습니다!

예상이긴한데 지금 코드상으로 보면 sel_od_memo 이게 select박스에서 기타로 선택하면 네임을 없애버리고 textarea로 sel_od_memo클래스와 od_memo네임이 같이 옴겨지네요
그러면 textarea에서 또 onchage이벤트가 걸려서 그런게 아닌가 싶습니다.

PC버전쪽으로 보니


    <tr>
                    <th scope="row"><label for="od_memo">전하실말씀</label></th>
                    <td>
                        <select name="od_memo" class="frm_input sel_od_memo required" required>
                            <option value="">메시지를 선택해주세요.</option>
                            <option value="부재시 경비실/관리실에 맡겨주세요.">부재시 경비실/관리실에 맡겨주세요.</option>
                            <option value="배송 전에 미리 연락주세요.">배송 전에 미리 연락주세요.</option>
                            <option value="빠른 배송 부탁드립니다.">빠른 배송 부탁드립니다.</option>
                            <option value="파손의 위험이 있으므로, 주의하여 배송해 주세요.">파손의 위험이 있으므로, 주의하여 배송해 주세요.</option>
                            <option value="문 앞에 놓아주세요.">문 앞에 놓아주세요.</option>
                            <option value="기타">기타</option>
                        </select>
                    </td>
                </tr>
                </tbody>
                </table>
            </div>
        </section>

이렇게 좀 다르게되어있네요...

아 뭐 html의 구조는 after 있는거 말고는 크게 위치에만 영향 주는거 빼고는 없는거같긴한데..


$(document).on("change", ".sel_od_memo", function () {
        if ($(this).val() === "기타") {
            // 여기서 셀렉트 박스를 기타로 했을때 여기걸려서 텍스트에어리어가 나타나고,
        } else {
            // 기타 선택후에 텍스트박스에 작성을 하면 여기 이벤트에 걸리는게 원인같아요
        }
    });

그렇군요 ... 신기하네요
모바일에서 같은식으로 렌탈주문하기폼은 또 기타 작성이 잘됩니다....
소스코드보면 PC 쪽이랑 거의 비슷하게되어있는거같아요

저 모바일 일반주문서페이지만 약간 다르게 되어있네요..

정확한건 직접 콘솔로 일일히 찍어봐야 알겠지만 아마 $(document)에다 이벤트를 걸은것이 문제가 되는걸수도 있습니다. 저건 비동기로 html을 생성한 것들에게까지 이벤트를 부여해주거든요

답변을 작성하시기 전에 로그인 해주세요.
전체 69
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT