จะป้องกันไม่ให้ส่งแบบฟอร์มได้อย่างไร

ฉันมีแบบฟอร์มที่มีปุ่มส่งอยู่ที่ไหนซักแห่ง

อย่างไรก็ตามฉันต้องการ 'จับ' เหตุการณ์ส่งและป้องกันไม่ให้เกิดขึ้น

มีวิธีที่ฉันสามารถทำได้หรือไม่?

ฉันไม่สามารถแก้ไขปุ่มส่งได้เนื่องจากเป็นส่วนหนึ่งของการควบคุมที่กำหนดเอง

ต่างจากคำตอบอื่น ๆ การกลับมาfalseเป็นเพียงส่วนหนึ่งของคำตอบ พิจารณาสถานการณ์ที่มีข้อผิดพลาด JS เกิดขึ้นก่อนที่จะส่งคืนงบ ...

HTML

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

ต้นฉบับ

function mySubmitFunction()
{
  someBug()
  return false;
}

การกลับมาfalseที่นี่จะไม่ถูกดำเนินการและแบบฟอร์มจะถูกส่งทั้งสองทาง คุณควรโทรpreventDefaultเพื่อป้องกันการกระทำของแบบฟอร์มเริ่มต้นสำหรับการส่งแบบฟอร์ม Ajax

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

ในกรณีนี้แม้จะมีข้อผิดพลาดแบบฟอร์มจะไม่ส่ง!

หรือtry...catchอาจใช้บล็อกก็ได้

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

คุณสามารถใช้เหตุการณ์แบบอินไลน์onsubmitเช่นนี้

<form onsubmit="alert('stop submit'); return false;" >

หรือ

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

การสาธิต

ตอนนี้อาจไม่เป็นความคิดที่ดีเมื่อสร้างโครงการขนาดใหญ่ คุณอาจต้องใช้ Event Listeners

โปรดอ่านเพิ่มเติมเกี่ยวกับInline เหตุการณ์ VS ฟังอีเว้นท์ (addEventListener และ attachEvent ของ IE)ที่นี่ สำหรับฉันไม่สามารถอธิบายได้มากกว่าที่คริสเบเกอร์ทำ

ทั้งสองอย่างถูกต้อง แต่ไม่มีสิ่งใดที่ "ดีที่สุด" ต่อ se และอาจมีเหตุผลที่ผู้พัฒนาเลือกใช้ทั้งสองวิธี

แนบตัวฟังเหตุการณ์เข้ากับฟอร์มโดยใช้.addEventListener()และจากนั้นเรียกใช้.preventDefault()เมธอดevent:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

ฉันคิดว่ามันเป็นทางออกที่ดีกว่าการกำหนดsubmitตัวจัดการเหตุการณ์แบบอินไลน์กับonsubmitแอตทริบิวต์เพราะมันแยกตรรกะของหน้าเว็บและโครงสร้าง มันง่ายกว่ามากในการดูแลโครงการที่แยกตรรกะออกจาก HTML ดู: สงบเสงี่ยม JavaScript

การใช้.onsubmitคุณสมบัติของformวัตถุ DOM นั้นไม่ใช่ความคิดที่ดีเพราะจะป้องกันไม่ให้คุณแนบการส่งการเรียกกลับหลายครั้งไปยังองค์ประกอบเดียว ดูaddEventListener VS onclick

ลองอันนี้...

รหัส HTML

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

รหัส jQuery

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

หรือ

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

การทำงานต่อไปนี้เป็นตอนนี้ (ทดสอบใน chrome และ firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

โดยที่ validateMyForm () เป็นฟังก์ชันที่ส่งคืนfalseหากการตรวจสอบล้มเหลว eventจุดสำคัญคือการใช้ชื่อ เราไม่สามารถใช้สำหรับเช่นe.preventDefault()

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

หากต้องการติดตามข้อตกลงการเขียนโปรแกรมจาวาสคริปต์ที่ไม่สร้างความรำคาญและขึ้นอยู่กับว่าDOMโหลดเร็วแค่ไหนมันอาจเป็นความคิดที่ดีที่จะใช้สิ่งต่อไปนี้:

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

จากนั้นโยงเหตุการณ์โดยใช้ onload หรือ DOM พร้อมหากคุณใช้ไลบรารี

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

นอกจากนี้ฉันมักจะใช้actionคุณลักษณะเนื่องจากบางคนอาจมีปลั๊กอินบางอย่างเช่นNoScript ที่ทำงานซึ่งจะทำให้การตรวจสอบขาด หากคุณกำลังใช้แอตทริบิวต์การกระทำอย่างน้อยที่สุดผู้ใช้ของคุณจะถูกเปลี่ยนเส้นทางโดยเซิร์ฟเวอร์ตามการตรวจสอบความถูกต้องของแบ็กเอนด์ หากคุณกำลังใช้บางอย่างเช่นwindow.locationในทางกลับกันสิ่งต่าง ๆ จะไม่ดี

เพื่อป้องกันการส่งแบบฟอร์มคุณจะต้องทำสิ่งนี้เท่านั้น

<form onsubmit="event.preventDefault()">
    .....
</form>

การใช้รหัสด้านบนจะเป็นการป้องกันการส่งแบบฟอร์มของคุณ

นี่คือคำตอบของฉัน:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

ฉันจะเพิ่มevent.preventDefault();ในonsubmitและการทำงาน

คุณสามารถเพิ่ม eventListner ไปยังแบบฟอร์มนั้นpreventDefault()และแปลงข้อมูลแบบฟอร์มเป็น JSON ดังต่อไปนี้:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>