name - javascript getelementbyid submit
단추가 양식을 제출하지 못하게하는 방법 (11)
정상적인 방법으로 버튼을 설정하고 event.preventDefault를 사용하십시오 ..
<button onclick="myFunc(e)"> Remove </button>
...
...
In function...
function myFunc(e){
e.preventDefault();
}
다음 페이지에서 Firefox와 함께 제거 단추는 양식을 제출하지만 추가 단추는 양식을 제출하지 않습니다. 제거 버튼이 양식을 제출하지 못하게하려면 어떻게합니까?
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
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>
</head>
<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>
HTML 양식에 id="form_id"
가 있다고 가정합니다.
<form id="form_id">
<!--your HTML code-->
</form>
이 jQuery 스 니펫을 코드에 추가하여 결과를 확인하고,
$("#form_id").submit(function(){
return false;
});
jQuery를 사용하여 단추의 참조를 얻고 아래와 같이 전파를 방지 할 수 있습니다.
$(document).ready(function () {
$('#BUTTON_ID').click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});});
removeItem 함수에는 실제로 폼 버튼을 만드는 기본 오류 (양식 제출)를하는 오류가 있습니다. 자바 스크립트 오류 콘솔은 대개이 경우 포인터를 제공합니다.
javascript 부분에서 removeItem 함수를 확인하십시오.
라인 :
rows[rows.length-1].html('');
작동하지 않습니다. 대신 다음을 시도하십시오.
rows.eq(rows.length-1).html('');
나는 Shog9에 동의한다.
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
w3schools에 따르면 <button>
태그는 다른 브라우저에서 다른 동작을합니다.
나는 당신에게 도움이 될 세 가지 방법으로이 문제를 해결했다.
jquery 유효성 검사 플러그인을 사용하는 경우
$("form").validate({
submitHandler: function (form) {
console.log('test');
}
});
두 번째 방법은 기본값을 사용하지 않음
$( "form" ).submit(function( event ) {
event.preventDefault();
console.log('test');
});
javscript (onsubmit 이벤트)를 사용하여 3 번째
양식 태그 내에서 onsubmit 이벤트를 사용하면 type = submit 인 버튼 또는 입력에서 onsubmit을 사용하면 url이 대신 트리거됩니다.
<button type="submit" onsubmit="submitfunction()">submit</button>
function submitfunction(event){
event.preventDefault();
console.log('test');
}
도움이되기를 바랍니다.
다음은 간단한 접근법입니다.
$('.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;
});
버튼에 유형을 설정하십시오.
<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 메소드를 호출하려고 시도했습니다. 예외가 발생하여 버튼의 기본 동작이 발생했습니다.
FWIW, 여기에 또 다른 방법이 있습니다 ... jQuery를 사용하여 이벤트 핸들러를 연결하고 jQuery의 event 객체에 preventDefault() 메서드를 사용하여 기본 동작을 취소 할 수 있습니다.
$(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>
이 기술은 모든 로직을 한 곳에서 유지하므로 디버깅이 쉬워집니다. 이벤트 서버 측을 submit
하고 처리하기 submit
버튼의 type
을 다시 변경하여 폴백을 구현할 수 있습니다. 눈에 거슬리지 자바 스크립트로 .
이것은 html5 오류입니다, 당신은 여전히 자바 스크립트 사용자와 비 자바 스크립트 사용자를 모두 포함하고 싶다면) 제출 버튼을 가질 수 있습니다 :
<button type="submit" onclick="return false"> Register </button>
이 방법을 사용하면 제출을 취소하지만 jquery 또는 javascript 함수에서 수행중인 작업을 수행하고 javascript가없는 사용자에게 제출하십시오.
지금 당장은 이것을 테스트 할 수 없지만 jQuery의 preventDefault() 메소드를 사용할 수 있다고 생각합니다.
return false;
함수의 끝이나 함수 호출 후에 false를 반환 할 수 있습니다.
마지막으로 발생하는 한 양식은 제출되지 않습니다.