JQuery 사용 - 양식 제출 금지
jquery를 사용하여 양식을 제출하지 못하게 하려면 어떻게 해야 합니까?
저는 모든 것을 시도했습니다. 아래의 세 가지 다른 옵션을 참조하십시오. 하지만 모두 작동하지 않습니다.
$(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();
양식 제출을 방지하려면 'return false'도 작동해야 합니다.
저도 같은 문제를 겪었습니다.저도 당신이 시도한 것을 시도했습니다.그런 다음 jquery를 사용하지 않고 양식 태그의 "onsubmit" 속성을 사용하여 메서드를 변경합니다.
<form onsubmit="thefunction(); return false;">
그건 효과가 있다.
그러나 거짓 반환 값을 입력하려고 했을 때thefunction()하지 않기 저는 제출과방않시, 반드는나를 .return false;onsubmit기여하다.
저도 같은 문제를 겪었고 이 방법으로 해결했습니다(우아하지는 않지만 효과가 있습니다).
$('#form').attr('onsubmit','return false;');
그리고 제 생각에는 언제든지 상황을 되돌릴 수 있다는 장점이 있습니다.
$('#form').attr('onsubmit','return true;');
이벤트를 양식 요소가 아닌 제출 요소에 첨부합니다.예를 들어 HTML에서 다음과 같이 하십시오.
$('input[type=submit]').on('click', function(e) {
e.preventDefault();
});
yes run submit logic을 실행하거나 error를 표시하는 경우 양식이 유효한지 간단히 확인할 수 있습니다.
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();
});
});
jQuery를 사용하여 다음 작업을 수행할 수 있습니다.
기본 양식 제출 이벤트를 제출 단추와 함께 사용하고 이벤트가 실행되지 않도록 합니다.
Valid property 양식을 선택합니다.
이는 다음과 같이 구현할 수 있습니다.
HTML:
<form id="yourForm"> <input id="submit" type="submit" value="Save"/> </form>JavaScript:
$("form").on("submit", function (e) { e.preventDefault(); if ($(this).valid()) { alert('Success!'); } });
당신은 ID를 잊어버렸고, 그것은 작동합니다.
$('form#form').submit(function(e){
e.preventDefault();
alert('prevent submit');
});
를 할 때<form>이 없는 id="form"저와 함께 작동하는 jquery에서 태그 이름으로 직접 부릅니다.
파일의 : HTML 파일:
<form action="page2.php" method="post">
그리고 Jquery 스크립트에서:
$(document).ready(function() {
$('form').submit(function(evt){
evt.preventDefault();// to stop form submitting
});
});
$('#form')는 사하여요찾습다니소를를이 있는 .id="form".
$('form') " " 를 .
이것도 작동하는 것으로 보이며 약간 더 단순할 수 있습니다.
$('#Form').on('submit',function(){
return false;
})
양식 제출을 금지한 다음 상황을 되돌리는 방법, 즉 나중에 양식 제출을 허용하는 방법에 대한 정보가 누락되었습니다.
다음은 예입니다.
var savebtn_clicked;
$('form#commentform').submit( function(e) {
return savebtn_clicked;
});
$('#savebtn').click( function() {
savebtn_clicked = true;
$('#form#commentform').submit();
});
제 경우에는 모든 버튼이 폼을 작동시켰습니다.위의 코드로 양식을 제출할 수 있는 버튼을 제어할 수 있었습니다.
양식 데이터 제출을 금지한 다음 해제합니다.
$("form").on("submit", function (e) {
e.preventDefault();
alert('Ok');
$( this ).unbind( 'submit' ).submit(); // Release
});
- 그건 효과가 있다.
// Prevent form submission
$( "form" ).submit(function( event ) {
event.preventDefault();
});
여기서: https://api.jquery.com/submit-selector/ (제출 유형에 대한 흥미로운 페이지)
언급URL : https://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting
'source' 카테고리의 다른 글
| MySQL 클러스터(NDB) 대 MySQL 복제(InnoDB) for Rails 3 앱: 찬성/반대? (0) | 2023.08.30 |
|---|---|
| JQuery 이벤트는 ASP에서 작동하지 않습니다.NET MVC 부분 뷰 (0) | 2023.08.30 |
| 이 클래스는 SomeModule -> SomeComponent를 통해 소비자에게 표시되지만 최상위 라이브러리 진입점에서 내보내지 않습니다. (0) | 2023.08.30 |
| 시퀀스와 자동 증분에서 모두 작동하도록 @GeneratedValue를 사용하는 방법이 있습니까? (0) | 2023.08.30 |
| 스프링 부트를 2.1.9에서 2.2.0으로 업그레이드하여 시작하는 동안 예외 발생 (0) | 2023.08.30 |