inputbox 동적생성

WebDevelop/JavaScript
inputbox 동적생성

쥬리엘 2007. 9. 11. 10:58
<!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>