개발자 굿럭김의 블로그
[팝업] 자식창의 값을 부모창으로 전달하기 본문
studyPopup.jsp
<script type="text/javascript">
$(function(){
$('#oBtn').click(function(event) {
oPopupOpen();
});
$('#cBtn').click(function(event) {
cPopupOpen();
});
});
// 주문조회 팝업창
function oPopupOpen() {
var url = "/customer/orderPopupList.do";
var winWidth = 1000;
var winHeight = 500;
var popupOption = "width=" + winWidth + ", height=" + winHeight;
window.open(url,"",popupOption);
}
// 고객조회 팝업창
function cPopupOpen() {
var url = "/customer/customerPopupList.do";
var winWidth = 1000;
var winHeight = 500;
var popupOption = "width=" + winWidth + ", height=" + winHeight;
window.open(url,"",popupOption);
}
// 주문 테이블 정보 채우기
function setOrdNumber(cno, cname, hp, email, no, name, code){
document.getElementById("s_custno").value = cno;
document.getElementById("s_name").value = cname;
document.getElementById("s_hp1").value = hp.substring(0, 3);
document.getElementById("s_hp2").value = hp.substring(3, 7);
document.getElementById("s_hp3").value = hp.substring(7);
document.getElementById("s_email").value = email;
document.getElementById("u_ord_num").value = no;
document.getElementById("u_gdnm").value = name;
document.getElementById("schGoodsCd").value = code;
}
// 고객 테이블 정보 채우기
function setCustomer(no, name , hp, email){
document.getElementById("s_custno").value = no;
document.getElementById("s_name").value = name;
document.getElementById("s_hp1").value = hp.substring(0, 3);
document.getElementById("s_hp2").value = hp.substring(4, 8);
document.getElementById("s_hp3").value = hp.substring(9);
document.getElementById("s_email").value = email;
}
</script>
<body>
<table>
<tr>
<th style="text-align: left;">고객번호</th>
<td>
<input type="text" name="cno" id="s_custno" title="고객번호" size="60" class="only_number" value="${sform.cno}" valid='{"required":"true"}' readonly>
<button type="button" class="btn btn-default btn-sm" id="oBtn">주문조회</button>
<button type="button" class="btn btn-default btn-sm" id="cBtn">고객조회</button>
</td>
<th style="text-align: left;">고객명</th>
<td>
<input type="text" name="name" id="s_name" title="고객명" size="60" value="${sform.name}" valid='{"required":"true"}' readonly>
</td>
</tr>
<tr>
<th style="text-align: left;">핸드폰번호</th>
<td>
<select name="hp1" id="s_hp1">
<option value="010" <c:if test="${sform.hp1 == '010'}">selected='selected'</c:if>>010</option>
<option value="011" <c:if test="${sform.hp1 == '011'}">selected='selected'</c:if>>011</option>
<option value="016" <c:if test="${sform.hp1 == '016'}">selected='selected'</c:if>>016</option>
<option value="017" <c:if test="${sform.hp1 == '017'}">selected='selected'</c:if>>017</option>
<option value="018" <c:if test="${sform.hp1 == '018'}">selected='selected'</c:if>>018</option>
<option value="019" <c:if test="${sform.hp1 == '019'}">selected='selected'</c:if>>019</option>
</select>
-
<input type="text" size="6" id="s_hp2" name="hp2" class="only_number" maxlength="4" title="휴대폰번호 중간 자리" datatype="n" valid='{"required":"true" , "between": "3~4"}' readonly>
-
<input type="text" size="6" id="s_hp3" name="hp3" class="only_number" maxlength="4" title="휴대폰번호 뒷자리" datatype="n" valid='{"required":"true" , "min": "4"}' readonly>
<input type="hidden" name="hp" value="${sform.hp}">
</td>
<th style="text-align: left;">이메일</th>
<td>
<input type="text" name="email" id="s_email" title="이메일" size="60" value="${sform.email}" valid='{"required":"true"}' readonly>
</td>
</tr>
</table>
</body>
orderPopupList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description"
content="A Bootstrap 4 admin dashboard theme that will get you started. The sidebar toggles off-canvas on smaller screens. This example also include large stat blocks, modal and cards. The top navbar is controlled by a separate hamburger toggle button." />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Codeply">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
th {
background-color: #FAFAFA;
text-align: center;
}
#h5 {
padding-top: 20px;
}
</style>
<script type="text/javascript">
$(function() {
// 주문조회 모달창에서 검색 이벤트
$('#searchOrderBtn').on('click', function(){
var queryString = $("form[name=opForm]").serialize();
var keyWord = $('#oKeyWord').val();
var kwLen = keyWord.length;
console.log(kwLen);
if($.isNumeric(keyWord) == true){
alert('올바른 코드를 입력해주세요');
return false;
}
if(kwLen < 10) {
alert('10자 이상 입력하세요');
return false;
} else if(kwLen > 17) {
alert('17자 이하 입력하세요');
return false;
}
$('#opForm').attr('action', '/customer/orderPopupList.do').submit();
});
// input text에서 엔터키 누르면 submit 되는 것 방지
$("input[type='text']").keydown(function(e){
if(e.keyCode === 13)
e.preventDefault();
});
});
// 부모창의 function setOrdNumber 에 값을 전달
function setOrdNum(cno, cname, hp, email, no, name, code){
opener.setOrdNumber(cno, cname, hp, email, no, name, code);
window.close();
}
function goPage(page) {
document.opForm.page.value = page;
opForm.action = "/customer/orderPopupList.do";
opForm.submit();
}
</script>
</head>
<div class="container-fluid" id="main" style="padding-left: 0px; overflow: auto; height: 89%;">
<!-- 바디 시작, 이 div 내부를 이용하면 됨 -->
<div class='center-block col-md-12' style="height: 100%; padding-left: 100px; float: left;">
<h3>주문조회</h3>
<form id="opForm" name="opForm" method="post">
<input type="hidden" name="page" id="page" value="${sform.page}">
<br>
<select id="schKind" name="schKind">
<option value="1" <c:if test="${sform.schKind == '1'}">selected='selected'</c:if>>주문번호</option>
</select>
<input type="text" name="keyWord" id="oKeyWord" size="30">
<button type="button" id="searchOrderBtn" class="btn btn-default btn-sm">검색</button>
<div><br></div>
<table class="table table-bordered" style="width:90%;">
<thead>
<tr>
<th width="25%">주문번호</th>
<th width="60%">상품명</th>
<th>상품코드</th>
</tr>
</thead>
<c:choose>
<c:when test="${fn:length(sform.pgt3) > 0}">
<c:forEach items="${sform.pgt3}" var="grid">
<tbody id="otr">
<tr>
<td><a href="javascript:setOrdNum('${grid.cno}', '${grid.name}', '${grid.hp}', '${grid.email}','${grid.ordNum}','${grid.gdnm}','${grid.gdcd}')">${grid.ordNum}</a></td>
<td>${grid.gdnm}</td>
<td>${grid.gdcd}</td>
</tr>
</tbody>
</c:forEach>
</c:when>
<c:otherwise>
<tbody>
<tr><td colspan="5" align=center> 자료가 존재하지 않습니다. </td></tr>
</tbody>
</c:otherwise>
</c:choose>
</table>
</form>
</div>
주문번호 입력 후 검색
4개의 행 중 문의 넣을 상품 한 개 선택
전부 빈 칸 상태였으나 주문번호를 선택 후 자식창의 값을 부모창으로 전달 완료
'Javascript' 카테고리의 다른 글
| datepicker 기간 버튼 만들기 (0) | 2019.05.27 |
|---|---|
| 다중 셀렉트박스 동적 생성 (0) | 2019.05.27 |
'Javascript' Related Articles
more
