Joung Jiwon

우편번호 API 추가 및 css 7차 수정

......@@ -346,7 +346,9 @@ select::-ms-expand {
"question-grade question-grade question-grade input-grade input-grade";
}
.input-home { grid-area: input-home; }
.input-home {
display : relative;
grid-area: input-home; }
.question-grade { grid-area: question-grade; }
......@@ -364,6 +366,35 @@ select::-ms-expand {
}
.button-address{
width:100px;
height:auto;
background-color: darkgrey;
border: none;
color:#fff;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px;
cursor: pointer;
}
#sample4_roadAddress{
width: 100%;
height: auto;
line-height : normal;
padding: .8em .5em;
font-family: inherit;
border: 1px solid #999;
border-radius: 0;
outline-style: none;
-webkit-appearance: none;
-moz-appearance: none; appearance: none;
}
#semester{
width: 200px;
padding: .2em .5em;
......
......@@ -29,14 +29,13 @@
<script type="text/css">
<script type="text/css">
window.onload = function(){
document.getElementById('btn').onclick = function(){
document.getElementById('frm').submit();
return false;
};
};
</script>
</head>
......@@ -82,12 +81,15 @@
<div class="grid-container">
<div class="question-field question-home">어디에 사나요?</div>
<div class="input-field input-home">
<label for="question-input-field"></label>
<input type="text" id="start"></div>
<input type="button" class="button-address" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample4_roadAddress" placeholder="도로명주소">
<span id="guide" style="color:#999;display:none"></span>
</div>
<div class="question-field question-school">무슨 학교에 다니나요?</div>
<div class="input-school">
<label for="question-input-field"></label>
<input type="text" id="end">
<input type="button" class="button-address" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample4_roadAddress" placeholder="도로명주소">
<span id="guide" style="color:#999;display:none"></span>
</div>
<div class="question-field question-grade">몇학년인가요?</div>
<div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
......@@ -164,6 +166,43 @@
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script> //도로명주소
function sample4_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById("sample4_roadAddress").value = roadAddr;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
}
}
}).open();
}
</script>
<script> //dropdown list
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
......