ฉันจะทำให้ปุ่ม 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 และส่งคืนเท็จ

$("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) ด้านบนสิ่งนี้สามารถแก้ไขได้โดยไม่วางแท็กปุ่มไว้ในแท็กแบบฟอร์ม เมื่อปุ่มอยู่นอกฟอร์มเพจจะไม่รีเฟรชตัวเอง

ฉันยังแสดงความคิดเห็นไม่ได้ฉันจึงโพสต์ข้อความนี้เพื่อเป็นคำตอบ วิธีที่ดีที่สุดในการหลีกเลี่ยงการโหลดซ้ำคือวิธีที่ @ 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>