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

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

---

이 질문은 다음의 정확한 중복입니다.

• 페이지가 예기치 않게 다시로드되어 양식 데이터가 사라짐 1 답변

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

제출 버튼이있는 양식이 있는데 제출할 때 새로 고침하거나 리디렉션하지 않기를 원합니다. 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="#">

---

It looks like you're missing a return false.

---

An alternative solution would be to not use form tag and handle click event on submit button through jquery. This way there wont be any page refresh but at the same time there is a downside that "enter" button for submission wont work and also on mobiles you wont get a go button( a style in some mobiles). So stick to use of form tag and use the accepted answer.

---

If you want to see the default browser errors being displayed, for example, those triggered by HTML attributes (showing up before any client-code JS treatment):

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

You should use the submit event instead of the click event. In this case a popup will be automatically displayed requesting "Please fill out this field". Even with 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

참고 URL : https://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit