input 배열 출력 관련 질문입니다.
본문
해당 input을 배열값으로 "|"구문자를 사용하여 여분필드에 저장을 한 뒤
소스로 불러오는 것까지는 구현을 하였습니다.
그런데 지금 input자체가 버튼 추가형 input이라 출력시에 for문을 사용을 하면 해당 count 갯수까지만
출력이 되기 때문에 문제가 생기지 않습니다. 하지만 이제 글을 수정할때에는 다시 input을 추가할수도
있는 상황이 오는데 여기서 추가버튼을 눌러 추가를 하게 되면 input에 빈 공간이 나와야 하는데
전의 값이 들어간 상태에서 계속 추가가 되네여 ㅜㅜ 혹시 값이 2개면 추가로 하는 input은 빈 공란으로 나오게 하는 방법이 있나요??ㅜㅜ 조언 부탁 드리겠습니다.
$email_array = explode('|', $wr_2);
for ($sel=0; $sel<count($email_array); $sel++) {
$email_array_trim = trim($email_array[$sel]);
?>
<div class="bo_w_select write_div" id="email_input">
<label for="wr_2" class="" id="email_input" style="height: 40px;">E-mail</label>
<input type="text" name="wr_2[]" value="<?php echo $email_array_trim?>" id="wr_mail" required class="frm_input full_input" size="50" maxlength="255" placeholder="Email">
<a class="btn btn-default btn_add" onclick="add_input()" ><i class="fas fa-plus"></i></a>
</div>
<?php }?>
<script type="text/javascript">
function add_input(){
var div = document.createElement('div');
div.innerHTML = document.getElementById('email_input').innerHTML;
document.getElementById('field').appendChild(div);
}
function del_input(obj){
document.getElementById('field').removeChild(obj.parentNode);
}
</script>
답변 2
소스 구성 자체가 기존테그를 읽어서 추가하는 방식이라 수정시 값도 같이 들어가는 겁니다.
스크립트 내에서 추가시에는 적용할 테그를 별도로 구성해서 입력하셔야 할듯 합니다.
data ='<div class="bo_w_select write_div" >';
data +='<label for="wr_2" class="" id="email_input" style="height: 40px;">E-mail</label>';
data +='<input type="text" name="wr_2[]" value="" id="wr_mail" required class="frm_input full_input" size="50" maxlength="255" placeholder="Email">';
data +='<a class="btn btn-default btn_add" onclick="add_input()" ><i class="fas fa-plus"></i></a> ';
data +=' </div>';
div.innerHTML = data;
이런식으로요
감사합니다 조언해주신 소스를 참고로 좋고 안정적인 소스 구현해보겠습니다!
소스를 하나하나 다시 분석하셔서 짜셔야 될것 같습니다.
문제점 설명해드리겠습니다.
1. html태그에서 id는 한 페이지에 하나만 존재 해야합니다.
- email_input을 두곳에서 사용하고 있습니다. 이거는 문제가 될 수 있습니다.
2. 자바스크립트 부분은 정확히 어떤 내용인지 소스 분석 가능하신가요? 하나하나 집어보면 바로 문제가 보입니다.
- 첫째 document.getElementById().innerHTML <---이 부분이 뜻하는 것
- 둘째 appendChild(div) 이 부분이 뜻하는 것
위의 부분을 한번 알아보시면 왜 저렇게 나오는지 알게 되시고 수정 가능하실거에요.
네 답변 감사합니다. 다시한번 분석하여서 안정적인 소스를 구현하겠습니다.
