제출시 양식 리디렉션 또는 새로 고침을 방지 하시겠습니까?

여러 페이지를 검색했지만 내 문제를 찾을 수 없어서 게시물을 작성해야했습니다.

제출 버튼이있는 양식이 있는데 제출할 때 새로 고침하거나 리디렉션하지 않기를 원합니다. 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 email"및 "RSS Subscription"이라는 사이드 바를 확인하십시오. 둘 다이 작업을 수행하려는 양식입니다.

제출 이벤트 에서 양식 제출을 처리하고 false를 반환합니다.

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

제출 버튼에 더 이상 onclick 이벤트가 필요하지 않습니다.

<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를 사용하여 'click'이벤트 핸들러를 제출 버튼 (또는 모든 버튼)에 바인딩하여 submitClick을 콜백으로 사용합니다. 이벤트를 콜백에 전달하여 preventDefault 를 호출 합니다. 그러면 클릭이 양식을 제출하지 못합니다 .

양식의 여는 태그에서 다음과 같이 작업 속성을 설정합니다.

<form id="contactForm" action="#">

당신이 누락 것 같습니다 return false.

표시되는 기본 브라우저 오류 ( 예 : HTML 속성에 의해 트리거 된 오류 (클라이언트 코드 JS 처리 전에 표시됨))를 보려면 다음을 수행하십시오 .

<input name="o" required="required" aria-required="true" type="text">

submit이벤트 대신 이벤트를 사용해야합니다 click. 이 경우 " Please fill out this field "를 요청하는 팝업이 자동으로 표시됩니다 . 심지어 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전파를 중지하지만 (즉, 양식 제출에 더 많은 핸들러가 첨부 된 경우 실행되지 않음),이 경우 브라우저에서 트리거 된 작업이 항상 먼저 실행됩니다. 심지어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를 통해 제출 버튼에서 클릭 이벤트를 처리하는 것입니다. 이렇게하면 페이지를 새로 고치지 않지만 제출을위한 "입력"버튼이 작동하지 않고 모바일에서도 이동 버튼 (일부 모바일에서는 스타일)이 표시되지 않는다는 단점이 있습니다. 따라서 양식 태그를 사용하고 허용되는 답변을 사용하십시오.