구매시 전하실말씀 질문드립니다!
본문
위에 모바일 버전 주문작성 페이지입니다.
전하실말씀에서 기타로 두고 내용을 기재하면
기재한내용채로 박스가 사라져 버려서 기타만 남게됩니다.
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을 생성한 것들에게까지 이벤트를 부여해주거든요
답변을 작성하시기 전에 로그인 해주세요.
