๐Ÿ’ป ๊ณต๋ถ€ ๊ธฐ๋ก/๐ŸŽž๏ธ JavaScript

Event | onsubmit return

  • -

HTML / JavaScript

form ํƒœ๊ทธ ์ค‘์—์„œ event ๋ฅผ ์„ค์ • ํ•  ๋•Œ

onsubmit : form์˜ ๊ฐ’์„ ์ „์†กํ•˜๊ธฐ ์ „์— ์–ด๋–ค ์ž‘์—…์„ ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Œ

onsubmit="return ํ•จ์ˆ˜()"

  • return์„ ์ถ”๊ฐ€ํ•˜๋ฉด submit์„ ํ•˜๊ธฐ ์ „์— ํ•จ์ˆ˜๋ฅผ ๋จผ์ € ์‹คํ–‰ํ•˜๊ณ , ๊ฒฐ๊ณผ(true, false)์— ๋”ฐ๋ผ submit์ด ๋ฐœ์ƒ
  • return์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ์œ ํšจ์„ฑ ๊ฒฐ๊ณผ์— ์ƒ๊ด€์—†์ด ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰

<form ํ•จ์ˆ˜(this)> : formํƒœ๊ทธ๋ฅผ ์ง€์นญํ•˜๋Š” this๋ฅผ ์ด์šฉํ•ด object๋กœ ์ •์˜ํ•˜๊ณ , ๊ฐ input์˜ name๋ณ„๋กœ ํ•ด๋‹นํ•˜๋Š” ๊ฐ’ ๋“ฑ์˜ ์ •๋ณด๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

<form onsubmit="return formCheck(this)">
    <input name="id">
    <input name="pw">
    <input name="name">
    <input name="email">
</form>

<script>
	formCheck(frm) {
    	frm.id /* <input name="id"> */
        frm.id.value /* ์ž…๋ ฅ๊ฐ’ = <input value="์ž…๋ ฅ๊ฐ’"> */
        frm.id.value.length /* 3(์ž๋ฆฌ์ˆ˜) = <input value="์ž…๋ ฅ๊ฐ’"> */
    };
</script>

 

 

Contents

ํฌ์ŠคํŒ… ์ฃผ์†Œ๋ฅผ ๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค

์ด ๊ธ€์ด ๋„์›€์ด ๋˜์—ˆ๋‹ค๋ฉด ๊ณต๊ฐ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.