회원 정보 수정폼에서 닉네임 변경 버튼을 클릭하면 팝업페이지가 뜨고, 팝업 페이지에서 닉네임 중복확인 버튼을 눌러서 사용할 수 있는 닉네임이면 confirm창이 뜹니다.
confirm창에서 확인 버튼을 누르면 창이 닫히고, 회원 정보 수정폼에 닉네임 값이 반영되게끔 만들었습니다.
- 회원 정보 수정폼
//팝업 띄우는 함수
function showPopup(){
PopupCenter("popup_page.jsp","팝업창",800,600);
}
//팝업을 중앙에 원하는 페이지를 원하는 크기로 띄우는 함수
function PopupCenter(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
}
function inputName(nName){
frm.name.value=nName;
}회원 정보 수정폼에서 밑의 코드로 팝업창의 값을 받아왔습니다.
function inputName(nName){
frm.name.value=nName;
}-팝업 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload=function(){
let btnName=document.querySelector("#btnName");
btnName.addEventListener("click", checkName);
}
function checkName(){
let useName=document.querySelector(".nName").value;
//alert(useName);
$.ajax({
url:"useName",
type:"post",
dataType:"json",
data:{useName:useName},
success: function(data){
name=0;
if(data.result=="y"){
if(document.querySelector("#nName").value.length>document.querySelector("#nName").size){
alert("닉네임을 20글자 이내로 입력해주세요");
frm.nName.focus();
return;
}
if(useName==""){
alert("닉네임을 입력하세요");
frm.nName.focus();
}else{
if(confirm("사용할 수 있는 닉네임입니다.\n사용하시겠습니까?")===true){
let nName=document.frm.nName.value;
window.opener.inputName(nName);
self.close();
}
}
}else if((data.result=="n")){
alert("사용할 수 없는 닉네임입니다.");
}
},
error:function(){
alert("에러 발생");
}
});
}
</script>
</head>
<body>
<%
//로그인된 아이디가 있는지 확인
int userNo = (Integer) session.getAttribute("userNo");
%>
<h3>닉네임 변경</h3>
<!-- 닫기버튼 클릭시 아래 폼을 전송함 -->
<form action="close.jsp" method="post">
</form>
<!-- 팝업창에 닉네임을 사용하겠냐는 질문 confirm에서 확인 클릭시 아래 폼을 전송함. -->
<form id="modify2" method="post" action="modify2" name="frm">
<input type="hidden" name="userNo" value=<%=userNo %>>
닉네임
<input type="text" name="nName" id="nName" class="nName">
<input type="button" value="중복확인" id="btnName">
</form>
<input type="button" value="닫기" onclick="location.href='close.jsp'"></button>
</body>
</html>
팝업 페이지에서 밑의 코드로 값을 회원 정보 수정폼으로 넘겼습니다.
if(confirm("사용할 수 있는 닉네임입니다.\n사용하시겠습니까?")===true){
let nName=document.frm.nName.value;
window.opener.inputName(nName);
self.close();
}닉네임 변경 버튼 클릭 시 팝업창이 뜹니다.
이미 사용중인 닉네임을 쓰면 사용할 수 없다고 나옵니다.
사진 속에는 닉네임 input에 disaabled를 사용했었는데 값이 넘어가지 않아서 이후에 readonly로 바꿨습니다.
참고한 블로그 : https://ggoreb.tistory.com/70
'언어 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 textarea에 커서를 이동하는 방법 (0) | 2022.03.10 |
|---|---|
| [JavaScript] a 태그 post 방식으로 넘겨주기 (0) | 2022.03.10 |
| [JavaScript] 뒤로가기 이벤트 감지해서 막기 (0) | 2022.03.10 |
| [HTML] form 태그 엔터(Enter) 키 눌렀을 때 폼 전송 이벤트 막는 방법 (0) | 2022.03.10 |
댓글