양식 제출을 방지하는 방법은 무엇입니까?

243

어딘가에 제출 버튼이있는 양식이 있습니다.

그러나 제출 이벤트를 어떻게 든 '캐치'하여 발생하지 않도록하고 싶습니다.

내가 할 수있는 방법이 있습니까?

제출 버튼은 사용자 정의 컨트롤의 일부이므로 수정할 수 없습니다.

javascript  html  forms 
— 나단 오스만
소스
제출 버튼에 계속 액세스 할 수 있습니다. 페이지 소스를보고 페이지를 렌더링하고 해당 ClientID를 가져옵니다. 그런 다음 jQuery와 같은 것을 사용하여 $ ( '# ctl01_cph01_controlBtn1'). click (function () {return false;});
— 반군
@ Rafael : 사실 ...하지만 이것이 최후의 수단이 될 것입니다-이것은 매우 복잡한 통제입니다.
— Nathan Osman
@Raf는 asp.net 기반이며 모범 사례는 아닙니다. 그러나 본질적으로 정확합니다. 누군가가 페이지를 편집하면 변경 될 수 있으므로 소스에서 엿보기 및 컨트롤 이름을 사용하지 마십시오. 의도하지 않은 부작용 등.

답변:

260

다른 답변과 달리 반환 false은 답변의 일부일 뿐입니다 . return 문 전에 JS 오류가 발생하는 시나리오를 고려하십시오.

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

스크립트

function mySubmitFunction()
{
  someBug()
  return false;
}

false여기 로 돌아 오는 것은 실행되지 않으며 양식은 어느 쪽이든 제출됩니다. 또한 preventDefaultAjax 양식 제출에 대한 기본 양식 조치를 방지하기 위해 전화해야합니다 .

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

이 경우 버그가 있어도 양식이 제출되지 않습니다!

대안 적으로, try...catch블록이 사용될 수있다.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}
— 벤 로우
소스
4
왜 false직접 돌아 오지 onsumbit않습니까?
— ProfK
1
제출시 사용자에게 오류 메시지를 표시 할 수 있습니다. 예를 들어, "이 필수 필드를 작성한 후 제출하십시오". 이 경우 event.preventDefault는 매우 편리합니다
— Mark Chorley
1
@ProfK event.preventDefault ()를 사용하면 관계없이 상관 없습니다. try / catch는 오류 처리의 일부일 것입니다
— Ben Rowe
11
<form onsubmit = "return mySubmitFunction (event)"> 작동했습니다 ... firefox에서 대괄호 안에 event라는 단어를 사용해야했습니다
— danday74
5
@BenRowe evt 매개 변수를 호출 된 메소드에 추가해야합니다. (<form onsubmit="return mySubmitFunction(evt)">)그렇지 않으면 정의되지 않은 오류가 발생합니다.
— UfukSURMEN
143

onsubmit이 같은 인라인 이벤트를 사용할 수 있습니다

<form onsubmit="alert('stop submit'); return false;" >

또는

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

데모

이제는 큰 프로젝트를 만들 때 좋은 생각이 아닐 수 있습니다. 이벤트 리스너를 사용해야 할 수도 있습니다.

제발 에 대해 자세히보기 이벤트 리스너 (또는 addEventListener와 IE의는 attachEvent) 대 인라인 이벤트 여기 . 왜냐하면 크리스 베이커 보다 더 설명 할 수 없기 때문 입니다.

둘 다 정확하지만 그중 어느 것도 그 자체로는 "최상의"것은 아니며 개발자가 두 가지 방법을 모두 사용하기로 선택한 이유가있을 수 있습니다.

— Reigel
소스
길에서 신속하고 신속하게 해결하십시오.
— 페르난도 토레스
어떤 이유로 든 <form onsubmit="return false;" >나를 위해 작동하지 않습니다.
— Ruan
102

를 사용하여 이벤트 리스너를 양식에 첨부 한 .addEventListener()후 다음에서 .preventDefault()메소드 를 호출하십시오 event.

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});
<form>
  <button type="submit">Submit</button>
</form>
스 니펫 확장

웹 페이지 논리와 구조를 분리하기 때문에 속성 으로 submit이벤트 핸들러를 정의하는 것보다 더 나은 솔루션이라고 생각합니다 onsubmit. 논리가 HTML과 분리되어있는 프로젝트를 유지 관리하는 것이 훨씬 쉽습니다. 눈에 잘 띄지 않는 JavaScript를 참조하십시오 .

