자바스크립트에서 값이 참일 경우에만 폼 전송이 이루어지게 하는 예제이다.
<HTML><HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript">
function send(f) {
if (confirm('폼의 값을 전송할까요?')==1) {
f.submit();
window.close();
}
}
</script>
</HEAD>
<BODY>
<form name=bbsSearch action= "http://www.naver.com">
<input type=button value="보내기" onClick=send(this.form) >
</form>
</BODY>
</HTML>
설명
조건문에서 1은 참(true), 0 은 거짓(false)을 나타낸다.
send(form) 에서 f 은 호출할 때 전달받은 인자(객체, 값 등)를 담은 함수의 매개변수다.
onClick=send(this.form) 에서 this.form 이 send 함수의 f 변수에 담겨진다.
var f = <form name=bbsSearch action= "http://www.naver.com"> 와 같은 의미다.
하지만 자바스크립트에서는 위와 같이 적어 사용할 수 없고
this.form 대신에 직접 객체를 찾아 대입한다면
var f=document.forms['bbsSearch']; // form 중 이름이 bbsSearch 인 form 객체를 변수 f 에 대입
처럼 사용해야 한다.
onSubmit="return checkForm(this)" → 폼 전송이 이루어지기 전에 먼저 checkForm(this) 함수를 실행하고, 함수실행 결과로 전달 받은 값이 false라면 폼전송을 하지 않고, true라면 폼 전송을 해라.
자바스크립트 로그인 예제 파일이다. 첨부파일은 하단에 있으니 받아서 테스트해보면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="form1.css" />
</head>
<body>
<script>
function validateForm(){
var sform = document.forms["s_form"];
if(!sform.loginID.value){
alert('아이디를 입력하세요');
sform.loginID.focus();
return false;
}
if(sform.loginPW.value ==''){
alert('패스워드를 입력하세요');
return false;
}
}
</script>
<div class="container">
<h2>Form 예제1</h2>
<form name="s_form" method="post" action="form1.action.php" onsubmit="return validateForm();">
<table>
<tr>
<td>로그인 ID</td>
<td><input type="text" name="loginID" value=""></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="loginPW"></td>
</tr>
<tr>
<td colspan='2' align='center'><input type="submit" value="전송"></td>
</tr>
</table>
</fom>
</div>
</body>
</html> |
아래 예제는 전송 버튼에 onclick 를 추가해서 시도해본 예제다.
<form name="s_form" method="post" action="#"> 기본 action 경로를 파일명으로 지정하지 않고도 자바스크립트에서 추가해서 보낼 수 있다는 걸 확인할 수 있다.
만약 <form name="s_form" action="#"> 와 같이 method 방식을 지정하지 않으면 default 인 method="get" 으로 동작된다는 것도 알아두자.
자바스크립트 코드에서 sform.method = "post"; 를 추가해주면 POST 방식으로 전송된다.
즉, 이 예제는 Form 의 기본 속성을 자바스크립트가 제어할 수 있다는 걸 보여주는 예제이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="form1.css" />
</head>
<body>
<script>
function validateForm(){
var sform = document.forms["s_form"];
if(!sform.loginID.value){
alert('아이디를 입력하세요');
sform.loginID.focus();
return false;
}
if(sform.loginPW.value ==''){
alert('패스워드를 입력하세요');
sform.loginPW.focus();
return false;
}
sform.method = "post";
sform.action = "form1.action.php"; // 이 줄을 주석처리하면 어떤 결과가 될까?
}
</script>
<div class="container">
<h2>Form 예제2</h2>
<form name="s_form" method="post" action="#">
<table>
<tr>
<td>로그인 ID</td>
<td><input type="text" name="loginID" value=""></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="loginPW"></td>
</tr>
<tr>
<td colspan='2' align='center'><input type="submit" value="전송" onclick="return validateForm();"></td>
</tr>
</table>
</fom>
</div>
</body>
</html> |
여기서 onclick="return validateForm();" 대신에 onclick="validateForm();" 로 하면 어떤 현상이 발생할까?
아래에서 첫번째 것은 아이디, 패스워드 등을 물어보는 팝업창이 한번 뜨고 form 전송 이벤트가 바로 실행되는 걸 확인할 수 있을 것이다.
두번째 것은 form action 을 자바스크립트에서 지정해주었기 때문에 순차 실행을 하다가 return false 를 실행하고 나서 form action 을 실행할 수가 없기 때문에 화면이 action 파일명으로 넘어가지 못한다.
sform.action = "form1.action.php"; 를 if 조건문 위쪽에 적었다면 팝업창을 띄워 입력값을 확인하지만 값이 입력되지 않았음에도 불구하고 실행된다는 걸 확인할 수 있다.
<form name="s_form" method="post" action="form1.action.php"> <script>
function validateForm(){
var sform = document.forms["s_form"];
if(!sform.loginID.value){
alert('아이디를 입력하세요');
sform.loginID.focus();
return false;
}
if(sform.loginPW.value ==''){
alert('패스워드를 입력하세요');
sform.loginPW.focus();
return false;
}
}
</script>
|
<form name="s_form" method="post">
<script>
function validateForm(){
var sform = document.forms["s_form"];
if(!sform.loginID.value){
alert('아이디를 입력하세요');
sform.loginID.focus();
return false;
}
if(sform.loginPW.value ==''){
alert('패스워드를 입력하세요');
sform.loginPW.focus();
return false;
}
sform.method = "post";
sform.action = "form1.action.php";
}
</script>
|
jsfrm1.zip
도움이 되셨다면 00 00 해 주세요.
