IT 관련,,/Java관련 언어들

[웹/JS]자바스크립트 function사용해서 페이지 넘기기~!!

IT깡패's 2020. 7. 24. 21:35
728x90
반응형
SMALL

안녕하세요~ㅎㅎ 

IT깡패's인데요~ㅎㅎㅎ

자바스크립트에서 input창으로 function함수를 사용해서 페이지 넘기는 방법에 대해서 알아보겠습니다~!!

 

여기서 넘기는 방법은 두가지있는데요~

js파일을 써서 사용하던지 스크립트를 바로 써서 사용하는 방법들인데요~!!

 

* js파일 써서 사용하는 방법

-a123.html

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

</style>
<script type="text/javascript" src="script.js"></script>
<!-- <script type="text/javascript">
function inputCheck(){
	//alert(1);
	
	str = "입력한 항목은\n"; 
	
	//if(document.myform.title.value.length==0){
	if(document.myform.title.value==""){
		alert("제목입력하세요");
		return false;
	}
	
	if(document.myform.author.value==""){
		alert("저자입력하세요");
		return false;
	}
	
	if(document.myform.publisher.value==""){
		alert("출판사입력하세요");
		return false;
	}
	
	if(document.myform.price.value==""){
		alert("가격입력하세요");
		return false;
	}
	
	if(isNaN(document.myform.price.value)){
		alert("가격은 숫자로 입력하세요");
		//document.myform.price.value="";
		document.myform.price.select();
		return false;
	}
	
	if(document.myform.date.value==""){
		alert("입고일 입력하세요");
		return false;
	}
	
	str += document.myform.title.value+"\n";
	str += document.myform.author.value+"\n";
	str += document.myform.publisher.value+"\n";
	str += document.myform.price.value+"\n";
	str += document.myform.date.value+"\n";
	
	
	var len = document.myform.kind.length; // 2
	flag = false;
	for(var i=0;i<len;i++){
		if(document.myform.kind[i].checked == true){
			str += document.myform.kind[i].value +"\n";
			flag = true;
		}
	}
	
	if(flag == false){
		alert("배송비 유무를 선택하세요");
		return false;
	}
	
	var len = document.myform.bookstore.length; // 4
	flag = false;
	for(var i=0;i<len;i++){
		if(document.myform.bookstore[i].checked == true){
			flag = true;
			str += document.myform.bookstore[i].value+" ";
		}
	}
	str += "\n";
	
	if(flag == false){
		alert("서점 최소 하나는 선택하세요");
		return false;
	}
	
	/* if(document.myform.count.value=="선택"){
		alert("보유 수량을 선택하세요");
		return false;
	} */
	
	index = document.myform.count.selectedIndex;
	if(index == 0){
		alert("보유 수량을 선택하세요");
		return false;
	}
	str += document.myform.count.value;
	
	alert(str);
	
}
</script> -->
</head>
<body>  
	<h1>도서 정보 입력</h1>
	<form name="myform" action="Result.jsp" method="post">
		<table border=1>
			<tr>
				<td>제목</td>
				<td><input type="text" name="title" id="title">
			</tr>
			<tr>
				<td>저자</td>
				<td><input type="text" name="author" id="author">
			</tr>
			<tr>
				<td>출판사</td>
				<td><input type="text" name="publisher" id="publisher">
			</tr>
			<tr>
				<td>가격</td>
				<td><input type="text" name="price" id="price">
			</tr>
			<tr>
				<td>입고일</td>
				<td><input type="date" name="date" id="date">
			</tr>

			<tr>
				<td>배송비</td>
				<td>유료 <input type="radio" name="kind" id="kind" value="유료"> 
					무료 <input type="radio" name="kind" id="kind" value="무료">
			</tr>
			<tr>
				<td>구입가능 서점</td>
				<td>교보문고 <input type="checkbox" name="bookstore" value="kyobo">
					알라딘 <input type="checkbox" name="bookstore" value="aladin">
					yes24 <input type="checkbox" name="bookstore" value="yes24">
					인터파크 <input type="checkbox" name="bookstore" value="interpark">
			</tr>
			<tr>
				<td>보유수량</td>
				<td><select name="count" id="count">
						<option value="선택">선택
						<option value="1">1
						<option value="2">2
						<option value="3">3
						<option value="4">4
						<option value="5">5
				</select></td>
			</tr>

		</table>
		<br> <input type="submit" value="전송" onclick="return inputCheck()"> 
		<input type="reset"	value="취소">
	</form>
