แบบฟอร์มที่ไม่มีการดำเนินการและโดยที่ Enter จะไม่โหลดหน้าซ้ำ

ฉันกำลังมองหาวิธีใหม่ล่าสุดในการสร้างแบบฟอร์ม HTML ที่ไม่มีปุ่มส่ง นั่นเป็นเรื่องง่ายพอสมควร แต่ฉันก็ต้องหยุดแบบฟอร์มไม่ให้โหลดตัวเองซ้ำเมื่อทำสิ่งที่ต้องการส่งเสร็จแล้ว (เช่นการกดปุ่มEnterในช่องข้อความ)

เพิ่มตัวจัดการ onsubmit ในแบบฟอร์ม (ผ่าน js ธรรมดาหรือ jquery $ (). submit (fn)) และส่งคืนเท็จเว้นแต่ว่าเงื่อนไขเฉพาะของคุณจะตรงตามเงื่อนไข

เว้นแต่คุณจะไม่ต้องการให้ส่งแบบฟอร์ม แต่ในกรณีนี้ทำไมไม่เพียงแค่ปล่อยแอตทริบิวต์ "action" ไว้ในองค์ประกอบแบบฟอร์ม

คุณจะต้องรวมไว้action="javascript:void(0);"ในแบบฟอร์มของคุณเพื่อป้องกันการโหลดหน้าซ้ำและรักษามาตรฐาน HTML

เพียงเพิ่มเหตุการณ์นี้ในช่องข้อความของคุณ จะป้องกันการส่งเมื่อกด Enter และคุณสามารถเพิ่มปุ่มส่งหรือแบบฟอร์มการโทรส่ง () ได้ตามต้องการ:

onKeyPress="if (event.which == 13) return false;"

ตัวอย่างเช่น:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

เมื่อคุณกด Enter ในรูปแบบพฤติกรรมตามธรรมชาติของฟอร์มจะถูกส่งเพื่อหยุดพฤติกรรมนี้ซึ่งไม่เป็นธรรมชาติคุณต้องป้องกันไม่ให้ส่ง (พฤติกรรมเริ่มต้น) ด้วย jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})

ความคิด:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

และ

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

สองวิธีในการแก้ปัญหา:

1. ค่าการดำเนินการของฟอร์มคือ "javascript: void (0);"
2. เพิ่มตัวฟังเหตุการณ์การกดแป้นสำหรับแบบฟอร์มเพื่อป้องกันการส่ง

คำตอบแรกคือทางออกที่ดีที่สุด:

เพิ่มตัวจัดการ onsubmit ในแบบฟอร์ม (ผ่าน js ธรรมดาหรือ jquery $ (). submit (fn)) และส่งคืนเท็จเว้นแต่ว่าเงื่อนไขเฉพาะของคุณจะตรงตามเงื่อนไข

เฉพาะเจาะจงมากขึ้นด้วย jquery:

$('#your-form-id').submit(function(){return false;});

เว้นแต่คุณจะไม่ต้องการให้ส่งแบบฟอร์ม แต่ในกรณีนี้ทำไมไม่เพียงแค่ปล่อยแอตทริบิวต์ "action" ไว้ในองค์ประกอบแบบฟอร์ม

การเขียนส่วนขยาย Chrome เป็นตัวอย่างที่คุณอาจมีแบบฟอร์มสำหรับป้อนข้อมูลโดยผู้ใช้ แต่คุณไม่ต้องการให้ส่ง หากคุณใช้ action = "javascript: void (0);" โค้ดอาจใช้งานได้ แต่คุณจะพบปัญหานี้ซึ่งคุณได้รับข้อผิดพลาดเกี่ยวกับการเรียกใช้ Javascript แบบอินไลน์

หากคุณละทิ้งการดำเนินการอย่างสมบูรณ์แบบฟอร์มจะโหลดซ้ำซึ่งไม่เป็นที่ต้องการในบางกรณีเมื่อเขียนส่วนขยาย Chrome หรือถ้าคุณมีหน้าเว็บที่มีเครื่องคิดเลขแบบฝังอยู่ซึ่งผู้ใช้จะป้อนข้อมูลให้แล้วคลิก "คำนวณ" หรืออะไรทำนองนั้น