DOM 객체 의 .onsubmit속성을 사용하면 form여러 제출 콜백을 하나의 요소에 첨부 할 수 없으므로 좋지 않습니다. addEventListener 및 onclick을 참조하십시오 .

— 미 카프 페르와 코프 스키
소스
1
& jquery의 경우 : $("button").click(function(e) { e.preventDefault() });
— Nixen85
2
OP가 버튼을 변경할 수 없다고 언급했기 때문에 다른 모든 답변이 인라인 온 제출을 계속 사용하는 이유는 +1입니다. 버튼 ID가 있으면 '양식'을 얻을 수있는 방법이 있는지 궁금합니다
— Robert Sinclair
16

이거 한번 해봐...

HTML 코드

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery 코드

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

또는

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});
— 삭스
소스
18
이 질문에는 jQuery 태그가 없습니다.
— Michał Perłakowski
6
@Gothdo와 솔루션은 여전히 ​​동일합니다. 미쳤어?
— Kevin B
7
@Gothdo 그래, 정확히 동일합니다. eventObject.preventDefault. 핸들러를 바인딩하는 방식은 솔루션을 변경하지 않습니다. 나는 당신의 대답이 받아 들여지는 것과 다르지 않다고 주장합니다.
— Kevin B
stopPropagation내 경우에는 효과가 있었던 유일한 것이 었습니다. 감사! :)
— cregox
13

다음은 현재 작동합니다 (chrome 및 firefox에서 테스트).

<form onsubmit="event.preventDefault(); return validateMyForm();">

여기서 validateMyForm ()은 false유효성 검사에 실패하면 반환되는 함수입니다 . 요점은 이름을 사용하는 것 event입니다. 예를 들어 사용할 수 없습니다e.preventDefault()

— 비 크람 푸디
소스
1
onsubmit = "return validateMyForm ();" 충분하지만 validateMyForm ()은 true 또는 false를 반환해야합니다.
— Adrian P.
8 
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}
— 나이 쿠스
소스
2
하나의 요소에 .onsubmit여러 개의 submit콜백을 첨부 할 수 없기 때문에 사용하는 것이 좋지 않다고 생각합니다 . 을 사용하는 것이 좋습니다 .addEventListener().
— Michał Perłakowski
3
.onsubmit 특성을 통해 이벤트 핸들러를 설정 한 경우에도 .addEventListener ()를 통해 추가 핸들러를 추가 할 수 있습니다. 속성에 의해 등록 된 핸들러가 먼저 호출 된 다음 등록 된 순서대로 .addEventListener ()에 등록 된 핸들러가 호출됩니다.
— Daniel Granger 2016 년
2

눈에 잘 띄지 않는 JavaScript 프로그래밍 규칙 을 따르고 DOM 이 얼마나 빨리 로드 되는지에 따라 다음을 사용하는 것이 좋습니다.

<form onsubmit="return false;"></form>

그런 다음 라이브러리를 사용하는 경우 onload 또는 DOM 준비를 사용하여 이벤트를 연결하십시오.

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});
label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>
스 니펫 확장

또한 action일부 사람들은 NoScript 와 같은 플러그인을 실행하여 유효성 검사를 중단 할 수 있으므로 항상 속성을 사용합니다 . action 속성을 사용하는 경우 최소한 백엔드 유효성 검사를 기반으로 서버에서 사용자를 리디렉션합니다. window.location반면에 와 같은 것을 사용하면 상황이 나빠질 수 있습니다.

— 세바스찬 팔마
소스
2

양식이 제출되지 않도록하려면이 작업 만 수행하면됩니다.

<form onsubmit="event.preventDefault()">
    .....
</form>

위의 코드를 사용하면 양식 제출이 방지됩니다.

— 주 헤어 타하
소스
0

여기 내 대답 :

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

나는 추가 event.preventDefault();에 onsubmit그것은 작동합니다.

— 요자 위라 타마
소스
0

eventListner를 양식에 추가하고 다음 preventDefault()과 같이 양식 데이터를 JSON으로 변환 할 수 있습니다.

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);
<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>
스 니펫 확장

— 하산 아 유세프
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.