</body>
</html>

<!-- 
제목 누락 체크
저자 누락 체크
출판사 누락 체크
가격 누락 체크
가격은 숫자만 입력 가능
입고일 누락 체크
배송비  누락 체크
서점  누락 체크 : 1개는반드시 선택, 실제로2개이상 선택
보유수량 누락 체크
입력한 모든것 alert에 출력하고 jsp로 넘어가기

 -->

 

- script.js

function inputCheck(){
		//alert(1);
		
		str = "입력한 항목은\n"; 
		
		//if(document.myform.title.value.length==0){
		if(document.myform.title.value==""){
			alert("제목입력하세요");
			return false;
		}
		
		if(document.myform.author.value==""){
			alert("저자입력하세요");
			return false;
		}
		
		if(document.myform.publisher.value==""){
			alert("출판사입력하세요");
			return false;
		}
		
		if(document.myform.price.value==""){
			alert("가격입력하세요");
			return false;
		}
		
		if(isNaN(document.myform.price.value)){
			alert("가격은 숫자로 입력하세요");
			//document.myform.price.value="";
			document.myform.price.select();
			return false;
		}
		
		if(document.myform.date.value==""){
			alert("입고일 입력하세요");
			return false;
		}
		
		str += document.myform.title.value+"\n";
		str += document.myform.author.value+"\n";
		str += document.myform.publisher.value+"\n";
		str += document.myform.price.value+"\n";
		str += document.myform.date.value+"\n";
		
		
		var len = document.myform.kind.length; // 2
		flag = false;
		for(var i=0;i<len;i++){
			if(document.myform.kind[i].checked == true){
				str += document.myform.kind[i].value +"\n";
				flag = true;
			}
		}
		
		if(flag == false){
			alert("배송비 유무를 선택하세요");
			return false;
		}
		
		var len = document.myform.bookstore.length; // 4
		flag = false;
		for(var i=0;i<len;i++){
			if(document.myform.bookstore[i].checked == true){
				flag = true;
				str += document.myform.bookstore[i].value+" ";
			}
		}
		str += "\n";
		
		if(flag == false){
			alert("서점 최소 하나는 선택하세요");
			return false;
		}
		
		/* if(document.myform.count.value=="선택"){
			alert("보유 수량을 선택하세요");
			return false;
		} */
		
		index = document.myform.count.selectedIndex;
		if(index == 0){
			alert("보유 수량을 선택하세요");
			return false;
		}
		str += document.myform.count.value;
		
		alert(str);
		
	}

 

* 두번째 스크립트로 처리하는 방법

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

