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를 반환 할 수 있습니다.

마지막으로 발생하는 한 양식은 제출되지 않습니다.





submit