복붙노트

[JQUERY] 제출에 방지 폼 리디렉션 또는 새로 고침?

JQUERY

제출에 방지 폼 리디렉션 또는 새로 고침?

해결법


  1. 1.그냥 제출 이벤트에 양식 제출 및 반환 거짓을 처리 :

    그냥 제출 이벤트에 양식 제출 및 반환 거짓을 처리 :

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

    제출 버튼을에 당신은 더 이상 온 클릭 이벤트가 필요하지 않습니다 :

    <input class="submit" type="submit" value="Send" />
    

  2. 2.여기:

    여기:

    function submitClick(e)
    {
         e.preventDefault();
         $("#messageSent").slideDown("slow");
         setTimeout('$("#messageSent").slideUp();
         $("#contactForm").slideUp("slow")', 2000);
    }
    
    $(document).ready(function() {
        $('#contactSend').click(submitClick);
    });
    

    대신에 onClick 이벤트를 사용하여, 당신은 콜백으로 submitClick를 취할 것입니다 제출 버튼 (또는 어떤 버튼)에 jQuery를 사용하여 '클릭'이벤트 처리기를 바인딩 사용합니다. 우리는 양식을 제출에서 클릭을 방지 할 것 인에서 preventDefault를 호출하는 콜백에 이벤트를 전달합니다.


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

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

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

  4. 4.당신이 반환 거짓을 놓치고있는 것 같습니다.

    당신이 반환 거짓을 놓치고있는 것 같습니다.


  5. 5.당신은 예를 들어, 기본 브라우저 오류가 표시되는보고 싶다면, HTML에 의해 트리거들은 (모든 클라이언트 코드 JS 처리하기 전에 표시) 속성 :

    당신은 예를 들어, 기본 브라우저 오류가 표시되는보고 싶다면, HTML에 의해 트리거들은 (모든 클라이언트 코드 JS 처리하기 전에 표시) 속성 :

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

    당신은 대신 클릭 이벤트의 이벤트를 제출 사용해야합니다. 이 경우 팝업이 자동으로 "이 필드를 작성하십시오"요청이 표시됩니다. 심지어에서 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
    

    누군가가 앞서 언급 한 바와 같이, 반환 거짓은 전파 (양식 제출에 부착 된 더 핸들러가있는 경우 즉, 그것들이 실행되지 않을 것이다)를 중지,하지만,이 경우, 브라우저에 의해 트리거 작업이 항상 먼저 실행됩니다. 심지어 마지막에 반환 거짓으로.

    그래서 당신은 이러한 기본 팝업을 없애려면, 제출 버튼에 클릭 이벤트를 사용합니다 :

    $('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
    

  6. 6.또 다른 해결책은 JQuery와 통해 제출 '버튼을에 form 태그와 핸들 클릭 이벤트를 사용하지하는 것입니다. 이 방법은 모든 페이지 새로 고침이있을 실 거예요하지만 동시에 제출 실 거예요 작업을 위해 "입력"단추를 또한 휴대폰에 당신이 이동 버튼 (일부 휴대폰에서 양식)를 얻을 실 거예요 있다는 단점이있다. 그래서 form 태그의 사용 허용 대답을 사용하는 스틱.

    또 다른 해결책은 JQuery와 통해 제출 '버튼을에 form 태그와 핸들 클릭 이벤트를 사용하지하는 것입니다. 이 방법은 모든 페이지 새로 고침이있을 실 거예요하지만 동시에 제출 실 거예요 작업을 위해 "입력"단추를 또한 휴대폰에 당신이 이동 버튼 (일부 휴대폰에서 양식)를 얻을 실 거예요 있다는 단점이있다. 그래서 form 태그의 사용 허용 대답을 사용하는 스틱.

  7. from https://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit by cc-by-sa and MIT license