[Javascript] 구매자정보를 받는사람정보에 복사하기(쇼핑몰 주문)
2021. 3. 9. 22:37
구매자 정보 --> 받는사람 정보로 그대로 넘기기
쇼핑몰 주문시에 구매자 정보와 받는 사람정보가 일치할때 한번에 넘어가는걸 구현하는 것이 목표
들어가야할것 : 이름, 주소, 연락처, 이메일주소
일단 기본적인거 구현 해보고 추가로 할거 있으면 그때가서 추가해보기작동방식
1. 구매자 정보에 정보 넣기
2. 구매자와 일치합니까를 체크하면 같은 값이 받는사람정보에 넘어감
구매자 정보
| 이름 | |
|---|---|
| 주소 | |
| 연락처 |
받는사람정보
구매자와 일치합니까?
| 이름 | |
|---|---|
| 주소 | |
| 연락처 |
코드리뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>orderInfo</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("sameInfo").addEventListener("click", check, false);
//체크박스 클릭시 이벤트 작동
}
function check(){
var order = document.querySelectorAll("#orderInfo input"); //order input값 저장
var receiver = document.querySelectorAll("#receiverInfo input"); //receive input값 저장
for(var i=0; i<order.length;i++){
receiver[i].value = order[i].value; // 순서는 똑같으니 하나씩 넘겨줌
}
}
</script>
</head>
<body>
구매자 정보
<table border = "1" id = "orderInfo">
<tr>
<th>이름</th>
<td><input type = "text" name = "idInfo"></td>
</tr>
<tr>
<th>주소</th>
<td><input type = "text" name = "addInfo"></td>
</tr>
<tr>
<th>연락처</th>
<td><input type = "text" name = "phoneInfo"></td>
</tr>
</table>
<br>
<hr>
<br>
받는사람정보<br>
구매자와 일치합니까?
<input type = "checkbox" id = "sameInfo">
<table border = "1" id = "receiverInfo">
<tr>
<th>이름</th>
<td><input type = "text" name = "idInfo" ></td>
</tr>
<tr>
<th>주소</th>
<td><input type = "text" name = "addInfo"></td>
</tr>
<tr>
<th>연락처</th>
<td><input type = "text" name = "phoneInfo"></td>
</tr>
</table>
</body>
</html>기능 구현자체는 크게 어렵지 않았음 단지 테이블 구성하는게 조금 귀찮았을뿐!
+++ tistory에서 구현된 정보 옮기기가 계속 안되길래 확인해봤더니
이 부분에서 자꾸 에러가 난다;
정확한 원인은 몰라서 그냥 놔두기로 한다
코드가져다가 써보면 잘 됩니다~
'skill > 뭐든지 만들어보기' 카테고리의 다른 글
| [Spring] slack webhook 사용해서 message 보내기(환경설정 및 활용) (0) | 2021.06.08 |
|---|---|
| [JAVA] JSP/Servlet으로 카카오 로그인 구현하기 (0) | 2021.04.17 |
| [Javascript] todolist 구현 version.2 (0) | 2021.03.09 |
| javascript 조금 배우고 무작정 todolist 만들어보기 (0) | 2021.03.09 |