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


148

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

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

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

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

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


간단하게 사용하는 경우에는 매개 변수를 지정해야합니다. window.location = window.location.href; 전체 페이지를 새로 고침하고 이전 요청을 모두 재설정합니다. 이것을 확인하십시오 : stackoverflow.com/questions/133925/…
linguini


@bunkdeath : 빨라야 을 받아 들여야합니다.
Jad Chahine

@ JadChahine 죄송합니다, 나는 이것을 지적 해 주셔서 감사합니다. 나는 초보자였으며 당시에 무엇을했는지 몰랐습니다. 그러나 나는 오히려 내가 나에게 그 시간을 :) 도움을 준 하나 받아 들일 것이다, 당신이 언급 한 대답을 수용 할 수 실 거예요
bunkdeath

답변:


67

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

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

1
과연. 이 onclick함수는 아닌 false를 반환해야 getData합니다.
Quentin

1
그것이 내가 언급 한 것이지만, 더 명확하게 대답을 수정했습니다.
JNDPNT

5
함수를 변경할 필요가 없습니다. onclick = "getData (); return false;"

2
type="button"정말 캐치입니다.
딥셀

338

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

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

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


8
여기에 완벽한 대답
timberlake

2
이를 제외하고는 HTML5 양식 유효성 검증을 방지합니다 (예 : type = "email"입력).
2540625 April

2
return false;onclick에 추가 할 수도 있습니다 .onclick="getData(); return false;"
JBaczuk

1
이것이 최선의 선택입니다. "false return"은 인라인으로 작동 할 수 있지만 이벤트 리스너를 추가 할 때 알고있는 옵션은 없습니다. type = "button"을 지정하면 하루가 실제로 절약됩니다.
Forever Noob

1
이것은 실제로 이런 종류의 문제에 대한 "공식적인"솔루션입니다. false를 반환해도 작동하지만 type 버튼은 절대 실패하지 않습니다.
student0495

18

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

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

그 문제를 해결


2
이유를 설명하고 설명 할 수 있습니까?
mjk

양식 내에서 버튼의 기본 동작은 제출 유형이며, 버튼 유형으로 변경하면 게시를 피할 수 있습니다.
Ganesh Kodiganti

16

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

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

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

전달 될 클릭 이벤트입니다.
JNDPNT

(추가 수정없이) 이벤트 객체는 전달되지 않습니다.
Quentin

<button name = "data"onclick = "getData ($ event)"> 클릭 </ button>
RoboMex 2014

9

HTML

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

jQuery

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

$ ( '. myForm)은 $ ('# myForm)이어야합니다
Mutant

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

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

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

그러나 이것은 버튼을 만들지 않았습니다button type='button'
Pardeep Jain

3

버튼이 기본 "버튼"인 경우 명시 적으로 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

});

2

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

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

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

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

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

0

나는에도 불구하고 파이어 폭스의 모든 이유 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에서이 모든 문제가 발생하는 이유를 모르겠지만 이것이 효과가 있기를 바랍니다.


0

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

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

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

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

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

0

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

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

0

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

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

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


-2

이 문제를 해결하기 위해 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>

이 답변은 다른 복잡한 방법을 사용할 수있는 OP 문제를 방지하기 위해 외부 라이브러리를 요구할뿐 아니라 지나치게 복잡합니다.
Zac
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.