JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다.

예제 1

  • 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다.
  • Register를 클릭하면 ok.html로 이동합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      input, button { font-family: inherit; font-size: inherit; }
    </style>
  </head>
  <body>
    <h1>Register</h1>
    <form action="ok.html" method="POST">
      <p><input type="text" name="username" placeholder="Username" required></p>
      <p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
      <p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
      <p><input type="submit" value="Register"></p>
    </form>
  </body>
</html>

  • form 태그에 onsubmit="jbSubmit();"를 추가합니다. 전송 버튼을 클릭하면 jbSubmit() 함수를 호출하라는 뜻입니다.
<form action="ok.html" method="POST" onsubmit="jbSubmit();">
  • jbSubmit()은 비밀번호 두 개를 받아서 알려주는 함수입니다.
<script>
  function jbSubmit() {
    var pw1 = document.getElementById( 'pw1' ).value;
    var pw2 = document.getElementById( 'pw2' ).value;
    alert( pw1 + ' vs ' + pw2 );
  }
</script>
  • 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
  <title>JavaScript</title>
    <style>
      input, button { font-family: inherit; font-size: inherit; }
    </style>
    <script>
      function jbSubmit() {
        var pw1 = document.getElementById( 'pw1' ).value;
        var pw2 = document.getElementById( 'pw2' ).value;
        alert( pw1 + ' vs ' + pw2 );
      }
    </script>
  </head>
  <body>
    <h1>Register</h1>
    <form action="ok.html" method="POST" onsubmit="jbSubmit();">
      <p><input type="text" name="username" placeholder="Username" required></p>
      <p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
      <p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
      <p><input type="submit" value="Register"></p>
    </form>
  </body>
</html>
  • 이제 폼에 정보를 입력하고 Register를 클릭하면 두 개의 비밀번호를 알려주고, [확인]을 클릭하면 ok.html로 이동합니다.

예제 2

  • jbSubmit() 앞에 return을 추가합니다.
<form action="ok.html" method="POST" onsubmit="return jbSubmit();">
  • 두 개의 비밀번호를 비교해서 값이 다르면 false를, 같으면 true를 반환합니다.
<script>
  function jbSubmit() {
    var pw1 = document.getElementById( 'pw1' ).value;
    var pw2 = document.getElementById( 'pw2' ).value;
    if ( pw1 != pw2 ) {
      alert( 'Confirm Password!' );
      return false;
    }
  }
</script>
  • 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      input, button { font-family: inherit; font-size: inherit; }
    </style>
    <script>
      function jbSubmit() {
        var pw1 = document.getElementById( 'pw1' ).value;
        var pw2 = document.getElementById( 'pw2' ).value;
        if ( pw1 != pw2 ) {
          alert( 'Confirm Password!' );
          return false;
        }
      }
    </script>
  </head>
  <body>
    <h1>Register</h1>
    <form action="ok.html" method="POST" onsubmit="return jbSubmit();">
      <p><input type="text" name="username" placeholder="Username" required></p>
      <p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
      <p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
      <p><input type="submit" value="Register"></p>
    </form>
  </body>
</html>
  • 값을 입력하고 전송할 때, 두 개의 비밀번호가 같다면 ok.html로 이동합니다.
  • 값이 다르다면 아래와 같이 메시지를 띄우고, [확인]을 클릭하면 현재 페이지에 머뭅니다.

Related Posts

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

Math.log(), Math.log10(), Math.Log2() Math.log() : 자연로그의 값을 반환합니다. Math.log10() : 상용로그의 값을 반환합니다. Math.Log2() : 밑이 2인 로그의 값을 반환합니다. 문법 Math.log( number) Math.log10( number ) Math.Log2( number) number에는 숫자가 들어갑니다. 0인 경우 -Infinity, 음수인 경우 NaN을 반환합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / 조건문 / if, else if, else

JavaScript / 조건문 / if, else if, else

특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용하는 것이 if, else if, else입니다. 문법 if ( condition1 ) { statement1 } condition1을 만족하면 statement1을 실행합니다. if ( condition1 ) { statement1 } else { statement2 } condition1을 만족하면 statement1을 실행하고, 만족하지 않으면 statement2를 실행합니다. if ( condition1 ) { statement1 } else if ( ...

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

String() String()은 숫자를 문자열로 변환하는 함수입니다. 문법 String( object ) object : 숫자 또는 숫자를 값으로 하는 변수 등을 입력합니다. 예제 변수 c의 값은 숫자 1과 숫자 2를 더한 3입니다. 변수 d의 값은 문자 1과 문자 2를 더한 12입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...

JavaScript / 배열(Array) / 선언하기

JavaScript / 배열(Array) / 선언하기

배열 선언하는 방법 방법 1 jbAry라는 배열을 만듭니다. var jbAry = new Array(); 값을 배정합니다. jbAry = 'Lorem'; jbAry = 'Ipsum'; jbAry = 'Dolor'; 방법 2 var jbAry = ; 방법 3 var jbAry = new Array( 'Lorem', 'Ipsum', 'Dolor' ); 예제 배열에 값을 배정한 후 차례대로 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성

JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성

.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location – URL 정보 가져오는 객체

JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드

JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드

.reverse() .reverse()는 배열의 원소의 순서를 반대로 만드는 메서드입니다. 순서가 바뀐 배열을 새로 만드는 것이 아니라, 기존 배열의 순서를 바꿉니다. 예제 4개의 원소를 가진 배열을 만들고 출력합니다.. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; } </style> </head> <body> <script> var jbAry = [ 1, 2, 3, 4 ...

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드

JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드

.getAttribute() .getAttribute()는 선택한 요소(element)의 특정 속성(attribute)의 값을 가져옵니다. 문법 element.getAttribute( 'attributename' ) 예를 들어 var jb = document.getElementById( 'xyz' ).getAttribute( 'title' ); 는 id의 값이 xyz인 요소의 title 속성 값을 변수 jb에 저장합니다. 예제 id의 값이 abc인 a 요소의 href 속성의 값을 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

.replace() .replace()는 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드입니다. 문법 string.replace( 'string1', 'string2' ) string에서 string1을 찾아 string2로 바꿉니다. 예제 jbStr 문자열에서 Lorem을 찾아 Amet으로 바꾼 후 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | .replace()</title> </head> <body> <script> ...

JavaScript 강좌