양식 내부의 버튼을 클릭했을 때 페이지 새로 고침 방지

양식 내부의 버튼을 사용하는 동안 문제가 있습니다. 그 버튼이 함수를 호출하기를 원합니다. 그러나 원하지 않는 결과로 페이지를 새로 고칩니다.

내 간단한 코드는 다음과 같습니다.

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

버튼을 클릭하면 페이지 새로 고침으로 함수가 호출되어 이전 요청의 결과 인 현재 페이지에 영향을 미치는 이전 요청을 모두 재설정합니다.

페이지 새로 고침을 방지하려면 어떻게해야합니까?

getData()거짓을 반환 하자 . 이 문제를 해결합니다.

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

type="button"버튼에 추가하십시오 .

<button name="data" type="button" onclick="getData()">Click</button>

type버튼 의 기본값 은입니다 submit.이 경우 자체적으로 양식을 게시하여 새로 고침처럼 보이게합니다.

타입 태그를 넣고 타입 버튼을 만들기 만하면됩니다.

<button id="btnId" type="button">Hide/Show</button>

그 문제를 해결

문제는 양식 제출을 트리거한다는 것입니다. 당신이 할 경우 getData기능 return false다음은 제출에서 양식을 중지해야합니다.

또는 preventDefault이벤트 객체 의 메서드를 사용할 수도 있습니다 .

function getData(e) {
    e.preventDefault();
}

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

버튼 태그를 사용하는 대신 입력 태그를 사용하십시오. 이렇게

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

버튼이 기본 "버튼"인 경우 명시 적으로 type 속성을 설정해야합니다. 그렇지 않으면 WebForm이 기본적으로 제출로 처리합니다.

js를 사용하면 다음과 같이하십시오.

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

버튼 자체를 비활성화하는 자바 스크립트 방법

document.getElementById("ID NAME").disabled = true;

모든 양식 필드가 기준을 충족하면 버튼을 다시 활성화 할 수 있습니다

Jquery를 사용하는 것은 다음과 같습니다

$( "#ID NAME" ).prop( "disabled", true);

나는에도 불구하고 파이어 폭스의 모든 이유 return false;와 myform.preventDefault();기능에,이 기능을 실행 한 후 페이지를 새로 고칩니다. 그리고 이것이 좋은 방법인지는 모르겠지만 작동 javascript:this.preventDefault();합니다. action 속성에 삽입 하십시오.

내가 말했듯이, 나는 모든 다른 제안을 시도하고 모든 브라우저에서 잘 작동하지만 같은 문제가있는 경우 파이어 폭스,의 액션 속성 중 하나의 이벤트 방지 추가하려고 javascript:return false;또는 javascript:this.preventDefault();. javascript:void(0);코드를 손상시킬 시도하지 마십시오 . 이유를 묻지 마십시오 :-).

나는 이것이 우아한 방법이라고 생각하지 않지만 제 경우에는 다른 선택이 없었습니다.

최신 정보:

ajax가 처리 된 후 오류가 발생하면 속성 조치를 제거하고 속성에서 onsubmit함수를 실행 한 다음 false 리턴을 수행하십시오.

onsubmit="functionToRun(); return false;"

Firefox에서이 모든 문제가 발생하는 이유를 모르겠지만 이것이 효과가 있기를 바랍니다.

모든 경우에 리턴 기능이 작동하지 않습니다. 나는 이것을 시도했다 :

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

그것은 나를 위해 작동하지 않았다.

함수 내부에서 false를 반환하려고 시도했지만 효과가있었습니다.

function Reset()
{
    .
    .
    .
    return false;
}

나는 같은 문제에 직면했다. 문제는 onclick기능에 있습니다. 기능에 문제가 없어야합니다 getData. onclick함수가 false를 리턴 하도록하여 작동 했습니다 .

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

이것이 가장 좋은 해결책입니다.

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

참고 : 내 코드는 매우 간단합니다.

이 문제를 해결하기 위해 ajax와 jquery를 사용할 수 있습니다.

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>