jQuery를 사용하여 - 제출에서 양식을 방지

해결법

1.두 가지 눈에 띄는 :

두 가지 눈에 띄는 :

옵션 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.당신은 아마 몇 가지 형태의 페이지 O 및 $ ( '양식')를 사용하여 있습니다. 페이지에있는 양식의 첫 번째 항목에이 이벤트를 추가 () 제출합니다. 대신 클래스 선택기를 사용하거나이 시도 :

당신은 아마 몇 가지 형태의 페이지 O 및 $ ( '양식')를 사용하여 있습니다. 페이지에있는 양식의 첫 번째 항목에이 이벤트를 추가 () 제출합니다. 대신 클래스 선택기를 사용하거나이 시도 :
```
$('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;
});
```
3.기본을 방지하기 위해 / 양식 제출 사용을 방지

기본을 방지하기 위해 / 양식 제출 사용을 방지
```
e.preventDefault();
```
이벤트 버블 링 사용을 중지하려면
```
e.stopPropagation();
```
양식 제출 '반환 거짓'을 방지하기 위해 너무 작동합니다.
4.나는 또한 같은 문제가 있었다. 나는 또한 당신이 시도했던 것을 시도했다. 그럼 사용하지 않을 JQuery와에 있지만 양식 태그에 "onsubmit"속성을 사용하여 내 방법을 변경합니다.

나는 또한 같은 문제가 있었다. 나는 또한 당신이 시도했던 것을 시도했다. 그럼 사용하지 않을 JQuery와에 있지만 양식 태그에 "onsubmit"속성을 사용하여 내 방법을 변경합니다.
```
<form onsubmit="thefunction(); return false;"> 
```
효과가있다.

난 단지 "thefunction ()"의 잘못된 반환 값을 넣어하려고 할 때 내가 삽입해야하므로 그러나, 그것은는 제출 프로세스에는 영향을주지 않는다 "반환 거짓을;" onsubmit 속성이다. 그래서, 내 양식 응용 프로그램은 자바 스크립트 함수의 반환 값을 얻을 수 없다는 결론 지었다. 나는 그것에 대해 어떤 생각을 가지고 있지 않습니다.
5.저도 같은 문제를 겪고 난 (우아하지만 작동하지 않음) 이런 식으로 해결 :

저도 같은 문제를 겪고 난 (우아하지만 작동하지 않음) 이런 식으로 해결 :
```
$('#form').attr('onsubmit','return false;');
```
그리고 그것은 당신이 상황을 당신이 원하는 시간을 되돌릴 수 있다는 것을, 내 의견으로는, 이점이있다 :
```
$('#form').attr('onsubmit','return true;');
```
6.(가) 폼 요소에없는 요소를 제출 이벤트를 연결합니다. 당신의 HTML에서 예를 들어 다음과 같이 할

(가) 폼 요소에없는 요소를 제출 이벤트를 연결합니다. 당신의 HTML에서 예를 들어 다음과 같이 할
```
$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});
```

7.당신은 단순히 예 그렇지 않으면 오류를 보여 논리를 제출 실행하면 폼이 유효한지 확인할 수 있습니다.

당신은 단순히 예 그렇지 않으면 오류를 보여 논리를 제출 실행하면 폼이 유효한지 확인할 수 있습니다.

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

8.나는 <형식> 속성 ID없이 태그 = "양식"을 사용하고 태그 이름으로 호출하고 때 직접 JQuery와의 그것은 나와 함께 작동합니다. HTML 파일의 코드 :

나는 <형식> 속성 ID없이 태그 = "양식"을 사용하고 태그 이름으로 호출하고 때 직접 JQuery와의 그것은 나와 함께 작동합니다. HTML 파일의 코드 :
```
<form action="page2.php" method="post">
```
및 JQuery와 스크립트 :
```
$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });
```
9.ID = "형태"를 가진 요소 $ ( '# 양식') 모습.

ID = "형태"를 가진 요소 $ ( '# 양식') 모습.

양식 요소 $ ( '양식') 외모

10.당신은 양식 ID를 잊어, 그것은 작동

당신은 양식 ID를 잊어, 그것은 작동

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

11.
```
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
```
여기에서 : https://api.jquery.com/submit-selector/ (유형을 제출 흥미로운 페이지)
12.이것은 또한 작업에 나타납니다 약간 더 간단 할 수 있습니다 :

이것은 또한 작업에 나타납니다 약간 더 간단 할 수 있습니다 :
```
$('#Form').on('submit',function(){
    return false;
})
```
13.jQuery를 사용하여 다음을 수행 할 수 있습니다 :

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!');
        }
    });
```

from https://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] A는 CSS로 메뉴를 <선택>에서 어떻게 <옵션>을 숨기려면? (0)	2020.09.29
[JQUERY] 왜 JQuery와 모바일에서 index.html을 모든 스크립트를 넣어 가지고 (0)	2020.09.29
[JQUERY] 방법은 iframe에 'X 프레임 - 옵션'을 설정하는 방법? (0)	2020.09.29
[JQUERY] 이름 속성에 대괄호와 입력에 대한 jQuery를 선택 (0)	2020.09.29
[JQUERY] 트리거 JS / jQuery를에 키 누르기 /를 keyDown /의 keyup 이벤트? (0)	2020.09.29

복붙노트

[JQUERY] jQuery를 사용하여 - 제출에서 양식을 방지

jQuery를 사용하여 - 제출에서 양식을 방지

해결법

1.두 가지 눈에 띄는 :

2.당신은 아마 몇 가지 형태의 페이지 O 및 $ ( '양식')를 사용하여 있습니다. 페이지에있는 양식의 첫 번째 항목에이 이벤트를 추가 () 제출합니다. 대신 클래스 선택기를 사용하거나이 시도 :

3.기본을 방지하기 위해 / 양식 제출 사용을 방지

4.나는 또한 같은 문제가 있었다. 나는 또한 당신이 시도했던 것을 시도했다. 그럼 사용하지 않을 JQuery와에 있지만 양식 태그에 "onsubmit"속성을 사용하여 내 방법을 변경합니다.

5.저도 같은 문제를 겪고 난 (우아하지만 작동하지 않음) 이런 식으로 해결 :

6.(가) 폼 요소에없는 요소를 제출 이벤트를 연결합니다. 당신의 HTML에서 예를 들어 다음과 같이 할

7.당신은 단순히 예 그렇지 않으면 오류를 보여 논리를 제출 실행하면 폼이 유효한지 확인할 수 있습니다.

8.나는 <형식> 속성 ID없이 태그 = "양식"을 사용하고 태그 이름으로 호출하고 때 직접 JQuery와의 그것은 나와 함께 작동합니다. HTML 파일의 코드 :

9.ID = "형태"를 가진 요소 $ ( '# 양식') 모습.

10.당신은 양식 ID를 잊어, 그것은 작동

11.

12.이것은 또한 작업에 나타납니다 약간 더 간단 할 수 있습니다 :

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

'JQUERY' 카테고리의 다른 글

티스토리툴바