[JQUERY] 제출 페이지를 새로 고침 중지 양식

제출 페이지를 새로 고침 중지 양식

해결법

1. ---

   1.당신과 함께 제출에서 양식을 방지 할 수 있습니다

   당신과 함께 제출에서 양식을 방지 할 수 있습니다

   $("#prospects_form").submit(function(e) {
       e.preventDefault();
   });
   

   물론, 기능, 당신은 빈 필드를 확인 할 수 있고, 무엇이든 잘 보이지 않는 경우, e.preventDefault ()는 제출 중지됩니다.

   jQuery를하지 않고 :

   var form = document.getElementById("myForm");
   function handleForm(event) { event.preventDefault(); } 
   form.addEventListener('submit', handleForm);
   

2. ---

   2.이 onsubmit = "반환 거짓"코드를 추가합니다 :

   이 onsubmit = "반환 거짓"코드를 추가합니다 :

   <form name="formname" onsubmit="return false">
   

   그건 나를 위해 그것을 해결했습니다. 사용자가 지정한 여전히 온 클릭 기능을 실행

3. ---

   3.버튼 버튼 타입을 교체 :

   버튼 버튼 타입을 교체 :

   <button type="button">My Cool Button</button>
   

4. ---

   4.당신은 페이지 새로 고침없이 양식 제출이 코드를 사용할 수 있습니다. 내 프로젝트에 이런 짓을했는지.

   당신은 페이지 새로 고침없이 양식 제출이 코드를 사용할 수 있습니다. 내 프로젝트에 이런 짓을했는지.

   $(function () {
       $('#myFormName').on('submit',function (e) {
   
                 $.ajax({
                   type: 'post',
                   url: 'myPageName.php',
                   data: $('#myFormName').serialize(),
                   success: function () {
                    alert("Email has been sent!");
                   }
                 });
             e.preventDefault();
           });
   });
   

5. ---

   5.양식을 사용하여 제출할 때 페이지를 다시로드 방지하는 한 가지 좋은 방법은 당신의 onsubmit 속성을 반환 거짓을 추가하는 것입니다.

   양식을 사용하여 제출할 때 페이지를 다시로드 방지하는 한 가지 좋은 방법은 당신의 onsubmit 속성을 반환 거짓을 추가하는 것입니다.

   <form action="#" onsubmit="yourJsFunction();return false">
       <input type="text"/>
       <input type="submit"/>
   </form>
   

6. ---

   6.당신이 사용자에게 양식을 제출이 가능성을 제공 할 때이 문제가 더 복잡해진다 :

   당신이 사용자에게 양식을 제출이 가능성을 제공 할 때이 문제가 더 복잡해진다 :

   이 경우 당신은 키가 맞았 입력하면 양식을 제출하는 누른 키를 감지하는 기능이 필요합니다.

   그리고 지금 (어떤 경우 버전 11에서) IE의 문제를 온다 말: 이 문제는 크롬으로도 파이어 폭스에 존재하지 않습니다!

   이 솔루션은 사소한 보인다 비록 내가 다른 사람들을 위해 유용 할 수있는 희망 그래서,이 문제를 해결하기 위해 나에게 많은 시간을 tooks. 이 용액을 성공적 IE (V 11.0.9600.18426), FF (V 40.03) 및 크롬 (V 53.02785.143 m 64 비트)에, 그 중에서도 테스트되었고

   소스 코드를 HTML & JS는 조각에 있습니다. 원리가 설명되어 있습니다. 경고:

   이 문제에 직면하면, 당신의 환경에 JS 코드를 붙여 넣은 상황에 적응 / 복사합니다.

   / * * 폼 점을 알려 * / VAR은 = document.getElementById를 ( 'idGetUserFrm') 알릴; / * * IE 두 번 양식을 제출 *이 부울 isSumbitted을 방지하는 것입니다 : 폼 4 처음 표시 될 때 * 1) 허위로 초기화 * 비고 : 그것은 "몸로드"와 같은 이벤트하지 않습니다 * / VAR isSumbitted 거짓 =; checkEnter 함수 (E) { 경우 (E && e.keyCode == 13) { inForm.submit (); / * * 진정한 2) 세트는 양식 제출이 호출 된 후 * / isSumbitted 사실 =; } } 함수 onSubmit () { 경우 (isSumbitted) { / * * 3) 양식 제출 실행 후 거짓으로 리셋 * / isSumbitted = 거짓; false를 반환; } } <형태 ID = "idGetUserFrm"METHOD = "POST"조치 = "servletOrSomePhp"onsubmit = "반환 onSubmit ()"> 이름 :로
   

7. ---

   7.순수 자바 스크립트에서 사용 e.preventDefault ()

   순수 자바 스크립트에서 사용 e.preventDefault ()

   e.preventDefault는 () JQuery와에 사용하지만, 자바 스크립트에서 작동합니다.

   document.querySelector(".buttonclick").addEventListener("click", 
   function(e){
   
     //some code
   
     e.preventDefault();
   })
   

8. ---

   8.가장 좋은 방법은 그 뒤에 당신이 원하는 기능과 반환 거짓 전화 onsubmit입니다.

   가장 좋은 방법은 그 뒤에 당신이 원하는 기능과 반환 거짓 전화 onsubmit입니다.

   onsubmit="xxx_xxx(); return false;"
   

9. ---

   9.대부분의 사람들은에서는 event.preventDefault () 함수를 호출하여 제출에서 양식을 방지합니다.

   대부분의 사람들은에서는 event.preventDefault () 함수를 호출하여 제출에서 양식을 방지합니다.

   제출하지 폼 발생 또한 기능 부울을 리턴)합니다 (formBlaSubmit을;. 또 다른 수단은 버튼의 온 클릭 속성을 제거 및 리턴 거짓으로 .submit (함수 () {로 processForm () 출력의 코드를 얻을 수있다 processForm ()에 사용하기 위해, 유효성에 기초

   katsh의 대답은, 같은 소화 다만 쉽다.

   (그런데, 나는 나에게 지침을하시기 바랍니다 제공, 유래에 새로운 해요.)

10. ---

    10.필자는 개인적으로 제출하고 오류가있는 경우, 다만 false를 돌려의 양식을 확인하고 싶다.

    필자는 개인적으로 제출하고 오류가있는 경우, 다만 false를 돌려의 양식을 확인하고 싶다.

    $('form').submit(function() {
    
        var error;
    
       if ( !$('input').val() ) {
            error = true
        }
    
        if (error) {
             alert('there are errors')
             return false
        }
    
    });
    

    http://jsfiddle.net/dfyXY/

11. ---

    11.

     $("#buttonID").click(function (e) {
              e.preventDefault();
             //some logic here
     }
    

12. ---

    12.당신이 순수 자바 스크립트를 사용하려는 경우, 다음 코드는 더 나은 무엇보다도있을 것입니다.

    당신이 순수 자바 스크립트를 사용하려는 경우, 다음 코드는 더 나은 무엇보다도있을 것입니다.

    가정 :

    HTML :

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Form Without Submiting With Pure JS</title>
            <script type="text/javascript">
                window.onload = function(){
                    /**
                     * Just Make sure to return false so that your request will not go the server script
                     */
                    document.getElementById('simple_form').onsubmit = function(){
                        // After doing your logic that you want to do 
    
                        return false 
                    }
                }
            </script>
        </head>
        <body>
    
        </body>
    </html>
    <form id="simple_form" method="post">
        <!-- Your Inputs will go here  -->
        <input type="submit" value="Submit Me!!" />
    </form>
    

    희망은 그래서 당신을 위해 작동!

13. ---

    13.제 생각에는, 대부분의 답변은 문제가 귀하의 질문에 질문 해결하기 위해 노력하고있다,하지만 난 그 시나리오에 대한 최선의 방법이라고 생각하지 않습니다.

    제 생각에는, 대부분의 답변은 문제가 귀하의 질문에 질문 해결하기 위해 노력하고있다,하지만 난 그 시나리오에 대한 최선의 방법이라고 생각하지 않습니다.

    .preventDefault ()는 실제로 페이지를 새로 고침하지 않습니다. 하지만 간단한, 당신은 데이터로 채워 원하는 분야에서 필요로 문제를 해결할 것이라고 생각합니다.

    <form id="prospects_form" method="post">
        <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" required/>
        <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" required/>
        <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" required/>
        <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
    </form>
    

    각 입력의 끝에 추가 요구 태그를 주목하라. 결과는 동일합니다 : 필드에 데이터없이 페이지를 새로 고침하지.

14. ---

    14.

    function ajax_form(selector, obj)
    {
    
        var form = document.querySelectorAll(selector);
    
        if(obj)
        {
    
            var before = obj.before ? obj.before : function(){return true;};
    
            var $success = obj.success ? obj.success: function(){return true;};
    
            for (var i = 0; i < form.length; i++)
            {
    
                var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;
    
                var $form = form[i];
    
                form[i].submit = function()
                {
    
                    var xhttp = new XMLHttpRequest();
    
                    xhttp.open("POST", url, true);
    
                    var FD = new FormData($form);
    
                    /** prevent submiting twice */
                    if($form.disable === true)
    
                        return this;
    
                    $form.disable = true;
    
                    if(before() === false)
    
                        return;
    
                    xhttp.addEventListener('load', function()
                    {
    
                        $form.disable = false;
    
                        return $success(JSON.parse(this.response));
    
                    });
    
                    xhttp.send(FD);
    
                }
            }
        }
    
        return form;
    }
    

    그것이 어떻게 작동하는지 확인하지 않았다. 이 JQuery와 ajaxForm처럼 작동합니다, 그래서 당신은 또한 (이) 바인딩 할 수 있습니다

    를 같이 사용 :

    ajax_form('form',
    {
        before: function()
        {
            alert('submiting form');
            // if return false form shouldn't be submitted
        },
        success:function(data)
        {
            console.log(data)
        }
    }
    )[0].submit();
    

    당신은 위의 예 내가 제출 뭔가를 할 수 있도록 노드를 반환

    지금까지 완벽에서하지만 일에 가정, 당신은 오류 처리를 추가 또는 비활성화 상태를 제거해야합니다

15. ---

    15.조치를 사용하지 않는 경우 양식의 액션 속성에 : 그냥 "자바 스크립트"를 사용합니다.

    조치를 사용하지 않는 경우 양식의 액션 속성에 : 그냥 "자바 스크립트"를 사용합니다.

16. ---

    16.때로는 e.preventDefault (); 개발자가 행복하지만 때로는 개발자가 때때로하지 작동 왜 해결책을 발견 한 후 슬픈 한 후 작동하지 후 작동

    때로는 e.preventDefault (); 개발자가 행복하지만 때로는 개발자가 때때로하지 작동 왜 해결책을 발견 한 후 슬픈 한 후 작동하지 후 작동

    첫 번째 코드는 때때로 작동

    $("#prospects_form").submit(function(e) {
        e.preventDefault();
    });
    

    두 번째 옵션 왜 안됩니까? 이 JQuery와 또는 다른 자바 스크립트 라이브러리가 제대로로드되지 때문에 모든 JQuery와 및 자바 스크립트 파일이 제대로 여부를로드되었는지 콘솔에서 확인할 수 있습니다 작동하지 않습니다.

    이건 내 문제를 해결합니다. 나는이 당신을 위해 도움이 될 것입니다 바랍니다.

17. ---

    17.나는 이번이 마지막 해답이 될 것입니다 희망

    나는 이번이 마지막 해답이 될 것입니다 희망

    
    
    
    $('#the_form').submit(function(e){
      e.preventDefault()
      alert($(this).serialize())
      // var values = $(this).serialize()
      // logic....
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <form id="the_form">
       Label-A <input type="text" name='a'required><br>
       Label-B <input type="text" name="b" required><br>
       Label-C <input type="password" name="c" required><br>
       Label-D <input type="number" name="d" required><br>
       <input type="submit" value="Save without refresh">
    </form>
    
    
    
    
    

18. ---

    18.

    <div id="loginForm">
        <ul class="sign-in-form">
            <li><input type="text" name="username"/></li>
            <li><input type="password" name="password"/></li>
            <li>
                <input type="submit" onclick="loginForm()" value="click" />
            </li>
        </ul>
    </div>
    
    <script>
    function loginForm() {
        document.getElementById("loginForm").click();
    }
    </script>
    

19. ---

    19.그냥 제거하여, 매우 간단하지만 작업 해결책을 발견 <형식> 내가 게시 상쾌한 방지하고 싶었 섹션에서.

    그냥 제거하여, 매우 간단하지만 작업 해결책을 발견 <형식> 내가 게시 상쾌한 방지하고 싶었 섹션에서.

    <select id="youId" name="yourName">
    <select> 
    <option value="1</option>
    <option value="2</option>
    <option value="3</option>
    </select>
    <input id="formStockVal1" type="number"><br><br>
    <form> 
    <button type="reset" id="stockCancel">Cancel</button>
    <button type="reset" id="stockConfirm">Add</button>
    </form>
    
    

    여기에 전용 버튼은 정상적으로 제출합니다.

20. ---

    20.이 같은 그냥 넣어 반환 :

    이 같은 그냥 넣어 반환 :

    검증 함수 () { . VAR 자명 = document.getElementById를 ( '이름') 값; 경우 (사용자 이름 == "") { false를 반환; } 경우 (username.length <5 && username.length <15) { 경고 ( "길이해야한다 사이에 5 자 15"); false를 반환; } true를 반환; } 몸{ 패딩 : 0 픽셀; 여백 : 0 픽셀; } 입력{ 표시 : 블록; 마진 - 하단 : 10px; 높이 : 25 픽셀; 폭 : 200 픽셀; } 입력 [TYPE = "제출"{ 마진 : 자동; } 상표{ 표시 : 블록; 마진 - 하단 : 10px; } 형태{ 폭 : 500 픽셀; 높이 : 500 픽셀; 국경 : 1 픽셀의 초록색; 패딩 : 10px; 마진 : 자동; 최고 : 0; 바닥 : 0; 왼쪽 : 0; 오른쪽 : 0; 위치 : 절대; } .labels { 폭 : 35 %; 상자 크기 조정 : 국경 상자; 표시 : 인라인 블록; } .inputs { 폭 : 63 %; 상자 크기 조정 : 국경 상자; 패딩 : 10px; 표시 : 인라인 블록; } <메타 캐릭터 = "UTF-8">