다음 페이지에서 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="..."(그것은 그것이 없는 조건이었다는 것을 기억하라).
문제는 양식이 항상 제출된다는 것입니다.onclick돌아온다true또는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,어디에return True;JavaScript 제출문도 추가합니다.이 문장은 다음과 같습니다.
function Validator(){
//
...bla bla bla... the checks
if(
){
document.getElementById('theFormID').submit();
return(true);
}else{
return(false);
} } 그id=""JavaScript 전용getElementById,그name=""POST 데이터에 표시하기 위해서입니다.
그렇게 하면 내가 원하는 대로 된다.
제가 이걸 꼭 필요하신 분들을 위해서 붙여놨어요.onsubmit폼에서 기능하지만 사용자가 버튼을 눌렀을 때 유효성을 확인합니다.
폼 태그에 온서밋이 필요 없는 이유는 무엇입니까?쉽게, 다른 JavaScript 부품에서는 제출을 수행해야 하지만 검증은 하고 싶지 않습니다.
이유:사용자가 원하는 제출을 수행하고 검증이 필요한 경우이지만 JavaScript일 경우 검증이 필요 없을 때 제출할 필요가 있을 수 있습니다.
이상하게 들릴 수도 있지만 예를 들어 로그인 시… 제한 사항이 있는…예를 들어 PHP 세션 사용을 허용하지 않으며 쿠키도 허용되지 않습니다.
따라서 로그인 데이터가 손실되지 않도록 모든 링크를 해당 형식으로 변환해야 합니다.로그인이 아직 완료되지 않은 경우, 이 로그인도 동작해야 합니다.따라서 링크에 대한 검증을 수행할 필요가 없습니다.그러나 사용자가 user와 pass 두 필드를 모두 입력하지 않은 경우 사용자에게 메시지를 표시하고 싶습니다.그래서 한 개가 없으면 양식을 보내서는 안 된다! 문제가 있다.
문제를 보십시오. 사용자가 버튼을 누른 경우에만 하나의 필드가 비어 있을 때 폼을 전송해서는 안 됩니다. JavaScript 코드일 경우 폼을 전송할 수 있어야 합니다.
만약 내가 그 일을 한다면onsubmit폼태그에 사용자인지 다른 JavaScript인지 알아야 합니다.매개 변수를 전달할 수 없기 때문에 직접 전달할 수 없기 때문에 검증이 필요한지 여부를 알려주는 변수를 추가하는 사람도 있습니다.검증기능의 첫 번째는 그 변수값 등을 확인하는 것이다.너무 복잡하고 코드는 무엇이 정말 원하는지 말해주지 않는다.
따라서 해결책은 폼태그에 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()JavaScript를 사용합니다.
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;
});});