단추가 양식을 제출하지 않도록 하는 방법
다음 페이지에서 Firefox에서는 remove 버튼을 누르면 폼이 전송되지만 add 버튼은 전송되지 않습니다.
어떻게 이 문제를 막을 수 요?remove튼을을 눌러? ???
function addItem() {
var v = $('form :hidden:last').attr('name');
var n = /(.*)input/.exec(v);
var newPrefix;
if (n[1].length == 0) {
newPrefix = '1';
} else {
newPrefix = parseInt(n[1]) + 1;
}
var oldElem = $('form tr:last');
var newElem = oldElem.clone(true);
var lastHidden = $('form :hidden:last');
lastHidden.val(newPrefix);
var pat = '=\"' + n[1] + 'input';
newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"' + newPrefix + 'input'));
newElem.appendTo('table');
$('form :hidden:last').val('');
}
function removeItem() {
var rows = $('form tr');
if (rows.length > 2) {
rows[rows.length - 1].html('');
$('form :hidden:last').val('');
} else {
alert('Cannot remove any more rows');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<html>
<body>
<form autocomplete="off" method="post" action="">
<p>Title:<input type="text" /></p>
<button onclick="addItem(); return false;">Add Item</button>
<button onclick="removeItem(); return false;">Remove Last Item</button>
<table>
<th>Name</th>
<tr>
<td><input type="text" id="input1" name="input1" /></td>
<td><input type="hidden" id="input2" name="input2" /></td>
</tr>
</table>
<input id="submit" type="submit" name="submit" value="Submit">
</form>
</body>
</html>HTML5 버튼 요소를 사용하고 있습니다.이 버튼은 W3 사양에 기재되어 있는 바와 같이 디폴트 동작인 submit을 가지고 있기 때문에 주의해 주십시오.W3C HTML5 버튼
따라서 유형을 명시적으로 지정해야 합니다.
<button type="button">Button</button>
디폴트 송신 타입을 덮어쓰기 위해서입니다.나는 단지 왜 이런 일이 일어나는지 지적하고 싶다.
버튼의 타입을 설정합니다.
<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>
핸들러에서 했을 때 않도록 .이벤트 핸들러에서 예외가 발생했을 때 전송 액션을 트리거하지 않도록 합니다.다음 .removeItem()예외를 트리거하지 않도록 기능을 수행합니다.
function removeItem() {
var rows = $('form tr');
if ( rows.length > 2 ) {
// change: work on filtered jQuery object
rows.filter(":last").html('');
$('form :hidden:last').val('');
} else {
alert('Cannot remove any more rows');
}
}
변경에 주의해 주세요.원래 코드는 jQuery 세트에서 HTML 요소를 추출한 후 jQuery 메서드를 호출하려고 했습니다.이로 인해 예외가 발생하여 버튼의 기본 동작이 발생하였습니다.
WWIW, 다른 방법이 있어jQuery를 사용하여 이벤트핸들러를 연결하고 jQuery의 이벤트 오브젝트에서 prevent Default() 메서드를 사용하여 기본 동작을 사전에 취소합니다.
$(function() // execute once the DOM has loaded
{
// wire up Add Item button click event
$("#AddItem").click(function(event)
{
event.preventDefault(); // cancel default behavior
//... rest of add logic
});
// wire up Remove Last Item button click event
$("RemoveLastItem").click(function(event)
{
event.preventDefault(); // cancel default behavior
//... rest of remove last logic
});
});
...
<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>
하려면 , 를 변경할 수도 있습니다」type의 「」로 submit이벤트 서버 측 처리 - 이를 방해받지 않는 JavaScript라고 합니다.
얼마 전에 난 아주 비슷한 게 필요했는데...알았어.
여기서 설명하는 것은 사용자가 버튼(일반적으로 송신 버튼)을 눌렀을 때만 검증 및 검증을 수행할 수 있는 폼을 JavaScript에서 제출할 수 있도록 하는 방법입니다.
이 예에서는 두 개의 필드와 제출 버튼이 있는 최소 형식을 사용합니다.
필요한 것을 기억해 주세요.JavaScript에서 체크 없이 전송할 수 있어야 합니다.단, 사용자가 이러한 버튼을 누르면 검증이 완료되고 검증에 합격한 경우에만 폼이 전송되어야 합니다.
통상, 모든 것은 이 근처로부터 시작됩니다(중요하지 않은 것은 모두 삭제했습니다).
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>
에 「」가 해 주세요.onsubmit="..."(그것은 그것이 없는 조건이었다는 것을 기억하라).
는 그 이 꼭입니다.onclicktrue ★★★★★★★★★★★★★★★★★」false.
★★★★★★★★★★★★★★★를 바꾸면,type="submit"★★★★★★에type="button"동작하는 것처럼 보이지만 동작하지 않습니다.양식을 보내지는 않지만, 쉽게 보낼 수 있습니다.
그래서 마지막으로 이걸 썼어요.
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>
★★★★★★★★★★★★★★★.function Validator서, snowledge.return True;자바스크립트이 문장은 다음과 같습니다.
function Validator(){
// ...bla bla bla... the checks
if( ){
document.getElementById('theFormID').submit();
return(true);
}else{
return(false);
}
}
id=""는 JavaScript JavaScript 입니다.getElementById , . . . . . . . .name=""POST ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」
그렇게 하면 내가 원하는 대로 된다.
은 꼭 입니다.onsubmit폼에서 기능하지만 사용자가 버튼을 눌렀을 때 유효성을 확인합니다.
폼 태그에 온서밋이 필요 없는 이유는 무엇입니까?쉽게, 다른 JavaScript 부품에서는 제출을 수행해야 하지만 검증은 하고 싶지 않습니다.
이유:사용자가 원하는 제출을 수행하고 검증이 필요한 경우이지만 JavaScript일 경우 검증이 필요 없을 때 제출할 필요가 있을 수 있습니다.
이상하게 들릴 수도 있지만 예를 들어 로그인 시... 제한 사항이 있는...예를 들어 PHP 세션 사용을 허용하지 않으며 쿠키도 허용되지 않습니다.
따라서 로그인 데이터가 손실되지 않도록 모든 링크를 해당 형식으로 변환해야 합니다.로그인이 아직 완료되지 않은 경우, 이 로그인도 동작해야 합니다.따라서 링크에 대한 검증을 수행할 필요가 없습니다.그러나 사용자가 user와 pass 두 필드를 모두 입력하지 않은 경우 사용자에게 메시지를 표시하고 싶습니다.그래서 한 개가 없으면 양식을 보내서는 안 된다! 문제가 있다.
문제를 보십시오. 사용자가 버튼을 누른 경우에만 하나의 필드가 비어 있을 때 폼을 전송해서는 안 됩니다. JavaScript 코드일 경우 폼을 전송할 수 있어야 합니다.
가 그 onsubmit자바스크립트매개 변수를 전달할 수 없기 때문에 직접 전달할 수 없기 때문에 검증이 필요한지 여부를 알려주는 변수를 추가하는 사람도 있습니다.검증기능의 첫 번째는 그 변수값 등을 확인하는 것이다.너무 복잡하고 코드는 무엇이 정말 원하는지 말해주지 않는다.
따라서 해결책은 폼태그에 on-submit을 붙이지 않는 것입니다.Insead는 그것을 정말 필요한 곳에 버튼 위에 놓았습니다.
다른 쪽에서는 개념적으로 온서밋 검증을 원하지 않기 때문에 코드를 송신하는 이유는 무엇입니까?버튼 인증을 꼭 받고 싶습니다.
암호가 더 명확할 뿐만 아니라 반드시 있어야 할 위치이기도 합니다.이것만 기억해주세요: - 자바스크립트가 폼을 검증하는 것을 원하지 않습니다(서버측에서 항상 PHP에 의해 수행되어야 함) - 사용자에게 모든 필드가 비어 있지 않아야 하며 JavaScript(클라이언트측)가 필요하다는 메시지를 보여주고 싶습니다.
그렇다면 왜 온섬 검증에 따라서는 안 되는 사람이 있는가(생각하거나 말해 주십시오)?아니요, 개념적으로는 클라이언트 측에서 온서밋 검증을 하고 있지 않습니다.그냥 버튼만 누르면 되는 건데 왜 그냥 하지 않는 거죠?
그 코드와 스타일은 완벽하게 통한다.방금 입력한 폼을 전송해야 하는 JavaScript의 경우:
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there
그리고 내가 필요하지 않을 때 검증은 생략한다.폼을 전송하고 다른 페이지를 로드하는 것 등입니다.
, 가 []버튼 [Submit])을 하면 ([Submit])을 클릭하면type="button"type="submit"검증은 폼을 송신하기 전에 행해지며, 유효하지 않은 경우는 송신하지 않습니다.
이것이 다른 사람들이 길고 복잡한 코드를 시도하지 않는 데 도움이 되기를 바랍니다. 사용하지 .onsubmit없는 는, 「」를 사용해 주세요.onclick, type="submit"로로 합니다.type="button" 잊지 꼭 해.submit()자바스크립트
Shog9에 동의하지만 대신 다음을 사용할 수 있습니다.
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
w3schools에 따르면<button>하다
jQuery를 사용하면 버튼의 참조를 얻을 수 있으며, 다음과 같이 버튼의 전파를 방지할 수 있습니다.
$(document).ready(function () {
$('#BUTTON_ID').click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});});
$("form").submit(function () { return false; });의 타입을 「버튼도, 「「버튼」으로 할 수도 .<input type="button"/><input type="submit"/>이 버튼은 이 양식에서 유일한 버튼이 아닐 때만 작동합니다.
에 HTML이 있다고 합니다.id="form_id"
<form id="form_id">
<!--your HTML code-->
</form>
결과를 보려면 이 jQuery 스니펫을 코드에 추가하십시오.
$("#form_id").submit(function(){
return false;
});
가 있다, 단추가 있다, 이런 거.<button>Click to do something</button>[전송]
붙여야 요.type
이것은 앞서 말한 바와 같은 html5 오류입니다.이 버튼을 계속 송신할 수 있습니다(javascript 사용자와 nonjavascript 사용자 모두를 커버하고 싶은 경우).
<button type="submit" onclick="return false"> Register </button>
이렇게 하면 전송이 취소되지만 jquery 또는 javascript 함수로 수행 중인 모든 작업을 수행할 수 있으며 javascript가 없는 사용자를 위해 전송이 수행됩니다.
더하면 돼요.e.preventDefault();이 방법을 사용하면 페이지가 양식을 제출하지 마십시오.
function myFunc(e){
e.preventDefault();
}
MDN Web Docs에 따르면
이벤트 인터페이스의 preventDefault() 메서드는 이벤트가 명시적으로 처리되지 않은 경우 기본 액션을 보통과 동일하게 고려하지 않도록 사용자에게 알려줍니다. 중 한 명이 호출하지 않는 한 정상적으로 됩니다.
stopPropagation ()★★★★★★★★★★★★★★★★★」stopImmediatePropagation ()어느 쪽인가 하면 전파가 종료됩니다.
return false는 기본 동작을 방지합니다.그러나 반환 false는 추가 클릭 이벤트의 버블링을 차단합니다.즉, 이 함수가 호출된 후 다른 클릭바인딩이 있는 경우 다른 클릭바인딩은 고려되지 않습니다.
<button id="btnSubmit" type="button">PostData</button>
<Script> $("#btnSubmit").click(function(){
// do stuff
return false;
}); </Script>
아니면 그냥 이렇게 붙일 수도 있어요.
<button type="submit" onclick="return false"> PostData</button>
저는 FF에서
removeItem
함수에 JavaScript 오류가 발생했지만 IE에서는 발생하지 않았습니다.
javascript 오류 발생 시 "return false" 코드가 실행되지 않고 페이지를 포스트백으로 만듭니다.
버튼을 정상적으로 설정하고 event.proventDefault like를 사용합니다.
<button onclick="myFunc(e)"> Remove </button>
...
...
In function...
function myFunc(e){
e.preventDefault();
}
return false;
함수 종료 시 또는 함수 호출 후에 false를 반환할 수 있습니다.
그것이 마지막이 되는 한, 양식은 제출되지 않습니다.
<input />
그것을 사용하다
<input type="button"/>
<button>btn</button>
그것을 사용하다
<button type="button">btn</button>
간단한 접근방식은 다음과 같습니다.
$('.mybutton').click(function(){
/* Perform some button action ... */
alert("I don't like it when you press my button!");
/* Then, the most important part ... */
return false;
});
지금은 테스트할 수 없지만 jQuery의 preventDefault 메서드를 사용할 수 있을 것 같습니다.
다음 샘플 코드는 버튼을 클릭하여 양식을 제출하지 않도록 하는 방법을 보여줍니다.
샘플 코드를 사용해 보십시오.
<form autocomplete="off" method="post" action="">
<p>Title:
<input type="text" />
</p>
<input type="button" onclick="addItem()" value="Add Item">
<input type="button" onclick="removeItem()" value="Remove Last Item">
<table>
<th>Name</th>
<tr>
<td>
<input type="text" id="input1" name="input1" />
</td>
<td>
<input type="hidden" id="input2" name="input2" />
</td>
</tr>
</table>
<input id="submit" type="submit" name="submit" value="Submit">
</form>
<script language="javascript">
function addItem() {
return false;
}
function removeItem() {
return false;
}
</script>
removeItem 함수에 실제로 오류가 포함되어 있으며, 이로 인해 폼 버튼은 기본 동작(폼 전송)을 수행합니다.이 경우 javascript 오류 콘솔은 보통 포인터를 제공합니다.
javascript 부분에서 removeItem 함수를 확인합니다.
행:
rows[rows.length-1].html('');
동작하지 않습니다.대신 다음을 시도해 보십시오.
rows.eq(rows.length-1).html('');
언급URL : https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms
'programing' 카테고리의 다른 글
| PHP에서 HTML/XML을 어떻게 해석하고 처리합니까? (0) | 2022.09.17 |
|---|---|
| 첫 글자를 대문자로 쓴다.MySQL (0) | 2022.09.17 |
| Java null을 통해 .timeout() 대신 ==을 사용하는 이유를 확인합니다. (0) | 2022.09.17 |
| SQLSTATE[HY000]: 일반 오류: Larabel에서 2053 오류가 발생합니다. (0) | 2022.09.17 |
| 컬렉션을 어레이로 변환하는 가장 쉬운 방법 (0) | 2022.09.17 |