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

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

---

이게 뭐가 문제 야?

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

---

이 시도:

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

---

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

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

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

---

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

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

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

---

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

---

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

이 두 가지 방법으로 해결할 수 있습니다. 먼저 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이 문제를 해결하기 위해 사용할 필요는 없습니다 .

---

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

---

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

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

---

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

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

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

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

Case 1, static version: If you have only a few listeners and your form to handle is hardcoded, then you can listen directly on "document level". I wouldn't use the listeners on document level but I would try to go deeper in the doom tree because it could lead to performance issues (depends on the size of your website and your content)

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

OR

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

Case 2, dynamic version: If you already listen to the document in your code, then this way would be good for you. This will also work for code that was added later via DOM or dynamic with AJAX.

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

OR

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

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

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

OR

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

---

Hello sought a solution to make an Ajax form work with Google Tag Manager (GTM), the return false prevented the completion and submit the activation of the event in real time on google analytics solution was to change the return false by e.preventDefault (); that worked correctly follows the code:

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

---

e.preventDefault() works fine only if you dont have problem on your javascripts, check your javascripts if e.preventDefault() doesn't work chances are some other parts of your JS doesn't work also

참고URL : https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery