폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript

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로 이동합니다.
값이 다르다면 아래와 같이 메시지를 띄우고, [확인]을 클릭하면 현재 페이지에 머뭅니다.

JavaScript / Object / Math.max(), Math.min()

Math.max(), Math.min() Math.max()는 주어진 값 중에서 최댓값을, Math.min()은 최솟값을 반환합니다. 문법 Math.max( number1, number2, number3, ... ) Math.min( number1, number2, number3, ... ) 예제 1 10, 20, 30 중에서 최댓값과 최솟값을 구합니다. <!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>Math.max( 10, 20, 30 ) : ' + Math.max( 10, 20, 30 ) + '</p>' ); document.write( '<p>Math.min( 10, ...

JavaScript / 연산자 / typeof

typeof 연산자 typeof는 변수의 데이터 타입을 반환하는 연산자입니다. 문법 typeof variable variable에는 데이터 또는 변수가 들어갑니다. 괄호를 사용해도 됩니다. typeof(variable) 반환되는 값은 다음과 같습니다. undefined : 변수가 정의되지 않거나 값이 없을 때 number : 데이터 타입이 수일 때 string : 데이터 타입이 문자열일 때 boolean : 데이터 타입이 불리언일 때 object : 데이터 타입이 함수, 배열 등 객체일 때 function : 변수의 ...

JavaScript / 연산자 / 비교 연산자

변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...

JavaScript / Object / document.write()

.write() .write()은 문서에 문자, 코드 등을 쓰는 메서드입니다. 문법 document.write( exp1, exp2, ... ) 예제 Hello와 World를 연달아 출력합니다. document.write( 'Hello', 'World' ); 2를 출력합니다. document.write( 1+1 ) 코드는 코드로 인식합니다. document.write( '<p style="font-size: 80px; text-align: center;">Hello</p>' ); 닫는 script 태그에는 \를 붙여서 <\/script>로 씁니다. document.write( '<script>document.write( "Hello" )<\/script>' ); JavaScript / Object / document.writeln()

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...

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 / String.fromCharCode() / 유니코드를 문자로 바꾸는 메서드

.fromCharCode() .fromCharCode()는 유니코드를 문자로 바꾸는 메서드입니다. 문법 string.charCodeAt( index ) 예제 1 'HELLO'.charCodeAt( 0 ) H의 유니코드 72를 반환합니다. 예제 2 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = 'HELLO'; for ( i = 0; i < jb.length; i++ ) { document.write ( jb.charCodeAt( i ...

JavaScript / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드

.match() .match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 문법 string.match( regexp ) 만약 정규표현식에 맞는 문자열이 없다면 null을 반환합니다. 예제 Lorem Ipsum Dolor 문자열에서 Lo가 있는지, Lo를 포함한 단어가 있는지, Loi가 있는지 검색하고, 그 결과를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | match</title> </head> ...

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() encodeURI() : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다. encodeURIComponent() : 모든 문자를 인코딩하는 함수입니다. decodeURI() : encodeURI()로 인코딩한 문자열을 디코딩하는 함수입니다. decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수입니다. 문법 encodeURI( uri ) encodeURIComponent( uri ) decodeURI( uri ) decodeURIComponent( uri ) uri : 인코딩하려는 인터넷 주소를 입력합니다. 예제 특수문자와 한글을 포함한 URI를 인코팅, ...

CODING FACTORY

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

예제 1

예제 2

Related Posts