페이지를 다시로드하지 않는 HTML 버튼을 만드는 방법

버튼 ( <input type="submit">)이 있습니다. 클릭하면 페이지가 다시로드됩니다. hide()페이지로드시 호출되는 일부 jQuery 함수가 있으므로 이러한 요소가 다시 숨겨집니다. 버튼이 아무 작업도하지 않도록하려면 어떻게하면 버튼을 클릭했을 때 발생하는 일부 동작을 추가 할 수 있지만 페이지를 다시로드 할 수는 없습니다.

js 또는 jquery가 필요하지 않습니다. 페이지 다시로드를 중지하려면 버튼 유형을 '버튼'으로 지정하십시오. 버튼 유형을 지정하지 않으면 브라우저가 페이지를 다시로드하도록 '재설정'또는 '제출'마녀 원인을 설정합니다.

 <button type='button'>submit</button> 

중 하나를 사용하여 <button>요소 또는를 사용합니다 <input type="button"/>.

HTML에서 :

<form onsubmit="return false">
</form>

onclick이 할당 된 경우에도 모든 "버튼"을 새로 고치는 것을 방지합니다.

jQuery로 버튼에 클릭 핸들러를 추가하고 false를 반환 할 수 있습니다.

$("input[type='submit']").click(function() { return false; });

또는

$("form").submit(function() { return false; });

HTML에서 :

<input type="submit" onclick="return false">

이미 언급 된 유사한 변형 인 jQuery를 사용합니다.

제출 버튼이 포함 된 양식을 사용할 수 있습니다. 그런 다음 jQuery를 사용하여 양식의 기본 동작을 방지합니다.

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

위의 주석 중 하나 (burried)에서 언급했듯이 form 태그 안에 button 태그를 배치하지 않으면이 문제를 해결할 수 있습니다. 단추가 양식 외부에 있으면 페이지가 자체적으로 새로 고쳐지지 않습니다.

아직 댓글을 달 수 없어서 답변으로 게시하겠습니다. 를 사용하여 : 피하기 다시로드에 가장 좋은 방법은 user2868288 말했다 방법 @입니다 onsubmit온 form태그입니다.

여기에 언급 된 다른 모든 가능성 중에서 새 HTML5 브라우저 데이터 입력 유효성 검사가 트리거되도록 허용하고 ( <button>그것도 jQuery / JS 핸들러도 수행하지 않음) jQuery / AJAX 동적 정보를 페이지. 예를 들면 :

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>