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