깃허브
https://github.com/sblee1031/Kosta/blob/main/ORACLE_DB_THEOTY/Oracle_DB_project/myweb/myfront/WebContent/signup.html
searchzip.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>searchzip</title>
<link rel="stylesheet" href="./css/basic.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
form.signup > label > span::after {
content: ' : ';
}
* {
box-sizing: border-box;
}
div.divSearchzip {
width: 500px;
}
input[type='search']:focus {
background-color: lightcoral;
}
div.divSearchzip > ul {
list-style-type: none;
padding: 10px 0px;
}
div#addres_no {
text-align: center;
margin-top: 10px;
width: 350px;
border-width: 1px;
border-style: solid;
}
div.divSearchzip > ul > li {
margin-bottom: 10px;
}
div.divSearchzip > ul > li:hover {
background-color: beige;
}
</style>
<script>
$(function () {
//window.addEventListener('load', function () {
var liObjArr = document.querySelectorAll('div.divSearchzip>ul>li');
liObjArr.forEach(function (e, i) {
e.addEventListener('click', function () {
//클릭된 현재요소의 하위요소중 class속성값이 zipcode인 span값 우편번호값 얻기
// console.log(this);
// var zipcode = this.querySelector('span.zipcode').innerHTML;
var zipcode = this.childNodes[1].innerHTML;
//var zipcode = $(this).find('span.zipcode').text();
console.log(zipcode);
// class속성값이 baseaddr인 span값 : 기본주소값 얻기
//var baseaddr = 'baseaddr1';
var baseaddr = this.childNodes[2].innerHTML;
console.log(baseaddr);
// var baseaddr = this.querySelector('span.baseaddr').innerHTML;
//값들을 메인창의 div영역에 넣기
var parent = window.opener;
// var mainWindow = self.opener;
parent.document.querySelector('input[id=addrNum]').value = zipcode;
//$('input[id=addrNum]',mainWindow.document).val(zipcode);
parent.document.querySelector('input.baseaddr').value = baseaddr;
//$('input.baseaddr',mainWindow.document).val(baseaddr);
// 현재창 닫기
self.close();
});
});
var $btnObj = $('button[type=search]');
$btnObj.click(function (event) {
$.ajax({
url: './searchzip',
method: 'post',
data: { doro: '세종캠퍼스' },
success: function (responseData) {
alert('도로명주소 검색 성공');
//alert(responseData);
},
error: function (xhr) {
alert('도로명 주소 검색 실패' + xhr.status);
},
});
event.preventDefault();
});
});
</script>
</head>
<body>
<form class="signup" method="post" action="http://wwww.daum.net">
<label>
<span>도로명 주소</span>
<input
type="search"
name="doro"
required
placeholder="도로명주소를 입력하세요"
/> </label
><button type="search">조회</button><br />
<div class="divSearchzip">
<ul>
<li>
<span class="zipcode">30019</span
><span class="baseaddr">세종특별시 조치원읍 세종로 2511</span>
</li>
<li>
<span class="zipcode">30016</span
><span class="baseaddr">세종특별시 조치원읍 세종로 2639</span>
</li>
</ul>
</div>
</form>
</body>
</html>
signup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>가입</title>
<link rel="stylesheet" href="./css/basic.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
var $idObj = $('input[name=id]');
var $submitObj = $('button[type=submit]');
$idObj.click(function () {
$submitObj.hide();
});
var $idchkObj = $('input[type=button]');
$idchkObj.click(function () {
if ($idObj.val() == 'id9') {
$submitObj.show();
}
});
var $btnAddrSearchObj = $('button[name=addrsearch]');
$btnAddrSearchObj.click(function () {
// btOpenObj.addEventListener('click', function () {
var win;
var url = './searchzip.html';
var name = 'searchzip';
var opt = 'width=400 height=300';
win = window.open(url, name, opt);
});
});
</script>
<style>
/* * {
box-sizing: border-box;
} */
form.signup > label > span::after {
content: ' : ';
}
form.signup > button[type='submit'] {
display: block;
}
input#addres_search {
width: 70px;
}
form.signup input:focus {
background-color: azure;
}
form.signup input {
outline: none;
}
form.signup input[name='pwd'],
form.signup input.pwd1,
form.signup input[name='name'],
form.signup input.baseaddr,
form.signup input[name='addr'] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
}
</style>
</head>
<body>
<form class="signup" method="post" action="http://wwww.daum.net">
<label>
<span>ID</span>
<input
type="text"
name="id"
required
placeholder="아이디를 입력하세요"
/> </label
><input type="button" value="아이디 중복" /><br />
<label>
<span>비밀번호</span>
<input type="password" name="pwd" required /></label
><br />
<label>
<span>비밀번호 확인</span>
<input type="password" class="pwd1" required /></label
><br />
<label>
<span>이름</span>
<input type="text" name="name" required /> </label
><br />
<label>
<span>주소</span>
<input id="addrNum" type="text" readonly maxlength="5" /> </label
><button name="addrsearch" type="button">우편번호검색</button><br />
<input class="baseaddr" type="text" required readonly /><br />
<input type="text" name="addr" required /><br />
<button type="submit">가입</button
><!--실제 input type="submit" 기능-->
</form>
</body>
</html>
'KOSTA > HTML' 카테고리의 다른 글
| 21.06.18 - JavaScript 이벤트 버블링 (0) | 2021.06.18 |
|---|---|
| 21.06.17 - JavaScript -> jQuery 변경하기(예제, eventhandler.html ) (0) | 2021.06.17 |
| 21.06.17 - jQuery (0) | 2021.06.17 |