어딘가에 제출 버튼이있는 양식이 있습니다.
그러나 제출 이벤트를 어떻게 든 ‘캐치’하여 발생하지 않도록하고 싶습니다.
내가 할 수있는 방법이 있습니까?
제출 버튼은 사용자 정의 컨트롤의 일부이므로 수정할 수 없습니다.
답변
다른 답변과 달리 반환 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;
}답변
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) 대 인라인 이벤트 여기 . 왜냐하면 크리스 베이커 보다 더 설명 할 수 없기 때문 입니다.
둘 다 정확하지만 그중 어느 것도 그 자체로는 “최상의”것은 아니며 개발자가 두 가지 방법을 모두 사용하기로 선택한 이유가있을 수 있습니다.
답변
를 사용하여 이벤트 리스너를 양식에 첨부 한 .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을
참조하십시오 .
답변
이거 한번 해봐…
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.");
});
});답변
다음은 현재 작동합니다 (chrome 및 firefox에서 테스트).
<form onsubmit="event.preventDefault(); return validateMyForm();">여기서 validateMyForm ()은 false유효성 검사에 실패하면 반환되는 함수입니다 . 요점은 이름을 사용하는 것 event입니다. 예를 들어 사용할 수 없습니다e.preventDefault()
답변
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
return false;
}답변
눈에 잘 띄지 않는 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반면에 와 같은 것을 사용하면 상황이 나빠질 수 있습니다.
