name - javascript getelementbyid submit

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

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