가변적인 추가/삭제 입력폼
본문
안녕하세요.
게시판 write.skin.php에 아래 그림과 같은 모양의 가변적인 add/delete 입력폼을 만들고자 하는데,
문외한인 저는 이게 제대로 안되는군요.
고수분께서 정상적으로 작동하는 코드로 손봐주시면 고맙겠습니다.
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script-->
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<?php for ($i = 1; $i < count($ext3_0); $i++) { ?>
<label for="item_no_<?php echo $i+1 ?>" class="xv_item_no">><?php echo $i+1 ?></label>
<input type="text" class="info_input" style="width:200px" placeholder="품명" name="ext4_[]" value="<?php echo $ext4_[$i] ?>" />
<input type="text" class="info_input" style="width:200px" placeholder="규격" name="ext5_[]" value="<?php echo $ext5_[$i] ?>" />
<input type="text" class="info_input" style="width:50px" placeholder="가격" name="ext6_[]" value="<?php echo $ext6_[$i] ?>" />
<input type="text" class="info_input" style="width:80px" placeholder="단위" name="ext7_[]" value="<?php echo $ext7_[$i] ?>" />
<input type="text" class="info_input" style="width:50px" placeholder="수량" name="ext8_[]" value="<?php echo $ext8_[$i] ?>" />
<input type="text" class="info_amount" style="width:80px" placeholder="합계" name="ext9_[]" value="<?php echo $ext9_[$i] ?>" />
<a href="javascript:void(0);" class="remove_button">
<input class="favorite styled" type="button" value=" Delete "></a></div><?php } ?>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
<div class="container">
<form action="" method="post">
<div class="field_wrapper">
<div>
<label for="item_no_<?php echo $i+1 ?>" class="xv_item_no"><?php echo $i+1 ?></label>
<input type="text" class="xv_info_input" style="width:200px" placeholder="품명<?php echo $i+1 ?>" name="ext4_[]" value="<?php echo $ext4_[$i] ?>" />
<input type="text" class="info_input" style="width:200px" placeholder="규격<?php echo $i+1 ?>" name="ext5_[]" value="<?php echo $ext5_[$i] ?>" />
<input type="text" class="info_input" style="width:50px" placeholder="가격<?php echo $i+1 ?>" name="ext6_[]" value="<?php echo $ext6_[$i] ?>" />
<input type="text" class="info_input" style="width:80px" placeholder="단위<?php echo $i+1 ?>" name="ext7_[]" value="<?php echo $ext7_[$i] ?>" />
<input type="text" class="info_input" style="width:50px" placeholder="수량<?php echo $i+1 ?>" name="ext8_[]" value="<?php echo $ext8_[$i] ?>" />
<input type="text" class="info_amount" style="width:80px" placeholder="금액<?php echo $i+1 ?>" name="ext9_[]" value="<?php echo $ext9_[$i] ?>" />
<a href="javascript:void(0);" class="add_button" title="Add field">
<input class="xv_item_btn" type="button" value=" Add "></a>
</div>
</div>
</form>
</div>
답변 2
죄송한데 이건 쓰기에 관련 되는 부분을 원하시는 방법으로 만들고 싶으시겠지만,
그누보드는 여분필드가 10개로 되어 있어 추가하신다고 해도 한두줄 정도밖에 생성 못하십니다.
만약 많은 갯수의 글쓰기를 만들고 싶으시다면 JSON을 데이타를 배열안에 넣고 여분필드에 넣는 방법이 있는데 이것 역시 무한으로 늘릴수는 없고 제한적입니다.
그렇다면 여분필드를 계속늘리면서 작성하시는 방법이 있는데 이건 또 찾고자하는 검색에서 문제가 될수 있습니다.
따라서 원하시는 기능을 구현하시고 싶으시면 용도에 맞는 데이타 한계를 정하셔야 할 것 같습니다.
제 경험상으로는 JSON 이용하면 약 100정도의 값을 가질수 있습니다만... 복잡한 텍스트, 특수기호 같은 것이 들어가면 에러를 솟아냅니다. T.T
요약하면 데이타를 몇개는 넣고 싶으신지요? 갯수 제한을 두어야합니다.
다시말해 기획/설계가 되어야 만들수 있는 기능입니다.(보여지는건 쉽지만 DB에 넣을려면 이런 문제가 있습니다)
조언주셔서 감사합니다.
10개 이상을 저장하기 위해서 저는,
wr_4, wr_5, wr_6, wr_7, wr_8, wr_9를 | 로 분열시켜서 저장하려는 생각입니다.
그래서 자바스크립트 안의 value=""에 <?=$ext4_"+i+"?>과 같이 php 코드에 대응하는 자바스크립트 코드를 넣어주어야 될것 같은데,
사실 저가 javascript도 php도 모르기 때문에 이걸 조작하는 방법을 모릅니다.
이 부분을 좀 알려주시면 고맙겠습니다.
찾다보니 아래 스크립트도 있던데.
http://superkts.pe.kr/helper/view.php?seq=V&seq=290
저는 여분필드 4,5,6,7,8,9,10을explode로 사용해서 데이터를 넣으려고합니다.
그러면 상당히 많은 아이템들을 넣을수 있을테니까요. 일단, 100개 정도의 아이템을 넣을수 있도록할까 싶어서
<?php for ($i=0; $i && $i<=100; $i++) { ?>
부분을 추가하니까 작동을 안하네요.
<script type="text/javascript">
<!--
function add_item(){
// pre_set 에 있는 내용을 읽어와서 처리..
var div = document.createElement('div');
div.innerHTML = document.getElementById('pre_set').innerHTML;
document.getElementById('field').appendChild(div);
}
function remove_item(obj){
// obj.parentNode 를 이용하여 삭제
document.getElementById('field').removeChild(obj.parentNode);
}
//-->
</script>
<div id="pre_set" style="display:none">
<?php for ($i=0; $i && $i<=100; $i++) { ?>
<label for="item_no_<?php echo $i+1 ?>" class="xv_item_no"><?php echo $i+1 ?></label>
<input type="text" name="" value="" style="width:200px">
<input type="text" name="" value="" style="width:200px">
<input type="text" name="" value="" style="width:60px">
<input type="text" name="" value="" style="width:60px">
<input type="text" name="" value="" style="width:60px">
<input type="text" name="" value="" style="width:80px">
<input type="button" value="삭제" onclick="remove_item(this)">
<?php } ?>
</div>
<div id="field"></div>
<input type="button" value=" 추가 " onclick="add_item()"> 항목 추가
자바스크립트를 잘못 이해하셨군요.
for문은 의미가 없습니다.
자바스크립트를 이용해서 갯수 제한을 만드시고 추가 될 경우 input태그의 name 값도 늘어나도록 설정되어야합니다.
※ 자바스크립트 소스를 수정해드리면 좋겠지만 제가 미천한 실력이라...
여하튼 작성후 DB에 입력해 넣을때 게시판 write_update.head.skin.php를 이용하셨어 저장하고자하는 값들을 추가하고자 하는 각 필드에 맞게 가공하셨어 넣으셔야합니다.
넣으실때 name="item_01", name="item_02" 의 각각의 값이 있다면
$wr_1 = $_POST['item_01']." : ".$_POST['itme_02'];
여분의 필드 $wr_1에 넣으시면 됩니다.
위 소스가 동작 안하는 이유는
<label for="item_no_<?php echo $i+1 ?>" class="xv_item_no"><?php echo $i+1 ?></label>
여기가 아니라
<input type="text" name="" value="" style="width:200px">
여기를
<input type="text" name="wr_<?php echo $i+1 ?>" value="" style="width:200px">
바꾸시면 됩니다.
이렇게 되면 wr_1, wr_2, ... wr_100 까지 생성 되도록 됩니다.
여기서 주의할 점은 wr_11 부터는 입력이 안된다는 것입니다.
참고로 다른 분이 플러그인에 만들어 놓으신 자료가 있어 링크 주소를 아래에 작성해두겠습니다.
https://sir.kr/g5_plugin/6570
이런 기능을 원하시는 것 같군요.
설명서 대로 설치 해보시면 어떨까합니다.
오늘도 좋은 하루 되세요.
