스크립트 질문
본문
https://sir.kr/qa/264063?sfl=mb_id%2C1&lstx=qnals1220 문의참고
<script>
function myFunction1() {
var item01 = $('#pre_set #item01').val();
var item02 = $('#pre_set #item02').val();
var item03 = $('#pre_set #item03').val();
var item04 = $('#field .field_div:eq(0) #item01').val();
var item05 = $('#field .field_div:eq(0) #item02').val();
var item06 = $('#field .field_div:eq(0) #item03').val();
var item07 = $('#field .field_div:eq(1) #item01').val();
var item08 = $('#field .field_div:eq(1) #item02').val();
var item09 = $('#field .field_div:eq(1) #item03').val();
var item10 = $('#field .field_div:eq(2) #item01').val();
var item11 = $('#field .field_div:eq(2) #item02').val();
var item12 = $('#field .field_div:eq(2) #item03').val();
var item13 = $('#field .field_div:eq(3) #item01').val();
var item14 = $('#field .field_div:eq(3) #item02').val();
var item15 = $('#field .field_div:eq(3) #item03').val();
var x = "\n"+item01+" "+item02+" "+item03+"\n"+item04+" "+item05+" "+item06+"\n"+item07+" "+item08+" "+item09 +"\n"+item10+" "+item11+" "+item12+"\n"+item13+" "+item14+" "+item15;
$("#pt_msg1").val(x);
}
</script>
input창 3개가 나와서 textarea에 적히도록 스크립트를 짠건데요
값이 없으면 자꾸 undefinde로 글씨가뜨는데
예:item01+" "+item02+" "+item03에는 값이있고 나머지에 업승면
나머지는 undefined가 뜹니다..ㅠㅠ
안뜨게 소스 수정좀 부탁드리니다.
답변 1
function myFunction1() {
var x = '';
$('#field .field_div').each(function() {
x = $('#item01', $(this)).val() + ' ' + $('#item02', $(this)).val() + ' ' + $('#item03', $(this)).val() + ' ';
});
$("#pt_msg1").val(x);
}
안되네여 ㅠㅠ..
textarea 부분에 각각의 값 적을때 동시에 같이 적히도록 아래 스크립트까지 같이 짜논상황인데
베원님이 알려주신방법으로 하면 적혀지지 않습니다..
<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);
$('#field>div').addClass("field_div");
}
function remove_item(obj){
// obj.parentNode 를 이용하여 삭제
document.getElementById('field').removeChild(obj.parentNode);
}
//-->
</script>
혹시 콘솔창에서 에러가 나는지 확인좀 해주실 수 있나요? 지금 모바일 환경이라 테스트를 해볼 수 없네요..
제 컴터가 익스 오류가 마니나서 콘솔창 백지네요..ㅠㅠ
제가 이따 확인해볼게요.
감사합니다.ㅠㅠ
확인해봤습니다.
수정할게 많아요..
id는 단일 엘리먼트만 지정하는 겁니다. 여러 개를 쓰실 경우 class 쓰시구요.
add_item이 어떻게 구현됐는지는 모르겠지만 함수 수정하셔서 field라고 따로 만들지 말고 pre_set의 형제로 pre_set을 새로 만들어서 넣는걸 추천합니다. pre_set은 class로 바꾸시구요.
item02~item03도 onkeyup을 myFunction1로 수정해주세요. 이 놈들도 마찬가지로 id 속성이면 안 됩니다. 그래서 아래 코드에서는 tt1, tt2, tt3 class를 썼습니다.
이렇게 수정했을 경우 아래 코드로 넣으시면 됩니다.
function myFunction1() {
var x = '';
$('.pre_set').each(function() {
x += $('.tt1', $(this)).val() + ' ' + $('.tt2', $(this)).val() + ' ' + $('.tt3', $(this)).val() + ' ';
});
$("#pt_msg1").val(x);
}
add_item은 이렇게 구현하면 되겠네요.
function add_item(){
$(".pre_set").parent().append($(".pre_set:eq(0)").clone());
}
베원님 꼼꼼한 답변 감사합니다만
음..추가로 문의를 드립니다..
아래처럼 수정을 해서 되긴되는데..
버튼 추가를 눌러서 "tt1,"tt2,"tt3 영역에 새로운걸 적으려고 하면
그전에 적은 내용들이 그대로 적혀져서 나오는데 이부분은 어케 수정을 해야할지요
1,2,3
4,5,6
이런식으로 내용이 3개씩 아래로 내랴오게 하는방법도요
<tr class="layer layer01" style="width:650%; float:left; "><!--나타나는곳 textarea-->
<th scope="row" style="width:15.5% !important; float:left; padding-top: 87px; padding-bottom: 91px;"><label> 이력내용</label></th>
<td class="one_t" style="width:84.5%; float:left; ">
<textarea style="height:175px !important; padding-left:0;" name="pt_msg1" id="pt_msg1" class="frm_input required sl">
<?php echo get_text(cut_str($it['pt_msg1'], 250, "")); ?>
</textarea>
<!--<?php echo editor_html('pt_msg1', get_text($it['pt_msg1'], 0)); ?>-->
</td>
</tr>
<?php if ($w == '') { ?>
<tr class="layer layer02"><!--폼에적는곳 3개-->
<th scope="row"><label>이력내용</label></th>
<td>
<div class="pre_set" style="width:100%; float:left;">
<input placeholder="업체명" id="item01" class="tt1" type="text" name="" value="" style="width:100px; margin-right:5px;" onkeyup="myFunction1()">
<input placeholder="경력내용" id="item02" class="tt2" type="text" name="" value="" style="width:386px; margin-right:5px;" onkeyup="myFunction1()">
<input placeholder="기간" id="item03" class="tt3" type="text" name="" value="" style="width:200px; margin-right:5px; " onkeyup="myFunction1()">
<input class="plus05" type="button" value=" 추가 " onclick="add_item()">
</div>
<div id="field"></div>
</td
</tr>
기능 하나를 만드는 것을 원하시면 제작의뢰로 가시는게 좋을 듯 싶습니다.
베원님이 알려주신것에서 조금만 다듬으면 될거같은데 잘 안되서
추가질문 드렸네요 ㅠㅠ 도움주셔서 감사합니다!
잘 마무리하시길 바랍니다.
조금씩 찾아보시면서 만드시면 좋은 공부가 되실겁니다.
