append로 만든 input의 값들 합 구하기 채택완료
승슝
4년 전
조회 3,789
고수님들, 안녕하세요! 제가 지금 추가버튼을 누르면 빨간박스안에 input이 생기도록 구현까지는 했습니다!
구현은 append()를 사용해서 구현을 했구요. 그래서 append로 생성된 input에 클래스를 주어서 그 클래스의 합들을 구해 합계에 입력하려고 합니다.
그런데 생각한 것처럼 구현이 잘 되지 않아 질문글을 남깁니다!
귀한 시간이지만 조금만 살펴서 많은 조언 부탁드립니다!!ㅠㅠ
+추가로 궁금한 것은 제가 지금 추가버튼의 value값으로 버튼값을 가져와 사용하고 있는데 혹시 다른 방법이 없을까 궁금합니다,,,, 버튼의 이름을 저렇게 두고 싶지가 않아서요ㅠㅠ
일단 현재까지 구현한 화면입니다.
</p>
<p> <div style="display:grid; height:200px;overflow-y: scroll; background-color:#ece6cc;"></p>
<p> <div style=" display:grid; grid-template-columns: repeat(8,1fr);"></p>
<p> <div>번호</div></p>
<p> <div>날짜</div></p>
<p> <div>개수</div></p>
<p> <div>무게</div></p>
<p> <div>총무게</div></p>
<p> <div>나가는 양</div></p>
<p> <div>총나가는 양</div></p>
<p> <div>추가버튼</div></p>
<p> </div></p>
<p> <div id="addFindText" style=" display:grid; grid-template-columns: repeat(8,1fr);"></p>
<p> <?php</p>
<p> $sql = "select * from g5_write_ship_arrival";</p>
<p> $result = sql_query($sql);</p>
<p> for($i=0; $row=sql_fetch_array($result); $i++){?></p>
<p> <div class="shipment" value ="<?php echo $row['wr_subject'];?>" id="tankId<?php echo $i ?>"><?php echo $row['wr_subject'];?></div></p>
<p> <div><?php echo $row['wr_1'];?></div></p>
<p> <div><?php echo $row['wr_2'];?></div></p>
<p> <div><?php echo $row['wr_3'];?></div></p>
<p> <div><?php echo $row['wr_4'];?></div></p>
<p> <div><input type="text" name="wr_15" value="<?php echo $wr_15; ?>" id="wr_15" class="frm_input" size="10" placeholder="나가는 양"></div></p>
<p> <div><input type="text" name="wr_15" value="<?php echo $wr_15; ?>" id="wr_15" class="frm_input" size="10" placeholder="총나가는 양"></div></p>
<p> <div><input type="button" id="addButton" value="tankId<?php echo $i ?>" onclick="addWord(this)" value="추가"></div></p>
<p> <?}?></p>
<p> </div></p>
<p>
</p>
<p> </div> </p>
<p> <div style="display:grid;"> </p>
<p> <div style="display:grid; grid-template-columns: repeat(6, 1fr); border:1px solid red;"></p>
<p> <div>번호</div></p>
<p> <div>나가는 양</div></p>
<p> <div>무게</div></p>
<p> <div>총나가는 양</div></p>
<p> <div>단가</div></p>
<p> <div>총 금액</div></p>
<p> </div></p>
<p> <div id="addWordForm" style="display:grid; grid-template-columns: repeat(6, 1fr); border:1px solid red;"></p>
<p> </p>
<p> </div></p>
<p> <div style="display:grid; grid-template-columns: repeat(6, 1fr); border:1px solid red;"></p>
<p> <div>합계</div></p>
<p> <div><input type="number" id="misuSum"readonly></div></p>
<p> <div><input type="number" id="miSum" readonly></div></p>
<p> <div><input type="number" id="weightSum" readonly></div></p>
<p> <div><input type="number" id="oneSum" readonly></div></p>
<p> <div><input type="number" id="moneySum" readonly></div></p>
<p> </div></p>
<p> </div></p>
<p> </p>
<p> </p>
<p> </p>
<p> </div> </p>
<p> </p>
<p> <?php if ($is_use_captcha) { //자동등록방지 ?></p>
<p> <div class="write_div"></p>
<p> <?php echo $captcha_html ?></p>
<p> </div></p>
<p> <?php } ?></p>
<p> </p>
<p> <div class="btn_confirm write_div"></p>
<p> <a href="<?php echo get_pretty_url($bo_table); ?>" class="btn_cancel btn">취소</a></p>
<p> <button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">작성완료</button></p>
<p> </div></p>
<p> </form></p>
<p>
</p>
<p> <script> </p>
<p> </p>
<p> let tankId1 = document.getElementById("tankId0").getAttribute('value');</p>
<p> let tankId2 = document.getElementById("tankId1").getAttribute('value');</p>
<p> let tankId3 = document.getElementById("tankId2").getAttribute('value');</p>
<p> let tankId4 = document.getElementById("tankId3").getAttribute('value');</p>
<p> </p>
<p> function addWord(e){</p>
<p> let tankName = document.getElementById(e.value);</p>
<p> let tankIdRandom = tankName.getAttribute('value');</p>
<p> console.log(e.value);</p>
<p> console.log(tankIdRandom);</p>
<p> $("#addWordForm").append("<div>"+tankIdRandom+"</div>");</p>
<p> $("#addWordForm").append("<div><input id='misuClass' type='text'></div>");</p>
<p> $("#addWordForm").append("<div><input class='miClass' type='text'></div>");</p>
<p> $("#addWordForm").append("<div><input class='weightClass' type='text'></div>");</p>
<p> $("#addWordForm").append("<div><input class='oneClass' type='text'></div>");</p>
<p> $("#addWordForm").append("<div><input class='moneyClass' type='text'></div>");</p>
<p> }</p>
<p> </p>
<p> $('#misuClass').on('keydown', function(){</p>
<p> $('#misuSum').val(Number($('#misuClass').val()))</p>
<p> });</p>
<p> </p>
<p> <?php if($write_min || $write_max) { ?></p>
<p> // 글자수 제한</p>
<p> var char_min = parseInt(<?php echo $write_min; ?>); // 최소</p>
<p> var char_max = parseInt(<?php echo $write_max; ?>); // 최대</p>
<p> check_byte("wr_content", "char_count");</p>
<p> </p>
<p> $(function() {</p>
<p> $("#wr_content").on("keyup", function() {</p>
<p> check_byte("wr_content", "char_count");</p>
<p> });</p>
<p> });</p>
<p>
감사합니다!
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
마르스컴퍼니
Expert
4년 전
1) 합계
: 다음과 같이 수정해야 됩니다. id는 여러 엘리먼트가 중복으로 사용될 수 없습니다. (class 는 가능) https://penguingoon.tistory.com/116
</p>
<p>$("#addWordForm").append("<div><input id='misuClass' type='text'></div>");</p>
<p>->
</p>
<p>$("#addWordForm").append("<div><input class='misuClass' type='text'></div>");</p>
<p>
</p>
<p>$('#misuClass').on('keydown', function(){
$('#misuSum').val(Number($('#misuClass').val()))
});</p>
<p>->
</p>
<p>$('.misuClass').on('keydown', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});</p>
<p>
2) data-xx 속성을 이용하는 방법이 있습니다. https://www.nextree.co.kr/p10155/
</p>
<p><div><input type="button" id="addButton" value="tankId<?php echo $i ?>" onclick="addWord(this)" value="추가"></div></p>
<p>->
</p>
<p><div><input type="button" class="addButton" data-num="<?php echo $i ?>" value="추가"></div></p>
<p>
</p>
<p>function addWord(e){
let tankName = document.getElementById(e.value);
let tankIdRandom = tankName.getAttribute('value');
console.log(e.value);
console.log(tankIdRandom);</p>
<p>~</p>
<p>}</p>
<p>->
</p>
<p>$('.addButton').on('click', function() {</p>
<p> let tankIdRandom = $(this).data('num');</p>
<p>~</p>
<p>});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 4개
�
승슝
4년 전
�
마르스컴퍼니
4년 전
동적으로 생성된 엘리멘트라서 다음과 같이 변경해야 될 것 같습니다.
[code]
$(document).on('keydown', '.misuClass', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});
[/code]
[code]
$(document).on('keydown', '.misuClass', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});
[/code]
�
승슝
4년 전
정말 감사합니다!!ㅠㅠ 덕분에 잘 해결되었습니다!
그런데 한가지 더 묻고 싶은게
제가 알려주신 것을 참고해서
[code]
<div><input type="button" onclick="addButton(this)" data-num="tankId<?php echo $i ?>" value="추가"></div>
[/code]
[code]
function addButton(e){
let tankName = $(e).data('num');
console.log(tankName);
let tankIdRandom = document.getElementById(tankName).getAttribute('value');
console.log(tankIdRandom);
$("#addWordForm").append("<div>"+tankIdRandom+"</div>");
$("#addWordForm").append("<div><input class='misuClass1' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass2' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass3' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass4' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass5' type='text'></div>");
}
[/code]
로 변경하여 하고 있는데 tankIdRandom을 딱 한번만 추가하고 다음에 중복으로 추가하는 것을 막으려고 하는데 어떻게 하면 좋을까요?
이미 입력된 값들은 배열로 담아서 배열에 있는 것들과 비교하는 것이 좋을까요?
그런데 한가지 더 묻고 싶은게
제가 알려주신 것을 참고해서
[code]
<div><input type="button" onclick="addButton(this)" data-num="tankId<?php echo $i ?>" value="추가"></div>
[/code]
[code]
function addButton(e){
let tankName = $(e).data('num');
console.log(tankName);
let tankIdRandom = document.getElementById(tankName).getAttribute('value');
console.log(tankIdRandom);
$("#addWordForm").append("<div>"+tankIdRandom+"</div>");
$("#addWordForm").append("<div><input class='misuClass1' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass2' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass3' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass4' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass5' type='text'></div>");
}
[/code]
로 변경하여 하고 있는데 tankIdRandom을 딱 한번만 추가하고 다음에 중복으로 추가하는 것을 막으려고 하는데 어떻게 하면 좋을까요?
이미 입력된 값들은 배열로 담아서 배열에 있는 것들과 비교하는 것이 좋을까요?
�
마르스컴퍼니
4년 전
[code]
var cnt = 0;
function addButton(e){
let tankName = $(e).data('num');
console.log(tankName);
let tankIdRandom = document.getElementById(tankName).getAttribute('value');
console.log(tankIdRandom);
if (cnt == 0)
$("#addWordForm").append("<div>"+tankIdRandom+"</div>");
$("#addWordForm").append("<div><input class='misuClass1' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass2' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass3' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass4' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass5' type='text'></div>");
cnt++;
}
[/code]
var cnt = 0;
function addButton(e){
let tankName = $(e).data('num');
console.log(tankName);
let tankIdRandom = document.getElementById(tankName).getAttribute('value');
console.log(tankIdRandom);
if (cnt == 0)
$("#addWordForm").append("<div>"+tankIdRandom+"</div>");
$("#addWordForm").append("<div><input class='misuClass1' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass2' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass3' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass4' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass5' type='text'></div>");
cnt++;
}
[/code]
댓글을 작성하려면 로그인이 필요합니다.
4년 전
일단 addWord() 함수에서 DOM을 append 할때
id='misuClass' 아이디가 겹치고요 (추가할 때마다 여러개)
쿼리 for() 문에서 id="addButton" 가 겹치네요 (여러개)
name="wr_15" id="wr_15" 도 겹치고요
html 먼저 정리하셔야 할 듯 싶네요
misuClass 에 keydown 했을 때
여러개의 misuClass 의 value 를 더해야하므로
each() 돌려야하지 않을까 싶고요
var sum = 0;
$.each($('.misuClass'), function() {
sum += parseInt($(this).val());
});
이런식으로?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
B
Big1
4년 전
keydown 보다는 keyup을 쓰시는게 나을 듯
�
승슝
4년 전
위에 고수님이 알려주신대로
[code]
$('.misuClass').on('change', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});
[/code]
변화했을 때 동작하도록 함수를 만들었는데
append함수에는 class가 적용이 되지 않는건지 잘 모르겠는데 잘 동작하지 않습니다ㅠㅠ
[code]
$('.misuClass').on('change', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});
[/code]
변화했을 때 동작하도록 함수를 만들었는데
append함수에는 class가 적용이 되지 않는건지 잘 모르겠는데 잘 동작하지 않습니다ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
해보면서 문제가 append함수때문일 수도 있다고 생각했습니다!! 다른 곳에서 id나 class를 지정해서 값을 더하려고 하면 잘 되는데 append로 했을때만 잘 작동하지 않아 질문드립니다ㅠㅠ