양식 제출 jQuery에서 기본값 방지

138

이게 뭐가 문제 야?

HTML :

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery :

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

jquery preventdefault

— Djreed
소스

12

여기서 잘 작동합니다 . 질문에 더 많은 정보를 게시 할 수 있습니까? alert()제출 핸들러에 있으면 호출됩니까? 그렇지 않은 경우 스크립트에 오류가 발생하여 이벤트 핸들러가 올바르게 연결되지 않을 수 있습니다. 오류 콘솔에 무엇이 있습니까?

— Town

3

그 링크는 내부적이며 우리에게 무용지물입니다.

— Steve Robbins

이전 버전이 캐시되었을 수 있습니다. 지금 일하는 것 같습니다.

— djreed

1

event.preventDefault ()의

— Liam

2

! DOM이 준비된 후에 자바 스크립트 코드가 실행되는지 확인하십시오.

— towry

175

이 시도:

$("#cpa-form").submit(function(e){
    return false;
});

— 요르단 브라운
소스

12

작동하지만 preventDefault의 선호 방법이 작동하지 않는 이유는 무엇입니까?

— MikeJ

26

자세한 설명은이 질문을 참조하십시오. stackoverflow.com/questions/1357118/…

— Jordan Brown

8

이것은 잘못된 대답입니다. e.preventDefault()양식 제출에 문제가 없으며 OP 코드의 다른 곳에 문제가 있습니다. 사용하면 의도하지 않은 결과 return false 가 발생할 수 있습니다.

— 척 레 버트

58

새로운 "on"이벤트 구문을 사용하십시오.

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

인용 : https://api.jquery.com/on/

— scarver2
소스

2

안녕하세요. 이것은 나를 위해 작동하지 않습니다. (예, 코드를 내부에 넣습니다 $(document).ready()) 어떻게 작동합니까?

— Gui Imamura

1

@GuiImamura 더 많은 정보가 필요합니다. 유효한 변수를 true또는로 설정 했습니까 false? jsfiddle.net에서 코드를 다시 만들고 링크를 보낼 수 있습니까? 를 추가 alert()하여 함수가 실행 중인지 확인 하십시오 . 일부 사람들은 e.stopPropagation();이후 에 추가 e.preventDefault();하면 다른 연쇄 이벤트가 발생하지 않는다고 보고했습니다 .

— scarver2

안녕하세요, 내가 사용 $('#myFormID').validationEngine('validate')에서 jQuery를 validationEngine 변수로 valid입력 어떠했는지를 확인하는 것은, 유효한 전자 메일 주소입니다. 그럼에도 불구하고 나는 기본 행동을 막기 위해 그것을 원한다. 않습니다 preventDefault하지 그 전에 경우 블록 내부해야?

— Gui Imamura

@GuiImamura 당신이 그것을 작동하게되어 기쁘다. 는 preventDefault내부입니다 유효하지 않을 경우 양식의 제출을 중지 블록. 즉, 유효한 경우 양식의 기본 동작을 사용하십시오.

— scarver2

13

위의 답변이 모두 정확하다고 생각하지만이 submit방법이 작동하지 않는 이유를 지적 하지는 않습니다.

음, submitjQuery를이 얻을 수없는 경우 방법이 작동하지 않습니다 form요소를, 그리고 jQuery를 그것에 대해 오류를 제공하지 않습니다. 스크립트가 문서의 헤드에 있으면 코드 DOM가 준비된 후에 실행하십시오 . 따라서 $(document).ready(function () { // your code here // });문제를 해결할 것입니다.

가장 좋은 방법은 항상 스크립트를 문서의 맨 아래에 두는 것입니다.

— 견인
소스

11

이것은 고대의 질문이지만 여기서 받아 들여지는 대답은 실제로 문제의 근원에 도달하지는 않습니다.

이 두 가지 방법으로 해결할 수 있습니다. 먼저 jQuery를 사용하십시오.

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

또는 jQuery가 없으면 :

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

return false이 문제를 해결하기 위해 사용할 필요는 없습니다 .

— 척 르 엉덩이
소스

jquery 이벤트 리스너 대신 기본 js 이벤트 리스너를 교체했으며 작동합니다. 아이디어 주셔서 감사합니다.

— Orhan Gazi

6

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

— Crisalin Petrovschi
소스

이것은 서버 측 양식 안에 클라이언트 측 양식이있는 페이지에서 나에게 완벽하게 작동합니다.

— Liknes

3

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

— 쉬라 다 다르마 머
소스

2

귀하의 코드는 괜찮습니다. 준비된 함수 안에 배치하면됩니다.

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

— 자이 카투 리아
소스

이 조언은 이미 다른 답변에서 제공됩니다. 페이지 부풀림을 줄이려면이 답변을 제거하십시오. 동일한 감정을 나타내는 다른 답변을 찬성 할 수 있습니다.

— mickmackusa

2

더 이상 사용 되지 않음-이 부분이 오래되어 사용하지 마십시오.

예를 들어 나중에 동적 양식을 추가 한 경우이 코드를 사용해 볼 수도 있습니다. 예를 들어 ajax와 함께 비동기 창을로드 하고이 양식을 제출하려고합니다.

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

업데이트 -동적으로 추가 된 내용을 처리하려면 jQuery on () 메소드를 사용하여 문서 DOM을 들어보십시오.

사례 1, 정적 버전 : 몇 개의 리스너 만 있고 처리 할 양식이 하드 코딩 된 경우 "문서 레벨"에서 직접들을 수 있습니다. 문서 수준에서 리스너를 사용하지는 않지만 성능 문제로 이어질 수 있으므로 둠 트리에서 더 깊이 들어 가려고합니다 (웹 사이트의 크기와 내용에 따라 다름)

$('form#formToHandle').on('submit'...

또는

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

사례 2, 동적 버전 : 코드에서 이미 문서를 듣고 있다면이 방법이 좋습니다. 이것은 나중에 DOM을 통해 추가되거나 AJAX를 통해 동적으로 추가 된 코드에서도 작동합니다.

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

또는

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

또는

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

— NFlows
소스

7

.live()jQuery 1.7부터 더 이상 사용되지 않으며 1.9부터 제거되었습니다. .on()대신 사용하십시오 .

— 행크

0

Hello는 Ajax 양식을 Google 태그 관리자 (GTM)와 함께 작동시키는 솔루션을 찾았습니다. false를 반환하면 Google 분석 솔루션에서 이벤트 완료를 실시간으로 제출하고 이벤트를 제출하여 e.preventDefault ()를 통해 false를 반환하는 것이 었습니다 ; 올바르게 작동하는 코드는 다음과 같습니다.

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

— 나비
소스

0

e.preventDefault ()는 자바 스크립트에 문제가없는 경우에만 잘 작동합니다 .e.preventDefault ()가 작동하지 않으면 자바 스크립트를 확인하십시오.

— ndoty
소스

0

잘 비슷한 문제가 발생했습니다. 나에게 문제는 DOM 렌더링이 발생하기 전에 JS 파일이로드된다는 것입니다. 그래서 당신 <script>의 끝으로 이동<body>태그 .

또는 연기를 사용하십시오.

<script defer src="">

안심하십시오 e.preventDefault().

— 비네 쉬 전쟁
소스