제출 시 양식 리디렉션 또는 새로 고침을 방지하시겠습니까?
여러 페이지를 뒤졌지만 문제를 찾을 수 없어서 글을 올려야 했습니다.
제출 버튼이 있는 양식이 있는데 제출할 때 새로 고침이나 리디렉션을 하지 않았으면 합니다.저는 단지 jQuery가 기능을 수행하기를 원합니다.
양식은 다음과 같습니다.
<form id="contactForm">
<fieldset>
<label for="Name">Name</label>
<input id="contactName" type="text" />
</fieldset>
<fieldset>
<label for="Email">Email</label>
<input id="contactEmail" type="text" />
</fieldset>
<fieldset class="noHeight">
<textarea id="contactMessage" cols="20"></textarea>
<input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
</fieldset>
</form>
<small id="messageSent">Your message has been sent.</small>
여기 jQuery가 있습니다.
function sendContactForm(){
$("#messageSent").slideDown("slow");
setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}
폼에 액션 요소를 넣거나 넣지 않고 시도해 보았지만 무엇을 잘못하고 있는지 모르겠습니다.나를 더 짜증나게 한 것은 완벽하게 해주는 예제가 있다는 것입니다: 예제 페이지
내 문제를 실시간으로 확인하려면 stormink.net (내 사이트)로 이동하여 "Send me and e-메일" 및 "RSS Subscription"이라고 표시된 사이드바를 확인하십시오.두 가지 모두 제가 작업하려고 하는 양식입니다.
제출 이벤트에서 양식 제출을 처리하고 거짓을 반환하면 됩니다.
$('#contactForm').submit(function () {
sendContactForm();
return false;
});
Submit(제출) 버튼의 on click(클릭) 이벤트는 더 이상 필요하지 않습니다.
<input class="submit" type="submit" value="Send" />
여기:
function submitClick(e)
{
e.preventDefault();
$("#messageSent").slideDown("slow");
setTimeout('$("#messageSent").slideUp();
$("#contactForm").slideUp("slow")', 2000);
}
$(document).ready(function() {
$('#contactSend').click(submitClick);
});
onClick 이벤트를 사용하는 대신 jQuery를 사용하는 '클릭' 이벤트 핸들러를 submit 버튼(또는 submit Click을 콜백으로 사용하는 아무 버튼이나 아무 버튼이나)에 바인딩하는 방법을 사용하면 submitClick을 콜백으로 사용할 수 있습니다.이벤트를 콜백에 전달하여 preventDefault를 호출합니다. 이를 통해 클릭이 양식을 제출하지 못하게 됩니다.
양식의 열기 태그에서 다음과 같이 작업 속성을 설정합니다.
<form id="contactForm" action="#">
당신은 그 일을 놓치고 있는 것 같습니다.return false.
HTML 특성(클라이언트 코드 JS 처리 전에 표시됨)에 의해 트리거된 기본 브라우저 오류와 같이 표시되는 기본 브라우저 오류를 보려면 다음을 수행합니다.
<input name="o" required="required" aria-required="true" type="text">
이벤트 대신 이벤트를 사용해야 합니다.click이벤트. 이 경우 "이 필드를 작성해주세요"라는 팝업이 자동으로 표시됩니다.에도preventDefault:
$('form').on('submit', function(event) {
event.preventDefault();
my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment
아까 말씀하신 것처럼.return false는 전파를 중지하지만(즉, 양식 제출에 더 많은 핸들러가 첨부된 경우 실행되지 않습니다), 이 경우 브라우저에 의해 트리거된 작업이 항상 먼저 실행됩니다.A를 가지고도return false맨 끝에
따라서 이러한 기본 팝업을 제거하려면click제출 버튼의 이벤트:
$('form input[type=submit]').on('click', function(event) {
event.preventDefault();
my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes
폼 태그를 사용하지 않고 jquery를 통해 submit 버튼에서 클릭 이벤트를 처리하는 것이 대안이 될 수 있습니다.이렇게 하면 페이지 새로 고침이 발생하지 않지만 동시에 제출을 위한 "입력" 버튼이 작동하지 않으며 모바일에서도 이동 버튼(일부 모바일의 스타일)을 얻을 수 없다는 단점이 있습니다.따라서 양식 태그 사용을 고수하고 승인된 답변을 사용합니다.
대부분의 이전 답변과 달리, 여기에 설명된 솔루션은 JQuery 대신 순수 자바스크립트를 사용하여 페이지가 새로 고침/수정되지 않도록 하는 방법을 보여줍니다.
HTML 양식
아래는 HTML 입니다.<form>. 사용할 필요가 없습니다.onclickevent(사용자가 마우스를 사용하여 버튼을 클릭할 때 발생) 또는onsubmit이벤트(사용자가 키를 누를 때 발생)submit단추.이러한 이벤트는 다음 절에 설명된 JS 코드에 의해 처리됩니다.
<form id="myForm">
<input type="text" name="contactName" id="contactName">
<input class="submit" type="submit" value="Submit">
</form>
자바스크립트 코드
아래는 자바스크립트 코드로 처리합니다.<form>제출 이벤트에 대한 제출인터페이스의 메소드는 이벤트가 명시적으로 처리되지 않는 경우, 이벤트의 기본 액션이 정상적으로 수행되지 않아야 함을 사용자 에이전트에게 알려줍니다.
참고: HTML 요소를 DOM 트리에 추가한 후(웹 페이지를 로드할 때) 이벤트 핸들러를 등록해야 합니다. 그렇지 않으면 존재하지 않는 개체의 속성(이벤트 핸들러)을 설정하려고 할 때 런타임 오류가 발생합니다.이를 보장하는 한 가지 방법은 단순히 해당 요소 뒤에 스크립트를 배치하는 것입니다(즉,<form>브라우저 작동 방식에 의존하기 때문에 다소 위험할 수 있으므로 이벤트를 사용하여 초기 HTML 문서를 완전히 로드하고 구문 분석한 후에 이벤트 핸들러를 할당할 수 있습니다.예:
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault() // Cancel the default action
sendContactForm();
});
});
다 합쳐서.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault() // Cancel the default action
sendContactForm();
});
});
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="contactName" id="contactName">
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
언급URL : https://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit
'programing' 카테고리의 다른 글
| grails 컨트롤러에서 ajax 요청 또는 브라우저 요청 식별 (0) | 2023.11.06 |
|---|---|
| realloc은 실제로 배경에서 어떻게 작동합니까? (0) | 2023.11.06 |
| 클릭()에서 jQuery 클릭을 사용하여 앵커를 처리합니다. (0) | 2023.11.06 |
| CSS의 모든 N번째 요소 선택 (0) | 2023.11.06 |
| 파일 목록에서 파일을 제거하는 방법 (0) | 2023.11.06 |