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