[jquery] JQuery 사용-양식 제출 방지

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>

여기에 문제가 있습니까?

답변

두 가지가 두드러집니다.

양식 이름이 아닐 수도 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>

답변

페이지에 양식이 거의없고 $ ( ‘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;
});

답변

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

e.preventDefault();

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

e.stopPropagation();

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

답변

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

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

효과가있다.

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

답변

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

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

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

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

답변

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

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

답변

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

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();
        });
    });