JQuery 사용-양식 제출 방지
jquery를 사용하여 양식을 제출하지 못하게하려면 어떻게합니까?
나는 모든 것을 시도했다-아래에서 시도한 3 가지 옵션을 참조하십시오.하지만 모두 작동하지 않습니다.
$(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();
To prevent form submission 'return false' should work too.
I also had the same problem. I also had tried what you had tried. Then I change my method not to use jquery but by using "onsubmit" attribute in the form tag.
<form onsubmit="thefunction(); return false;">
It works.
But, when I tried to put the false return value only in "thefunction()", it doesn't prevent the submitting process, so I must put "return false;" in onsubmit attribute. So, I conclude that my form application cannot get the return value from Javascript function. I don't have any idea about it.
I had the same problem and I solved this way (not elegant but it works):
$('#form').attr('onsubmit','return false;');
And it has the advantage, in my opinion, that you can revert the situation any time you want:
$('#form').attr('onsubmit','return true;');
Attach the event to the submit element not to the form element. For example in your html do like this
$('input[type=submit]').on('click', function(e) {
e.preventDefault();
});
When I am using <form> tag without the attribute id="form" and call it by its tag name directly in jquery it works with me.
your code in html file :
<form action="page2.php" method="post">
and in Jquery script:
$(document).ready(function() {
$('form').submit(function(evt){
evt.preventDefault();// to stop form submitting
});
});
You may simply check if the form is valid if yes run submit logic otherwise show 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>
Javascript
$(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();
});
});
$('#form') looks for an element with id="form".
$('form') looks for the form element
You forget the form id, and it works
$('form#form').submit(function(e){
e.preventDefault();
alert('prevent submit');
});
// Prevent form submission
$( "form" ).submit(function( event ) {
event.preventDefault();
});
from here: https://api.jquery.com/submit-selector/ (interesting page on submit types)
참고URL : https://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting
'IT' 카테고리의 다른 글
| 스트림을 사용하여 BigDecimals 추가 (0) | 2020.06.11 |
|---|---|
| jQuery를 사용하여 메타 태그를 읽을 수 있습니까? (0) | 2020.06.11 |
| this.setState는 예상대로 상태를 병합하지 않습니다. (0) | 2020.06.10 |
| overflow : hidden 또는 overflow : scroll div의 실제 .height ()는 어떻게 얻습니까? (0) | 2020.06.10 |
| 부모를 기준으로 자식 요소의 색인을 가져옵니다. (0) | 2020.06.10 |