Input 필드를 동적으로 추가/삭제하는 코드를 실 활용 코드 수준으로 연습하고 적어둔다.
테스트에 사용한 코드
InputAddRemovejQuery.zip
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="write.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var maxField = 5; //최대 개수
var wrapper = $('.append');
var extcnt = 1; // 최초 카운트 1
var fieldHTML = '<div><input type="text" name="ext[]" value="" class="input" /><a href="#" class="remove_btn"><img src="./img/remove-icon.png"/></a></div>';
$('.add_btn').click(function(){
if(extcnt < maxField){
extcnt++; // 숫자 증가
$('.append').append(fieldHTML); // Add field
$('#extcount').html("(" + extcnt + "개)");
}
});
$(wrapper).on('click', '.remove_btn', function(e){
e.preventDefault();
$(this).parent('div').remove(); // Remove field
extcnt--; // 카운트 감소
$('#extcount').html("(" + extcnt + "개)");
});
});
</script>
</head>
<body>
<?php
$R['subject'] = isset($R['subject'])? $R['subject']:'';
$R['ext'] = isset($R['ext'])? $R['kor']:'';
?>
<form name="writeForm" method='post' action='a.write.php'>
<input type="hidden" name="extcnt" value="0">
<table class="table table-bordered">
<tr>
<td class="td1">제목</td>
<td><input type="text" name="subject" value="<?php echo $R['subject'];?>" class="input" /></td>
</tr>
<tr>
<td class="td1">내용</td>
<td>
<input type="text" name="ext[]" value="<?php echo $R['ext'];?>" class="input" />
<span id="extcount" style="color: #ff0000;font: 10px verdana,dotum;">(1개)</span>
<a href="#" class="add_btn"><img src="./img/add-icon.png"/></a>
<div class="append"></div>
</td>
</tr>
<tr>
<td colspan='2' align='center'>
<button type="submit" class="button">생성</button>
</td>
</tr>
</table>
</form>
</body>
</html> |
/* write */
body {
font-family: 나눔바른고딕, NanumBarunGothic, 맑은고딕, "Malgun Gothic", 돋움, Dotum, "Apple SD Gothic Neo", sans-serif;
font-size: 13px;
color: rgb(33, 33, 33);
letter-spacing: 0.03em;
}
.input {
width:400px;
text-indent: 5px;
height: auto; /* 높이값 초기화 */
line-height : normal; /* line-height 초기화 */
padding: .2em .3em; /* 상하 우좌 */
font-family: inherit; /* 폰트 상속 */
border: 1px solid #ccc; /* 999가 약간 더 진한 색 */
margin-bottom:5px;
font-size:12pt;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.button {
background-color:#E9C28B;
border: none;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer
}
.title {
font-family:inherit; /* 폰트 상속 */
font-size: 13pt;
color:black;
}
.td1 {
width:60px;
font-weight:bold;
color:#444444;
text-align : center;
padding:5px 0 5px 0;
letter-spacing:2px; /* 글자간 간격 */
}
|
<?php
// $_POST 데이터 값만 확인하기 위한 코드
if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST"){
// POST 방식으로 보낸 데이터가 있는지 체크
extract($_POST);
print '<pre>';
print_r($_POST);
print '</pre>';
}
?> |
본 코드는 DB에서 읽어온 데이터를 화면에 표시하고, 데이터 수정, 추가, 삭제하는 로직이 반영된 코드는 아니다.
그냥 단순하게 name 을 배열로 받아서 여러개의 값이 어떻게 넘어가는지 확인하는 코드라고 보면 된다.
name 명칭이 다르게 생성하는 것은 아직 테스트 중이다.
