• 쇼핑몰
  • 커뮤니티
  • 북마크

Jquery

모달팝업 및 다중 폼 사용중 엔터키로 인한 submit문제 해결제시

익명
2020.08.31 11:25 5,355 0

본문

부트스트랩에서나 다중 폼을 사용하는 모달팝업중 엔터를 치면 페이지가 새로고쳐지거나 submit처리되는 문제점이 존재한다.

1. 문제 해결 제시

<form name="form" onsubmit="return false">


2. 문제 해결 제시

<script>

  Function onsubmitA (event) {

  var form = document.form;

  var form_id = document.elementById("form_id")'

  alert("엔터키를 누르셨네요~~ Submit 이벤트가 발생했습니다.");

  return false; //엔터키를 눌러서 처리할 이벤트가 존재 하지 않는다면 Alert 메세지 뛰우고 여기에서 멈춤

 }

<script>


  <form name="form" id="form_id" onsubmit="return onsubmitA()">

    <input type="text" name="test">

    <button class="">난 버튼</button>

   </form>


3. 문제해결제시

<script>

 $(function() {

   #("#form_id").submit(function(event) {

    alert("엔터키를 누르셨네요~~ Submit 이벤트가 발생했습니다.");

    return false; //엔터키를 눌러서 처리할 이벤트가 존재 하지 않는다면 Alert 메세지 뛰우고 여기에서 멈춤

    });

 });</script>

 <form name="form" id="form_id">

    <input type="text" name="test">

    <button class="">난 버튼</button>

   </form>

댓글목록 0

등록된 댓글이 없습니다.