input 박스의 required 속성 설정에 대해서... 정보
input 박스의 required 속성 설정에 대해서...본문
input box에는 required라는 속성이 있쟎아요. 그것을 java script로 제어하고 싶은데 안되네요. ㅠ..ㅠ....
체크박스를 선택하면, 밑의 input box의 속성을 required로 변경하고,
체크박스를 해지하면, 밑의 input box의 속성에서 required를 빼버리고 싶어요.
그런데, java script 매뉴얼을 뒤져도 마땅한 방법이 없는거 같아서 질문 드립니다.
어떻게 설정해야지 required의 속성을 없앴다가 넣었다고 할 수 있을까요???
체크박스를 선택하면, 밑의 input box의 속성을 required로 변경하고,
체크박스를 해지하면, 밑의 input box의 속성에서 required를 빼버리고 싶어요.
그런데, java script 매뉴얼을 뒤져도 마땅한 방법이 없는거 같아서 질문 드립니다.
어떻게 설정해야지 required의 속성을 없앴다가 넣었다고 할 수 있을까요???
댓글 전체
메뉴얼에서 setAttribute를 참고해보세요.
<input type="text" id="field" ~ />
<input type="checkbox" onclick="if(this.checked == true) document.getElementById('field').setAttribute('required', 'required'); else document.getElementById('field').setAttribute('required', '');" />
대충 이렇게 하면 선택시에는 required="required"로,
해지시에는 required=""로 속성이 변할 겁니다...
<input type="text" id="field" ~ />
<input type="checkbox" onclick="if(this.checked == true) document.getElementById('field').setAttribute('required', 'required'); else document.getElementById('field').setAttribute('required', '');" />
대충 이렇게 하면 선택시에는 required="required"로,
해지시에는 required=""로 속성이 변할 겁니다...
아~ 감사합니다. 그런데 테스트를 해보니까 required가 설정이 안되네요.
<script>
function switchPoll(obj) {
var switchPollDiv = document.getElementById('user_poll');
if (obj.checked)
{
switchPollDiv.style.display = "block";
document.getElementById('po_subject').setAttribute('required', 'required');
} else {
switchPollDiv.style.display = "none";
document.getElementById('po_subject').setAttribute('required', '');
}
}
</script>
<script>
function switchPoll(obj) {
var switchPollDiv = document.getElementById('user_poll');
if (obj.checked)
{
switchPollDiv.style.display = "block";
document.getElementById('po_subject').setAttribute('required', 'required');
} else {
switchPollDiv.style.display = "none";
document.getElementById('po_subject').setAttribute('required', '');
}
}
</script>
<input type="checkbox" name="checked_field" onClick="change_view()">
<span id="input_view"></span>
<script>
function change_view() {
if(check_field.checked == true) {
document.getElementById("id").innerHTML = "<input type=text ...... required>";
} else {
document.getElementById("id").innerHTML = "<input type=text ...... >";
}
}
</script>
<span id="input_view"></span>
<script>
function change_view() {
if(check_field.checked == true) {
document.getElementById("id").innerHTML = "<input type=text ...... required>";
} else {
document.getElementById("id").innerHTML = "<input type=text ...... >";
}
}
</script>
앗~ 이런 방법이??? 테스트를 해보니까 ie에서는 오류가 나오구 ff에서는 안먹힙니다. ㅠ..ㅠ...
음 그래요?
위에 오타가 있어요
document.getElementById("input_view") 로 넣어줘야 합니다. 그래도 안되시는건가요?
위에 오타가 있어요
document.getElementById("input_view") 로 넣어줘야 합니다. 그래도 안되시는건가요?
되기는 하네요. 그런데 class가 안먹히네요. ㅠ..ㅠ... required라는 것을 표시해줘야 사람들이 쉽게 이해를 할텐데... class=tx라는 것이 textbox 내용입력의 class인데, 그냥은 되는데 innerHTML로 넣으니까 안되는거 같더라구요.
<script language="JavaScript">
function switchPoll(obj) {
var switchPollDiv = document.getElementById('user_poll');
if (obj.checked)
{
switchPollDiv.style.display = "block";
//document.getElementById('po_subject').setAttribute('required','true');
document.getElementById('po_subject_span').innerHTML = "<input type='text' class='tx' name='po_subject' id='po_subject' style='width:99%;' itemname='투표 제목' value='<?=$po[po_subject]?>' required maxlength='125'>";
} else {
switchPollDiv.style.display = "none";
document.getElementById('po_subject_span').innerHTML = "<input type='text' class='tx' name='po_subject' id='po_subject' style='width:99%;' itemname='투표 제목' value='<?=$po[po_subject]?>' maxlength='125'>";
}
}
</script>
<script language="JavaScript">
function switchPoll(obj) {
var switchPollDiv = document.getElementById('user_poll');
if (obj.checked)
{
switchPollDiv.style.display = "block";
//document.getElementById('po_subject').setAttribute('required','true');
document.getElementById('po_subject_span').innerHTML = "<input type='text' class='tx' name='po_subject' id='po_subject' style='width:99%;' itemname='투표 제목' value='<?=$po[po_subject]?>' required maxlength='125'>";
} else {
switchPollDiv.style.display = "none";
document.getElementById('po_subject_span').innerHTML = "<input type='text' class='tx' name='po_subject' id='po_subject' style='width:99%;' itemname='투표 제목' value='<?=$po[po_subject]?>' maxlength='125'>";
}
}
</script>
document.getElementById("po_subject").className = "tx";
그리고 속성중 display 를 none 으로 해도 폼값에는 존재하게 됩니다. (submit 하면 값이 넘어가니까.. innerHTMl = ''; 로 처리하는게 낫습니다.)
그리고 속성중 display 를 none 으로 해도 폼값에는 존재하게 됩니다. (submit 하면 값이 넘어가니까.. innerHTMl = ''; 로 처리하는게 낫습니다.)
감사합니다. 그런데, 여전히 className이 안먹히네요. ㅠ..ㅠ...
사용자투표기능을 글쓰기에 연동해서 넣으려 했더니, 이거무지하게 어렵네요.
<script language="JavaScript">
function switchPoll(obj) {
var switchPollDiv = document.getElementById('user_poll');
if (obj.checked)
{
switchPollDiv.style.display = "block";
document.getElementById('po_subject_span').innerHTML = "<input type='text' class='tx' name='po_subject' id='po_subject' style='width:99%;' itemname='투표 제목' value='<?=$po[po_subject]?>' required maxlength='125'>";
document.getElementById('po_subject').className = "tx";
} else {
switchPollDiv.style.display = "none";
document.getElementById('po_subject_span').innerHTML = "";
}
}
</script>
사용자투표기능을 글쓰기에 연동해서 넣으려 했더니, 이거무지하게 어렵네요.
<script language="JavaScript">
function switchPoll(obj) {
var switchPollDiv = document.getElementById('user_poll');
if (obj.checked)
{
switchPollDiv.style.display = "block";
document.getElementById('po_subject_span').innerHTML = "<input type='text' class='tx' name='po_subject' id='po_subject' style='width:99%;' itemname='투표 제목' value='<?=$po[po_subject]?>' required maxlength='125'>";
document.getElementById('po_subject').className = "tx";
} else {
switchPollDiv.style.display = "none";
document.getElementById('po_subject_span').innerHTML = "";
}
}
</script>
outerHTML 로 하세요
<script language="JavaScript">
function switchPoll(obj) {
if (obj.checked)
document.getElementById('po_subject').outerHTML="<input type='text' class='tx' name='po_subject' id='po_subject'>"
else document.getElementById('po_subject').value=''
}
</script>
<input type='text' class='tx' name='po_subject' id='po_subject'>
<input type="checkbox" onclick="switchPoll(this)">
<script language="JavaScript">
function switchPoll(obj) {
if (obj.checked)
document.getElementById('po_subject').outerHTML="<input type='text' class='tx' name='po_subject' id='po_subject'>"
else document.getElementById('po_subject').value=''
}
</script>
<input type='text' class='tx' name='po_subject' id='po_subject'>
<input type="checkbox" onclick="switchPoll(this)">
b..b... 그런데 class는 이것도 안먹히네요. 으~ 어렵습니다.
className 을 변경하고 innerHTML 을 적용하세요.
불당님 청춘불안정님 방법으로 다시 갑니다.
<input type="text" id="field" ~ />
<input type="checkbox" onclick="if(this.checked == true) document.getElementById('field').attribute= 'required' else document.getElementById('field').attribute='');" />
또는
document.getElementById("field").setAttribute("attribute", "required");
document.getElementById("field").setAttribute("attribute", "");
으로 처리..
innerHTML 에서 className 이 안 먹는건 아래와 같이 설정
==> document.getElementById("field").setAttribute("class", "tx");
Ie, ff 두개다 먹는지는 모르겠음..
<input type="text" id="field" ~ />
<input type="checkbox" onclick="if(this.checked == true) document.getElementById('field').attribute= 'required' else document.getElementById('field').attribute='');" />
또는
document.getElementById("field").setAttribute("attribute", "required");
document.getElementById("field").setAttribute("attribute", "");
으로 처리..
innerHTML 에서 className 이 안 먹는건 아래와 같이 설정
==> document.getElementById("field").setAttribute("class", "tx");
Ie, ff 두개다 먹는지는 모르겠음..
ㅎㅎㅎ className 을 바꾸고 innerHTML 을 적용해야 하는거네요...
b..b...지금처럼 class를 적용한다고 고생하는 것보다... 사용자투표 프로그램의 로직을 아예 바꿔야 할 것 같아요.