728x90
javascript로 동적으로 inputbox 추가, 삭제 하는 예제 소스 입니다.
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script language="javascript">
// 입력값 체크 (특수문자 입력 안되도록)
function validateInput(objName) {
var prdOptionTxt = $("#"+objName).val();
$("#"+objName).val((prdOptionTxt.replace(/[[~!@#$%^&*()_+|<>?:{}= ]/g,'')));
}
var oTbl;
function insRow() {
var inputCnt= parseInt($("#inputCnt").val()) + 1;
$("#inputCnt").val(inputCnt);
oTbl = document.getElementById("addTable");
var oRow = oTbl.insertRow();
oRow.onmouseover=function(){oTbl.clickedRowIndex=this.rowIndex};
var oCell = oRow.insertCell();
var frmTag = '<input type="text" id="option' + inputCnt + '" name="addText" style="width:350px; height:20px;" onkeyup="validateInput(\'option' + inputCnt + '\')" placeholder="국문, 영문, 숫자 조합으로 입력 가능합니다."> ';
frmTag += '<input type="button" value="삭제" onClick="removeRow()" style="cursor:hand">';
oCell.innerHTML = frmTag;
}
function removeRow() {
oTbl.deleteRow(oTbl.clickedRowIndex);
}
function frmCheck() {
var frm = document.form;
for( var i = 0; i <= frm.elements.length - 1; i++ ) {
if( frm.elements[i].name == "addText" ) {
if( !frm.elements[i].value ) {
alert("국문, 영문, 숫자 조합으로 입력해주세요.");
frm.elements[i].focus();
return;
}
}
}
}
</script>
</head>
<doby>
<form name="form" method="post">
<font color="#FF0000">동적으로 inputbox 추가, 삭제</font>
<table id="addTable" width="100%" border="0" cellpadding="0" cellspacing="0">
<input type="hidden" id="inputCnt" value="0">
<tr>
<td height="25">
<input type="text" id="option0" name="addText" style="width:350px; height:20px;" onkeyup="validateInput('option0')" placeholder="국문, 영문, 숫자 조합으로 입력 가능합니다.">
<input name="addButton" type="button" style="cursor:hand" onClick="insRow()" value="추가">
</td>
</tr>
</table>
<br>
<input type="button" name="button" value="확인" onClick="frmCheck();">
</form>
</doby>
</html>728x90
'Javascript' 카테고리의 다른 글
| 화살표 함수(Arrow Function) (0) | 2022.12.12 |
|---|---|
| 자바스크립트 각종 NULL 처리 방법 (0) | 2022.12.11 |
| HTML 상의 태그 제거하는 방 (0) | 2022.12.11 |
| JQuery 이미지 업로드 파일 체크(확장자, 용량, 특수문자) (0) | 2022.09.03 |
| JQuery 파일 업로드시 이미지 가로 x 세로 크기 체크하기 (0) | 2022.09.03 |