</style>
<!-- <script type="text/javascript" src="script.js"></script> -->
<script type="text/javascript">
function inputCheck(){
	//alert(1);
	
	str = "입력한 항목은\n"; 
	
	//if(document.myform.title.value.length==0){
	if(document.myform.title.value==""){
		alert("제목입력하세요");
		return false;
	}
	
	if(document.myform.author.value==""){
		alert("저자입력하세요");
		return false;
	}
	
	if(document.myform.publisher.value==""){
		alert("출판사입력하세요");
		return false;
	}
	
	if(document.myform.price.value==""){
		alert("가격입력하세요");
		return false;
	}
	
	if(isNaN(document.myform.price.value)){
		alert("가격은 숫자로 입력하세요");
		//document.myform.price.value="";
		document.myform.price.select();
		return false;
	}
	
	if(document.myform.date.value==""){
		alert("입고일 입력하세요");
		return false;
	}
	
	str += document.myform.title.value+"\n";
	str += document.myform.author.value+"\n";
	str += document.myform.publisher.value+"\n";
	str += document.myform.price.value+"\n";
	str += document.myform.date.value+"\n";
	
	
	var len = document.myform.kind.length; // 2
	flag = false;
	for(var i=0;i<len;i++){
		if(document.myform.kind[i].checked == true){
			str += document.myform.kind[i].value +"\n";
			flag = true;
		}
	}
	
	if(flag == false){
		alert("배송비 유무를 선택하세요");
		return false;
	}
	
	var len = document.myform.bookstore.length; // 4
	flag = false;
	for(var i=0;i<len;i++){
		if(document.myform.bookstore[i].checked == true){
			flag = true;
			str += document.myform.bookstore[i].value+" ";
		}
	}
	str += "\n";
	
	if(flag == false){
		alert("서점 최소 하나는 선택하세요");
		return false;
	}
	
	/* if(document.myform.count.value=="선택"){
		alert("보유 수량을 선택하세요");
		return false;
	} */
	
	index = document.myform.count.selectedIndex;
	if(index == 0){
		alert("보유 수량을 선택하세요");
		return false;
	}
	str += document.myform.count.value;
	
	alert(str);
	
}
</script>
</head>
<body>  
	<h1>도서 정보 입력</h1>
	<form name="myform" action="Result.jsp" method="post">
		<table border=1>
			<tr>
				<td>제목</td>
				<td><input type="text" name="title" id="title">
			</tr>
			<tr>
				<td>저자</td>
				<td><input type="text" name="author" id="author">
			</tr>
			<tr>
				<td>출판사</td>
				<td><input type="text" name="publisher" id="publisher">
			</tr>
			<tr>
				<td>가격</td>
				<td><input type="text" name="price" id="price">
			</tr>
			<tr>
				<td>입고일</td>
				<td><input type="date" name="date" id="date">
			</tr>

			<tr>
				<td>배송비</td>
				<td>유료 <input type="radio" name="kind" id="kind" value="유료"> 
					무료 <input type="radio" name="kind" id="kind" value="무료">
			</tr>
			<tr>
				<td>구입가능 서점</td>
				<td>교보문고 <input type="checkbox" name="bookstore" value="kyobo">
					알라딘 <input type="checkbox" name="bookstore" value="aladin">
					yes24 <input type="checkbox" name="bookstore" value="yes24">
					인터파크 <input type="checkbox" name="bookstore" value="interpark">
			</tr>
			<tr>
				<td>보유수량</td>
				<td><select name="count" id="count">
						<option value="선택">선택
						<option value="1">1
						<option value="2">2
						<option value="3">3
						<option value="4">4
						<option value="5">5
				</select></td>
			</tr>

		</table>
		<br> <input type="submit" value="전송" onclick="return inputCheck()"> 
		<input type="reset"	value="취소">
	</form>
</body>
</html>

<!-- 
제목 누락 체크
저자 누락 체크
출판사 누락 체크
가격 누락 체크
가격은 숫자만 입력 가능
입고일 누락 체크
배송비  누락 체크
서점  누락 체크 : 1개는반드시 선택, 실제로2개이상 선택
보유수량 누락 체크
입력한 모든것 alert에 출력하고 jsp로 넘어가기

 -->

 

이제 결과창을 확인해봅시다~!!

 

이렇게 해서 자바스크립트를 써서 사용하다보면 function과 input창의 id, onclick을 이용하여 페이지를 넘겨야되는

상황이 있는데요~

이 때 이렇게 알아두시면 되시고요~ onclick에 넣은 값을 스크립트 function 이름으로 주고 실행시키면 성공

시킬 수 있습니다~!!

728x90
반응형
LIST
저작자표시 비영리 동일조건

'IT 관련,, > Java관련 언어들' 카테고리의 다른 글

[웹/jQuery]제이쿼리 Json에 대해서 알아보자~!!  (0) 2020.08.02
[웹/jQuery]ajax에 대한 내용~!!  (0) 2020.08.02
[웹/JS]자바스크립트 경고창에 대한 내용들~!!  (0) 2020.07.17
[Java/쓰레드]Thread를 이용해 sleep를 실행시켜보자~!!  (0) 2020.06.20
[php/개발자]웹사이트 결제모듈 연동시키기~!!  (1) 2020.01.24

'IT 관련,,/Java관련 언어들'의 다른글

  • 현재글[웹/JS]자바스크립트 function사용해서 페이지 넘기기~!!

관련글

티스토리툴바