글쓰기 옵션에서 기타를 선택하면, 상세내용 기재하게 하려는데...

글쓰기 옵션에서 기타를 선택하면, 상세내용 기재하게 하려는데... 정보

글쓰기 옵션에서 기타를 선택하면, 상세내용 기재하게 하려는데...

본문

글쓰기에서 옵션항목을 선택하게 한 후, 열거된 옵션에 없어서 "기타"로 처리해야 하는 경우는 "기타"의 상세내용을 적게 하려는데요.....

<tr>
<td>
<select name="wr_1" required size="1" value="<?=$write[wr_1]?>">
<option selected="selected" value="">사람이름을 선택하세요.</option>

<option value="기타" <?=($write[wr_1]=='기타')?"selected":""?>>기타 - 아래에서 찾을 수 없을 때는 아래 빈칸에 입력</option>
<option value="홍길동" <?=($write[wr_1]=='홍길동')?"selected":""?>>홍길동</option>
<option value="이수일" <?=($write[wr_1]=='이수일')?"selected":""?>>이수일</option>
<option value="심순애" <?=($write[wr_1]=='심순애')?"selected":""?>>심순애</option>

</select>
</td>
</tr>

예를 들어 위와 같이 있을 때 글쓰는 사람이 "기타"를 선택하는 경우에만 아래처럼 wr_2 필드 작성칸이 보이게 하고, wr_1 의 값이 "기타"인 경우에는 반드시 wr_2 항목을 작성하게 하려면 어떻게 코딩을 해야 하는지 실제 구현되도록 코딩 부탁 합니다. 감사합니다.

<tr>
<td><input style="width:100%;" name=wr_2 id="wr_2" itemname="기타이름입력" required value="<?=$wr_2?>" class=mw_basic_text></td>
</tr>

복사
공유하기

댓글 전체

꽃미남v 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.01.25 09:17:47

스크립트로 처리할 수 있습니다.

1. 스크립트 소스
<script>
function selectPerson(selectValue) {

if (selectValue == "기타") {
document.getElementById("viewField").style.display = "block";
} else {
document.getElementById("viewField").style.display = "none";
}

}
</script>

2. 해당 select 박스에 onchange 추가
<select name="wr_1" required size="1" onchange="selectPerson(this.value);">

3. 숨기려하는 tr에 id 와 style 추가
<tr id="viewField" style="display:none;">

이거 적용하시면 되겠습니다.^^

byfun 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.01.25 09:18:44

위의 코드를 살짝 고쳐봤습니다. php 에서 selected 하는것보다 js 로 하는게 간단합니다.

<tr>
<td>
<select name="wr_1" required size="1">
<option selected="selected" value="">사람이름을 선택하세요.</option>
<option value="기타">기타 - 아래에서 찾을 수 없을 때는 아래 빈칸에 입력</option>
<option value="홍길동">홍길동</option>
<option value="이수일">이수일</option>
<option value="심순애">심순애</option>
</select>
</td>
</tr>
<tr id='etc_field' style='display:none;'>
<td><input style="width:100%;" name=wr_2 id="wr_2" itemname="기타이름입력" required value="<?=$wr_2?>" class=mw_basic_text></td>
</tr>

<script type="text/javascript">

$('select[name=wr_1]').val('<?=$write['wr_1']?>').change(function() {
if($(this).val() == '기타') {
$('#etc_field').show();
} else $('#etc_field').hide();
});

</script>

byfun 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.01.25 09:19:08

제가 한발 늦었네요.. ㅎㅎ

성깔난악어 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.01.25 10:12:32

조금 보태자면 wr_2 의 값을 hide 처리 할때 공백 처리 해 줘야 할꺼에요.. 안그러면 "기타" 선택 했다가 입력한고..다른걸 선택하면 기존의 데이터는 눈에 보이지 않지만 hide 상태로 남아 있죠...

반박자뒤 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.01.25 12:30:00

답변주신 세 분 모두 감사합니다. 위의 1, 2번 모두 해 봤는데,
1) 기타를 선택한 후, 상세내용(wr_2)을 기재하지 않아도 다음으로 넘어가는데 wr_2를 필수적으로 기재하도록 하는 건 안되나요?

2) 성깔난악어님이 코멘트 하신 "wr_2 의 값을 hide 처리할 때 공백처리 한다"는 건, 실제 소스에서 어떻게 하는 건지 글로 적어 주실 수 있나요?

성깔난악어 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.01.25 15:13:41

else 로 빠질때요.. hide하거나 display:none 처리 하자나요.. 그럼 text 필드에 document.getElementById("wr_2").value="" 이렇게 되어야 할것 같아서요..^^;;

기타를 선택해도 그냥 넘어 가는 이유는..
submit() 하는곳에서 아래 처럼
if(document.getElementById("wr_1").value=="기타"){ // 셀렉트 값이 기타 일때 만 wr_2의 값을 아래 처럼 체크 해서
if(document.getElementById("wr_2").value==""){ //값이 없으면..
alert("값을 넣어 주세요");
document.getElementById("wr_2").focus();
return;
}
}

이정도가 될듯 하네요..

반박자뒤 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.01.26 03:51:30

답변 주신 세 분 답변 모두를 택하고 싶은 데 1개만 선택하게되어 있어 부득이 먼저 올린 답변 글에 채택버튼 눌렀지만, 나머지 두 분 한테도 도움 많이 받았습니다. 꽃미남v님, byfun님, 성깔난악어님 감사합니다.

글쓰기 옵션에서 기타를 선택하면, 상세내용 기재하게 하려는데... > 그누4 질문답변

그누4 질문답변