셀렉트에 따라 다른내용시 필수입력처리 채택완료
망이망소이
7년 전
조회 2,682
아래와 같이 글쓰기 페이지에서
선택한 셀렉트 값에 따라 탭 내용이 보여지게 하는데 있어서
input폼에 required 처리를 하려고 하는데요.
문제는 이렇게 해놓으니까 화면상에만 안보이지 실제로 남아있게 되니
필수입력을 히든탭에도 해줘야 되더라구요,
그래서 값에 따라 아예 폼을 없애줘야 될듯한데
그러려면 탭내용들을 php if문으로 처리하는방법이 있을까요?
</p>
<p> </p>
<p>//셀렉트</p>
<p><select name='wr_6' id='wr_6' required>
<option value="">선택하세요.</option>
<option value="딸기" <?php echo ($write['wr_6'] == "딸기") ? "selected" : "";?>>딸기</option>
<option value="수박" <?php echo ($write['wr_6'] == "수박") ? "selected" : "";?>>수박</option>
</select></p>
<p> </p>
<p>//탭내용</p>
<p><div class="tab1">
딸기 <input type="text" name="wr_7" value="<?=$write['wr_7']?>" id="wr_7" class="frm_input" maxlength="20" required> 상자
</div></p>
<p><div class="tab2">
수박 <input type="text" name="wr_8" value="<?=$write['wr_8']?>" id="wr_8" class="frm_input" maxlength="20" required> 통
</div></p>
<p> </p>
<p> </p>
<p>//스크립트</p>
<p><script>
$("#wr_6").change(function(){
if( $(this).val() == '딸기' ) {
$(".tab1").show();
}
else{
$(".tab1").hide();
}
})
$("#wr_6").change(function(){
if( $(this).val() == '수박' ) {
$(".tab2").show();
}
else{
$(".tab2").hide();
}
})
$("#wr_6").trigger( 'change' );
</script></p>
<p>
혹시 이렇게 하는게 맞나요?
</p>
<p><? ($write['wr_6'] == "딸기") ? "selected" : "";?>
<div class="tab1">
딸기 <input type="text" name="wr_7" value="<?=$write['wr_7']?>" id="wr_7" class="frm_input" maxlength="20" required> 상자
</div>
<? } else {?>
<? } ?></p>
<p><? ($write['wr_6'] == "수박") ? "selected" : "";?>
<div class="tab2">
수박 <input type="text" name="wr_8" value="<?=$write['wr_8']?>" id="wr_8" class="frm_input" maxlength="20" required> 통
</div>
<? } else {?>
<? } ?></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
7년 전
스크립트 부분을 아래와 같이 수정해보세요.
</p>
<p><script></p>
<p>$("#wr_6").change(function(){</p>
<p>if( $(this).val() == '딸기' ) {</p>
<p>$(".tab1").show();</p>
<p>$("#wr_7").attr("required",true);</p>
<p>}</p>
<p>else{</p>
<p>$(".tab1").hide();</p>
<p>$("#wr_7").attr("required",false);</p>
<p>}</p>
<p>if( $(this).val() == '수박' ) {</p>
<p>$(".tab2").show();</p>
<p>$("#wr_8").attr("required",true);</p>
<p>}</p>
<p>else{</p>
<p>$(".tab2").hide();</p>
<p>$("#wr_8").attr("required",false);</p>
<p>}</p>
<p>})</p>
<p>$("#wr_6").trigger( 'change' );</p>
<p></script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
망이망소이
7년 전
알려주신데로 해보니 잘 작동합니다.^^ 감사합니다. 잘배워갑니다.
댓글을 작성하려면 로그인이 필요합니다.
7년 전
</p>
<p>$( '#wr_6' ).change( function() {
var val = this.value ? this.value : false;
$( '.tab1, .tab2' ).each( function() {
var flag = val && this.innerText.indexOf(val) > -1;
$( this ).toggle( flag ).children().prop( 'required', flag );
});
});
$( '#wr_6' ).trigger( 'change' );</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
망이망소이
7년 전
답변 감사합니다.^^ 짧은소스라 꼭 쓰고 싶은데 제가 부족해서 잘 안되네요. 공부하겠습니다.
댓글을 작성하려면 로그인이 필요합니다.
7년 전
굳이 아래 부분으로 수정하지 말고,
원래 코딩하셨던 윗부분만 넣으시고 테스트 해보면 아무런 이상이 없습니다.
hide() 된 부분의 required 는 필수값 체크하지 않습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
망이망소이
7년 전
아 그렇군요. 그런데 희한하게 저장이 안되더라구요. 그래서 required 빼니까 되고해서 그게 문젠가 싶어서요
�
망이망소이
7년 전
다시해보니까 hide() 처리된 탭의 required도 체크를 하는데요? required를 빼니까 등록되고 넣으면 등록이 안되고 그러네요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인