양식 제출 jQuery에서 기본값 방지
이거 왜 이래요?
HTML:
<form action="<URL>http://localhost:8888/bevbros/index.php/test"
method="post" accept-charset="utf-8" id="cpa-form" class="forms">
<input type="text" name="zip" 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/
이것은 오래된 질문이지만, 여기서 받아들여진 대답은 실제로 문제의 근본에 도달하지 못합니다.
두 가지 방법으로 해결할 수 있습니다.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이 문제를 해결하기 위해.
위의 답변들이 모두 옳다고 믿지만, 그렇다고 해서 그것이 왜 옳은지는 지적되지 않습니다.submit방법이 작동하지 않습니다.
음, 그.submitjQuery가 가져올 수 없는 경우 메소드는 작동하지 않습니다.form요소, 그리고 jQuery는 그것에 대해 어떠한 오류도 주지 않습니다.스크립트가 문서 머리글에 있는 경우 코드가 다음 이후에 실행되는지 확인합니다.DOM준비됐습니다. 그래서.$(document).ready(function () { // your code here // });문제를 해결할 것입니다.
가장 좋은 방법은 항상 문서의 맨 아래에 스크립트를 넣는 것입니다.
$('#cpa-form input[name="Next"]').on('click', function(e){
e.preventDefault();
});
$(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
});
업데이트 - 동적으로 추가된 내용을 처리하려면 jQueryon() 메서드를 사용하고 DOM 문서를 들어보아야 합니다.
사례 1, 정적 버전:청취자 수가 적고 처리할 양식이 하드코딩된 경우, "문서 수준"에서 직접 청취할 수 있습니다.문서 수준에서 청취자를 사용하지는 않겠지만 성능 문제로 이어질 수 있기 때문에(웹 사이트의 크기와 콘텐츠에 따라 다름) 둠 트리에서 더 깊이 들어가려고 합니다.
$('form#formToHandle').on('submit'...
OR
$('form#formToHandle').submit(function(e) {
e.preventDefault();
// do something
});
사례 2, 동적 버전:만약 당신이 이미 당신의 코드에 있는 문서를 듣고 있다면, 이 방법이 당신에게 좋을 것입니다.나중에 DOM을 통해 추가되거나 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는 Google Tag Manager(GTM)에서 Ajax 양식을 사용할 수 있는 솔루션을 찾았습니다. 반환 false는 완료를 막고 Google 분석 솔루션에서 이벤트 활성화를 실시간으로 제출하는 것으로 e.proventDefault()로 반환 false를 변경하여 코드를 올바르게 따릅니다.
$("#Contact-Form").submit(function(e) {
e.preventDefault();
...
});
e.default()는 자바스크립트에 문제가 없는 경우에만 잘 작동합니다. e.preventDefault()가 작동하지 않는 경우 자바스크립트를 확인하십시오. JS의 다른 부분도 작동하지 않습니다.
저도 비슷한 문제에 직면했습니다.문제는 DOM 렌더가 발생하기 전에 JS 파일이 로드된다는 것입니다.그러니 이동합니다.<script><body>꼬리표를 달다
또는 defer를 사용합니다.
<script defer src="">
안심하세요 ㅠㅠㅠㅠㅠㅠㅠe.preventDefault()작동해야 합니다.
단추 유형을 정의하기만 하면 양식에서 웹 페이지를 새로 고칠 수 없습니다.
<button type="button" id="saveBtn">Save</button>
$('#saveBtn').click(function() {
});
나를 위해 일한 것:
$("#submitButtonOnForm").click(function(e) {
if (somecondition) {
e.preventDefault();
console.log('not submitted');
}
//form submission continues, no code needed
});
언급URL : https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery
'programing' 카테고리의 다른 글
| 순서에 따라 값을 그룹화합니다. (0) | 2023.08.27 |
|---|---|
| CGSize 개체의 값을 인쇄하거나 기록하는 방법은 무엇입니까? (0) | 2023.08.27 |
| iTunes Connect API (0) | 2023.08.27 |
| PHP의 다중 줄 문자열 리터럴 (0) | 2023.08.27 |
| div의 배경 이미지 url을 받을 수 있습니까? (0) | 2023.08.27 |