JQuery 사용-양식 제출 방지

178

jquery를 사용하여 양식을 제출하지 못하게하려면 어떻게합니까?

나는 모든 것을 시도했다-아래에서 시도한 3 가지 옵션을 참조하십시오.하지만 모두 작동하지 않습니다. 

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

무엇이 잘못 될 수 있습니까?

업데이트-여기 내 HTML이 있습니다 :

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

여기에 문제가 있습니까?

jquery  forms 
— 루시 웨더 포드
소스
preventDefault에 아무 문제가 없으므로 HTML을 표시하거나 선택자가 완전히 잘못한 것 외에는 게시 할 때 false를 반환합니다.
— Sparky
1
return false;.submit()나를 위해 일한 후 ! 나는 같은 문제가 있었다
— d -_- b
핸들러에서 JavaScript 오류가 발생하면 e.preventDefault();코드에 도달 / 실행되지 않습니다.
— Tom

답변:

263

두 가지가 두드러집니다.

  • 양식 이름이 아닐 수도 form있습니다. 대신 #을 삭제하여 태그를 참조하십시오.

  • 또한 e.preventDefault올바른 JQuery 구문입니다.

        //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

옵션 C도 작동해야합니다. 나는 옵션 B에 익숙하지 않다

완전한 예 :

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>
— 필립 푸리
소스
2
다른 것이 잘못되었습니다. 이 기술을 매일 사용하고 있습니다. 가장 좋은 추측은 페이지에 JavaScript 오류가 있다는 것입니다. FireBug로 확인하십시오.
— Philip Fourie
@LucyWeatherford, 나는 작동하는 샘플로 답변을 업데이트했습니다. 어쩌면 당신은 someting을 발견.
— Philip Fourie 2012
업데이트 html에서 양식에 클래스 속성이 있음을 알았습니다. 클래스 속성 $('#form')에 $('.form')대해 JQuery 선택기를에서 로 변경하십시오 .
— Philip Fourie 2012
1
감사! 나는 같은 페이지에서 코드를 사용하여 끝났지 만 여전히 문제가 무엇인지 확실하지 않지만 지금은 모두 훌륭합니다. 감사!
— Lucy Weatherford 8
1
@ ÂngeloRigo e는 단순히 매개 변수에 부여한 이름이며,이 경우 제출 이벤트입니다.
— squall3d
34

페이지에 양식이 거의없고 $ ( 'form'). submit ()을 사용하면이 이벤트가 페이지에서 처음 나타나는 양식에 추가됩니다. 대신 클래스 선택기를 사용하거나 다음을 시도하십시오.

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

또는 더 나은 버전 :

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});
— 아르 템 키셀 레프
소스
1
제 경우에는 거짓을 돌려주는 것이 열쇠였습니다.
— elquimista
19

기본 / 예방 양식 제출 사용을 방지하려면

e.preventDefault();

이벤트 버블 링 사용을 중지하려면

e.stopPropagation();

양식 제출을 방지하려면 '거짓 반환'도 작동해야합니다.

— 알파
소스
jQuery가 다르게 처리하기 때문에이 답변을 참조하십시오. stackoverflow.com/questions/1357118/…
— 스파키
1
이벤트 버블 링
— The Alpha
2
의 jQuery API의 상태는 "이벤트 핸들러에서 false를 반환하면 자동 호출 event.stopPropagation()및 event.preventDefault()의. false값도에 대한 속기로 핸들러 전달 될 수 있습니다 function(){ return false; }."
— Paul
7

나도 같은 문제가 있었다. 나는 또한 당신이 시도한 것을 시도했습니다. 그런 다음 jquery를 사용하지 않고 양식 태그에서 "onsubmit"속성을 사용하여 메소드를 변경합니다.

<form onsubmit="thefunction(); return false;">

효과가있다.

그러나 "thefunction ()"에만 잘못된 반환 값을 넣으려고하면 제출 프로세스를 방해하지 않으므로 "return false;"를 넣어야합니다. onsubmit 속성에서. 따라서 양식 응용 프로그램이 Javascript 함수에서 반환 값을 가져올 수 없다고 결론을 내립니다. 나는 그것에 대해 전혀 모른다.

— 루키 비 수 벡티
소스
1
그것은 간의 차이 false;와 return false;. 당신이해야 할 것onsubmit="return thefunction();"
— xr280xr
4

나는 같은 문제가 있었고이 방법으로 해결했습니다 (우아하지는 않지만 작동합니다).

$('#form').attr('onsubmit','return false;');

제 생각에는 언제든지 언제든지 상황을 되돌릴 수 있다는 장점이 있습니다.

$('#form').attr('onsubmit','return true;');
— vinxxe
소스
양식 제출 방지를 되돌릴 때 속성을 제거하는 것이 좀 더 편할 것입니다.$('#form').removeAttr('onsubmit');
— barbieswimcrew
4

양식 요소가 아닌 제출 요소에 이벤트를 첨부하십시오. 예를 들어 html에서 다음과 같이하십시오.

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});
— 엠 와이즈
소스
2

예, 제출 논리를 실행하면 오류가 표시되면 양식이 유효한지 간단히 확인할 수 있습니다.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

자바 스크립트

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });
— 코드 스파이
소스
1

<form>속성없이 태그를 사용 id="form"하고 jquery에서 태그 이름으로 직접 호출하면 나와 함께 작동합니다.
html 파일의 코드 :

<form action="page2.php" method="post">

그리고 Jquery 스크립트에서 :

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });
— 노하 살라
소스
1

$('#form')로 요소를 찾습니다 id="form".

$('form') 양식 요소를 찾습니다

— 라훌
소스
0

이것은 또한 작동하는 것으로 보이며 약간 더 간단 할 수 있습니다.

$('#Form').on('submit',function(){
    return false;
})
— ukuser32
소스
0

jQuery를 사용하여 다음을 수행 할 수 있습니다.

1- 이벤트가 실행되지 않도록하면서 제출 단추와 함께 기본 양식 제출 이벤트를 사용하십시오.

2- 양식을 확인하십시오. 유효한 속성 다음과 같이 구현할 수 있습니다.

1- HTML :

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- 자바 스크립트

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });
— 모하메드 나 기브
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.