* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
바코드를 입력하여 서버에 전송하고 입력결과를 다시 전송받아 리스트에 띄우는데는 성공했습니다.
문제는 전송받은 리스트에 각각 삭제버튼을 만들고 싶습니다.
리스트는 중복데이터가 있어 DB에서 id라는 uuid 일련번호를 받아 삭제버튼에 값을 지정하여 넣고 그 버튼을 누르면 del()이라는 함수가 실행되어 삭제버튼에 지정된 값을 서버로 전송하고 싶습니다.
fetch를 사용해서 리스트 수마다 버튼을 넣고 버튼마다 일련번호를 지정하는데는 성공을 했지만 버튼을 누를시 해당 버튼값이 서버로 전송되지 않고 첫번째 value 값만 전송이 됩니다.
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet" />
<title>시약 입출고 관리</title>
<style>
* {
font-family: "Gowun Batang", serif;
color: white;
}
body {
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg");
background-position: center;
background-size: cover;
}
h1 {
font-weight: bold;
}
.order {
width: 500px;
margin: 60px auto 0px auto;
padding-bottom: 60px;
}
.mybtn {
width: 100%;
}
.order>table {
margin: 40px 0;
font-size: 18px;
}
option {
color: black;
}
</style>
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
$("#order-box").empty();
fetch('/show').then((res) => res.json()).then((data) => {
let rows = data['result']
console.log(rows)
rows.forEach((a) => {
let id = a["id"];
let date = a["date"];
let name = a["name"];
let lot = a["lot"];
let exp = a["exp"];
// value에 id 변수값이 들어가게 했습니다.
let temp_html = ` <tr>
<td>${date}</td>
<td>${name}</td>
<td>${lot}</td>
<td>${exp}</td>
<td><button onclick="del_order()" id="id" value="${id}">삭제</button></td>
</tr>`;
$("#order-box").append(temp_html);
});
});
}
function save_order() {
let date = $("#date").val();
let barcode = $("#barcode").val();
let formData = new FormData();
formData.append("date_give", date);
formData.append("barcode_give", barcode);
fetch('/barcode', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
console.log(data);
alert(data["msg"]);
window.location.reload();
});
}
function del_order() {
// 해당 버튼의 value값이 id 변수에 들어가게 하고 싶습니다.
let del = $("#id").val();
let formData = new FormData();
formData.append("del_give", del);
fetch('/del', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
console.log(data);
alert(data["msg"]);
window.location.reload();
});
}
function enterkey() {
if (window.event.keyCode == 13) {
// 엔터키가 눌렸을 때 실행할 내용
save_order();
}
}
</script>
</head>
<body>
<div class="mask"></div>
<div class="order">
<h1>시약 입출고 관리</h1>
<div class="order-info">
<div class="input-group mb-3">
<span class="input-group-text">입고일</span>
<input id="date" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">바코드</span>
<input id="barcode" type="text" class="form-control" onkeyup="enterkey();" />
</div>
<button onclick="save_order()" type="button" class="btn btn-warning mybtn">입력</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">입고일</th>
<th scope="col">시약명</th>
<th scope="col">lot.No</th>
<th scope="col">Exp.date</th>
<th scope="col">삭제</th>
</tr>
</thead>
<tbody id="order-box">
<tr>
<td>230303</td>
<td>reagent</td>
<td>123456</td>
<td>230323</td>
<!-- 이부분에서 value에 일련번호가 들어가게 했습니다. -->
<td><button onclick="del_order()" id="id" value="test">삭제</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
