[노트] JavaScript 팝업 , validation

1. 팝업창으로 데이터 자동 입력

기존 입력폼은 클릭시 팝업창 연결 함수 > readonly ( disabled 시 함수 실행 X )

 

팝업창을 띄우고 해당 정보를 클릭하면 자동으로 데이터 입력 될 수 있도록 한다.

팝업창에는 zTreeNode 로 되어있는 트리구조의 노드를 그렸고,

트리구조가 선택되었을때 데이터 입력 및 팝업창을 종료한다.

 

InputForm.jsp

function openPopUp(){
		var popupUrl = "/user/popUp";
		var loc_X = 500;
		var loc_Y = 100;
		window.open(popupUrl,"popup","height=350,width=270,left=" + loc_X +",top=" + loc_Y);
	}

데이터를 불러오기 위해 Controller 로 넘긴다. ( Controller / Service 생략 ) 

 

PopUp.jsp

$(document).on('click', '.SelectedNode', function(){
    	$(opener.document).find("#Code").val($(this).attr("title"));
    	$(opener.document).find("#Name").val($(this).first().find('span').text());
    	closePopUp();
	});

트리구조가 그려져 있는 상태에서 , 

클릭 되었을때 'selectedNode' (A) 클래스 태그에 있는 

이전 입력폼에 있는 #Code 의 값을 > (A)안에 속성이 title 인 값을 입력 

이전 입력폼에 있는 #Name 의 값을 > (A)의 첫째 노드 이후의 span 태그인 것을 찾아 그안의 텍스트 값을 입력

 

 

2. 필수값 입력 체크  

  - select 클래스의 모든 값이 입력이 되어야만 true로 리턴되도록 함.

 * Before : .each의 function 구문이 동작하지 않음 

             ( 아래 변수 a 의 선언 없이 return false ; )

 * After : .each 구문에서의 return false 는 break 와 같기 때문에 변수를 지정하여 데이터도 함께 입력 

 

function validationType(){
	var a ;
	$(".select").each(function(){
		if($(this).val() == ''){
			a = false;
			return false;
		}
	})
	if($("input[name=Code]", "#Frm").val().trim() == ''){
		return false;
	}
	if($("input[name=Comment]", "#Frm").val().trim() == ''){
		return false;
	}	
	if(a == false){
		return false;
	}else{
		return true;
	}
}

 - select 클래스가 선언된 모든 값들을 .each 반복을 통해 체크 하면서

   True 일 경우, 변수 a의 값에 false 를 넣어주고 return false 를 통해 break 해준다.