분류에 따라 입력필드 숨기고 필수항목
본문
글쓰기상에 분류를 선택하면 선택한 분류에 따른 입력필드가 나타납니다.
각각의 입력필드는 분류 선택에 따라 필수또는 아니게 되야하는데 안되네요;;;;;;;;
문제는 선택안된 분류의 입력필드가 필수가 지정되네요.
뭐가 문제일까요?
<div class="cc h40 downline">
<div class="wh">분류</div>
<div class="wp">
<input type='radio' name="ca_name" required itemname="분류" value="서울" <? if($write[ca_name] == "서울") echo 'checked';?> onclick='show(1);'> 서울
<input type='radio' name="ca_name" value="인천" <? if($write[ca_name] == "인천") echo 'checked';?> onclick='show(2);'> 인천
<input type='radio' name="ca_name" value="강원" <? if($write[ca_name] == "강원") echo 'checked';?> onclick='show(3);'> 강원
<input type='radio' name="ca_name" value="부산" <? if($write[ca_name] == "부산") echo 'checked';?> onclick='show(4);'> 부산
</div>
</div>
<div class="wh">분류</div>
<div class="wp">
<input type='radio' name="ca_name" required itemname="분류" value="서울" <? if($write[ca_name] == "서울") echo 'checked';?> onclick='show(1);'> 서울
<input type='radio' name="ca_name" value="인천" <? if($write[ca_name] == "인천") echo 'checked';?> onclick='show(2);'> 인천
<input type='radio' name="ca_name" value="강원" <? if($write[ca_name] == "강원") echo 'checked';?> onclick='show(3);'> 강원
<input type='radio' name="ca_name" value="부산" <? if($write[ca_name] == "부산") echo 'checked';?> onclick='show(4);'> 부산
</div>
</div>
<div id='cas1' style='display:none;'><!----------------------------------------------------서울-->
<div class="cc h40 downline">
<div class="wh">서울</div>
<div class="wp">
<div class="wh">서울</div>
<div class="wp">
<select name=wr_map1 id="map1" value="<?=$write[wr_map1]?>" class="h24 w200">
<option value="<?=$write[wr_map1]?>"><?=$write[wr_map1]?></option>
</select>
<option value="<?=$write[wr_map1]?>"><?=$write[wr_map1]?></option>
</select>
</div>
</div>
</div>
</div> <!----------------------------------------------------서울-->
<div id='cas2' style='display:none;'><!----------------------------------------------------인천-->
<div class="cc h40 downline">
<div class="wh">인천</div>
<div class="wp">
<div class="wh">인천</div>
<div class="wp">
<select name=wr_map2 id="map2" value="<?=$write[wr_map2]?>" class="h24 w200">
<option value="<?=$write[wr_map2]?>"><?=$write[wr_map3]?></option>
</select>
<option value="<?=$write[wr_map2]?>"><?=$write[wr_map3]?></option>
</select>
</div>
</div>
</div>
</div> <!----------------------------------------------------인천-->
<div id='cas3' style='display:none;'><!----------------------------------------------------강원-->
<div class="cc h40 downline">
<div class="wh">강원</div>
<div class="wp">
<select name=wr_map3 id="map3" value="<?=$write[wr_map3]?>" class="h24 w200">
<option value="<?=$write[wr_map3]?>"><?=$write[wr_map3]?></option>
</select>
<div class="wh">강원</div>
<div class="wp">
<select name=wr_map3 id="map3" value="<?=$write[wr_map3]?>" class="h24 w200">
<option value="<?=$write[wr_map3]?>"><?=$write[wr_map3]?></option>
</select>
</div>
</div>
</div>
</div> <!----------------------------------------------------강원-->
<div id='cas4' style='display:none;'><!----------------------------------------------------부산-->
</div> <!----------------------------------------------------부산-->
</div> <!----------------------------------------------------부산-->
<script type="text/javascript">
function show(t){
if (t==1) {
document.getElementById('cas1').style.display = 'block';
document.getElementById('cas2').style.display = 'none';
document.getElementById('cas3').style.display = 'none';
document.getElementById('cas4').style.display = 'none';
$('#map1).attr('required','true').show()
$('#map2).attr('required','false').show()
$('#map3).attr('required','false').show()
}else if (t==2) {
document.getElementById('cas1').style.display = 'none';
document.getElementById('cas2').style.display = 'block';
document.getElementById('cas3').style.display = 'none';
document.getElementById('cas4').style.display = 'none';
$('#map1).attr('required','false').show()
$('#map2).attr('required','true').show()
$('#map3).attr('required','false').show()
}else if (t==3) {
document.getElementById('cas1').style.display = 'none';
document.getElementById('cas2').style.display = 'none';
document.getElementById('cas3').style.display = 'block';
document.getElementById('cas4').style.display = 'none';
$('#map1).attr('required','false').show()
$('#map2).attr('required','false').show()
$('#map3).attr('required','true').show()
}else if (t==4) {
document.getElementById('cas1').style.display = 'none';
document.getElementById('cas2').style.display = 'none';
document.getElementById('cas3').style.display = 'none';
document.getElementById('cas4').style.display = 'block';
$('#map1).attr('required','false').show()
$('#map2).attr('required','false').show()
$('#map3).attr('required','false').show()
}
document.getElementById('cas1').style.display = 'block';
document.getElementById('cas2').style.display = 'none';
document.getElementById('cas3').style.display = 'none';
document.getElementById('cas4').style.display = 'none';
$('#map1).attr('required','true').show()
$('#map2).attr('required','false').show()
$('#map3).attr('required','false').show()
}else if (t==2) {
document.getElementById('cas1').style.display = 'none';
document.getElementById('cas2').style.display = 'block';
document.getElementById('cas3').style.display = 'none';
document.getElementById('cas4').style.display = 'none';
$('#map1).attr('required','false').show()
$('#map2).attr('required','true').show()
$('#map3).attr('required','false').show()
}else if (t==3) {
document.getElementById('cas1').style.display = 'none';
document.getElementById('cas2').style.display = 'none';
document.getElementById('cas3').style.display = 'block';
document.getElementById('cas4').style.display = 'none';
$('#map1).attr('required','false').show()
$('#map2).attr('required','false').show()
$('#map3).attr('required','true').show()
}else if (t==4) {
document.getElementById('cas1').style.display = 'none';
document.getElementById('cas2').style.display = 'none';
document.getElementById('cas3').style.display = 'none';
document.getElementById('cas4').style.display = 'block';
$('#map1).attr('required','false').show()
$('#map2).attr('required','false').show()
$('#map3).attr('required','false').show()
}
} //function
</script>
<? if($w=='u') {
if ($write[ca_name] == "서울") { ?>
<script type="text/javascript">show(1);</script>
<? }else if ($write[ca_name] == "인천") { ?>
<script type="text/javascript">show(2);</script>
<? }else if ($write[ca_name] == "강원") { ?>
<script type="text/javascript">show(3);</script>
<? }else if ($write[ca_name] == "부산") { ?>
<script type="text/javascript">show(4);</script>
<?}?>
<?}?>
</script>
<? if($w=='u') {
if ($write[ca_name] == "서울") { ?>
<script type="text/javascript">show(1);</script>
<? }else if ($write[ca_name] == "인천") { ?>
<script type="text/javascript">show(2);</script>
<? }else if ($write[ca_name] == "강원") { ?>
<script type="text/javascript">show(3);</script>
<? }else if ($write[ca_name] == "부산") { ?>
<script type="text/javascript">show(4);</script>
<?}?>
<?}?>
답변 4
attr("required", "required"); 도 해보셨나요?
아닐때는,
attr("required", "");
계속 테스트를 할 수 없는 환경에서 답변드리게 되서 지송요..;
아닐때는,
attr("required", "");
계속 테스트를 할 수 없는 환경에서 답변드리게 되서 지송요..;
테스트를 할 수 있는 환경이 아니라.., 예상 딥변 드립니다. select 에 required 속성을 선언 안해놔서 그런것 같은데, 빈 값이라도 required="" 선언하고 테스트 해보세요.
제 질문이 많이 부족햇나봐요........ㅡㅜ;;;;;;
질문의 요지는 글쓰기상에서 분류를 선택할때
서울을 선택을 하면 map1이라는 숨기진 입력필드가 나타나고 필수로 지정되며 다른 div안에 입력필드는 숨겨지고 필수가 해지되야합니다.
인천 경기 강원도 위와 마찬가지방식입니다.
지금 위코드의 문제는 분류를 선택할때 나타나는 입력필드를 포함해서 숨겨진 입력필드도 필수로 지정이 됩니다.
해제가 되야하는데 말이지요 ;;;;
포기 ㅡ,.ㅡ;;;;;;
답변을 작성하시기 전에 로그인 해주세요.