inputbox 동적생성

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type='text/javascript'>
<!--
 /******************************
  * 박스를 추가
  ******************************/
 function addBox(val) {
    var frm = document.getElementById('mainForm');
    removeBox();
    frm['indexCnt'].value = 0;
    for (var i = 0; i < val; i++) {
        frm['indexCnt'].value = Number(frm['indexCnt'].value) + 1;
        var idx = frm['indexCnt'].value;

        document.getElementById('view_box').innerHTML += createBox(idx, '', '');
    }
 }

 /*****************************
  * 박스 삭제
  *****************************/
 function removeBox() {
    var frm = document.getElementById('mainForm');
    var indexCnt = frm['indexCnt'].value;

    if (indexCnt == 0 ) {
        return ;
    }
  
    frm['indexCnt'].value = Number(indexCnt) - 1;
  
    for (var i = 0; i < (frm['indexCnt'].value); i++ ) {
        document.getElementById('view_box').innerHTML = '';
     }
 }

 /**********************************
  * 박스를 만든다.
  **********************************/
 function createBox(idx, value1, value2) {
    var name1 = 'poll' + idx;
    var str = '';
    str += '[' + idx + '] <input type="text" size="7" name="' +  name1 + '" id="' + name1 + '" value="' + value1 + '">';
    str += '<br>';

    return str;
 }
//-->
</script>
</head>

<body>
<form name="mainForm" id="mainForm" method="post" onsubmit="return false;">
    <input type="hidden" name="indexCnt" value="0" />
    <span id="view_box"></span><br />
    <select name="pollsub" onchange="addBox(this.value);">
        <option value="0">선택</option>
        <option value="5" >5개</option>
        <option value="6" >6개</option>
        <option value="7" >7개</option>
        <option value="8" >8개</option>
        <option value="9" >9개</option>
    lt;/select>
</form>
</body>
</html>

'WebDevelop > JavaScript' 카테고리의 다른 글

location.href 와 location.replace() 의 차이점  (0) 2007.09.17
JavaScript 기본  (0) 2007.09.11
크로스 브라우징때 편할것 같은 DOM  (0) 2007.08.23
Return top