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 / String.substring() / 문자열 추출하는 메서드

JavaScript / Object / String.substring() / 문자열 추출하는 메서드

.substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드

JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드

.querySelectorAll() .querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. 문법 document.querySelectorAll( 'selector' ) 예를 들어 document.querySelectorAll( '.abc' ) 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. 예제 1 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

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

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...

JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드

JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드

.getElementsByTagName() .getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 유사 배열 객체로 반환됩니다. 문법 1 document.getElementsByTagName( 'tagname' ) 예를 들어 p 태그를 가진 첫번째 요소를 선택하려면 다음과 같이 합니다. document.getElementsByTagName( 'p' ) 예제 1 문서에서 p 태그를 가진 두번째 요소를 jb라는 변수에 넣고, 몇 가지 정보를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

JavaScript / Object / Array.join() / 배열의 원소를 연결하여 하나의 값으로 만들기

JavaScript / Object / Array.join() / 배열의 원소를 연결하여 하나의 값으로 만들기

.join() .join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. 문법 var jbStr1 = jbAry.join(); jbAry 배열에 있는 원소들을 하나의 값으로 만듭니다. 원소들의 구분은 콤마(,)로 합니다. 원소들의 구분을 다른 문자로 하려면 () 안에 원하는 문자를 넣습니다. var jbStr2 = jbAry.join( ' / ' ); 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

.startsWith() .startsWith()는 문자열이 특정 문자열로 시작하는지 확인하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.startsWith( searchString, length ) searchString : 검색할 문자열로 필수 요소입니다. 대소문자를 구분합니다. length : 문자열 중 어디까지 검색할지 정합니다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 합니다. 예제 'abcde'.startsWith( 'a' ) 는 abcde가 a로 시작하는지 검사합니다. a로 시작하므로 true를 반환합니다. 'abcde'.startsWith( 'a', 1 ) bcde가 a로 시작하는지 검사합니다. ...

JavaScript / Object / document.write()

JavaScript / Object / document.write()

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

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

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

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

JavaScript / Plugin / Swiper / 슬라이더 플러그인

JavaScript / Plugin / Swiper / 슬라이더 플러그인

Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다. 홈페이지 : https://swiperjs.com/ GitHub : https://github.com/nolimits4web/swiper Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요. 기본 사용법 스크립트 파일과 CSS 파일을 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <link ...