양식 내부 단추를 누를 때 페이지 새로 고침을 방지하려면 어떻게 해야 합니까?

양식 내부 단추를 누를 때 페이지 새로 고침을 방지하려면 어떻게 해야 합니까?

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

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

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

버튼을 클릭하면 페이지 새로 고침 기능이 호출되고 이전 요청의 결과인 현재 페이지에 영향을 주는 이전 요청이 모두 재설정됩니다.

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

더하다type="button"단추까지

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

기본값:type단적으로submit자기가 당신의 케이스에 양식을 게시하고 새로 고침처럼 보이게 합니다.

허락하다getData()허위 신고를 하다이것으로 해결할 수 있습니다.

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

당신이 해야 할 일은 활자 태그를 붙이고 활자 버튼을 만드는 것입니다.

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

그것으로 문제가 해결되었습니다.

문제는 양식 제출을 트리거한다는 것입니다.만약 당신이 만든다면.getData기능.return false그러면 양식 제출을 중지해야 합니다.

또는 이벤트 개체의 방법을 사용할 수도 있습니다.

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

HTML

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

jQuery

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

단추가 기본 "단추"인 경우, 유형 속성을 명시적으로 설정해야 합니다. 그렇지 않으면 웹 양식은 기본적으로 제출로 처리합니다.

만약 당신이 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

});

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

버튼 태그를 사용하는 대신 입력 태그를 사용합니다.이것처럼.

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

버튼 자체를 비활성화하는 Javascript 방법

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

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

제이쿼리를 사용하는 것은 이런 것이 될 것입니다.

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

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

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

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

파이어폭스에 있는 어떤 이유로든 나는.return false;그리고.myform.preventDefault();함수에서는 함수가 실행된 후 페이지를 새로 고칩니다.그리고 이게 좋은 관행인지는 모르겠지만, 제게 효과가 있어요, 저는 삽입합니다.javascript:this.preventDefault();작업 속성에서.

말했듯이, 다른 제안들은 모두 시도해 보았는데 모든 브라우저에서 잘 작동하지만 파이어폭스, 같은 문제가 있다면 액션 속성에 예방 이벤트를 추가해 보십시오.javascript:return false;또는javascript:this.preventDefault();사용 안 함javascript:void(0);암호를 해독할 수 있습니다.이유는 묻지 마세요 :-).

저는 이것이 우아한 방법이라고 생각하지 않지만, 저의 경우에는 다른 선택의 여지가 없었습니다.

업데이트:

Ajax가 처리된 후... 오류가 발생한 경우 특성 작업을 제거하고onsubmit return 를 실행합니다. false return 성함실, 를한행다음거짓반환속수반:거환짓▁attribute▁followed:

onsubmit="functionToRun(); return false;"

파이어폭스에 왜 이런 문제가 생기는지는 모르겠지만, 이것이 효과가 있기를 바랍니다.

일부 경우에는 반품 기능이 작동하지 않습니다.시도해 봤습니다.

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

그것은 저에게 효과가 없었습니다.

나는 함수 내부에서 거짓을 반환하려고 시도했고 그것은 나에게 효과가 있었습니다.

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

저도 같은 문제에 직면했습니다.는 문는다같습다니과음에 있습니다.onclick기능. 에 문제가 없어야 .getData그것은 그것을 만듦으로써 작동했습니다.onclick함수 반환이 거짓입니다.

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

@JNDPNT 답변을 업데이트했습니다. 이렇게 하면 함수(getData()가 false를 반환할 필요가 없습니다.

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

제가 발견한 간단한 문제는 호출하려는 함수가 호출되는 경우submit양식은 어느 쪽이든 제출될 것입니다.

페이지를 다시 로드하지 않으려면 함수의 이름을 변경해야 합니다.

더하다e.preventDefault();버튼을 클릭할 때 호출될 함수의 시작 부분에서

예:

    const signUp = (e) => {
    e.preventDefault()
    try {
    } catch (error) {
      console.log(error.message)
    }
  }

단추 코드:

            <input
              type='submit'
              name='submit-btn'
              id='submit-btn'
              value='Sign Up'
              onClick={signUp}
            />

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>

언급URL : https://stackoverflow.com/questions/7803814/how-can-i-prevent-refresh-of-page-when-button-inside-form-is-clicked