Bagaimana cara mencegah pengiriman formulir?

Saya memiliki formulir yang memiliki tombol kirim di suatu tempat.

Namun, saya ingin 'menangkap' acara pengiriman dan mencegahnya agar tidak terjadi.

Apakah ada cara saya bisa melakukan ini?

Saya tidak dapat mengubah tombol kirim, karena itu bagian dari kontrol khusus.

Berbeda dengan jawaban yang lain, pengembalian falsehanyalah sebagian dari jawaban. Pertimbangkan skenario di mana kesalahan JS terjadi sebelum pernyataan pengembalian ...

html

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

naskah

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

kembali ke falsesini tidak akan dieksekusi dan formulir akan dikirimkan dengan cara apa pun. Anda juga harus menelepon preventDefaultuntuk mencegah tindakan formulir default untuk pengiriman formulir Ajax.

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

Dalam hal ini, bahkan dengan bug, formulir tidak akan dikirimkan!

Atau, try...catchblok dapat digunakan.

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

Anda dapat menggunakan acara inline onsubmitseperti ini

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

Atau

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

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

Demo

Sekarang, ini mungkin bukan ide yang baik ketika membuat proyek besar. Anda mungkin perlu menggunakan Pendengar Acara.

Silakan baca lebih lanjut tentang Acara Inline vs Pendengar Acara (addEventListener dan IE's attachEvent) di sini . Sebab aku tidak bisa menjelaskannya lebih daripada yang dilakukan Chris Baker .

Keduanya benar, tetapi tidak ada yang "terbaik" per se, dan mungkin ada alasan pengembang memilih untuk menggunakan kedua pendekatan tersebut.

Lampirkan pendengar acara ke formulir menggunakan .addEventListener()dan kemudian memanggil .preventDefault()metode di 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>

Saya pikir ini solusi yang lebih baik daripada mendefinisikan submit event handler sesuai dengan onsubmitatribut karena memisahkan logika dan struktur halaman web. Jauh lebih mudah untuk mempertahankan proyek di mana logika dipisahkan dari HTML. Lihat: JavaScript yang tidak mengganggu .

Menggunakan .onsubmitproperti formobjek DOM bukan ide yang baik karena mencegah Anda melampirkan beberapa panggilan balik kirim ke satu elemen. Lihat addEventListener vs onclick .

Coba yang ini...

Kode HTML

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

Kode jQuery

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

atau

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

Yang berikut berfungsi sampai sekarang (diuji dalam chrome dan firefox):

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

di mana validateMyForm () adalah fungsi yang mengembalikan falsejika validasi gagal. Poin kuncinya adalah menggunakan nama event. Kami tidak dapat menggunakan untuk misalnyae.preventDefault()

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

Untuk mengikuti konvensi pemrograman JavaScript yang tidak mengganggu , dan tergantung pada seberapa cepat DOM akan dimuat, mungkin ide yang baik untuk menggunakan yang berikut ini:

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

Kemudian, sambungkan acara menggunakan onload atau DOM siap jika Anda menggunakan perpustakaan.

$(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>

Juga, saya akan selalu menggunakan actionatribut tersebut karena beberapa orang mungkin memiliki beberapa plugin seperti NoScript berjalan yang kemudian akan memecah validasi. Jika Anda menggunakan atribut tindakan, setidaknya pengguna Anda akan diarahkan oleh server berdasarkan validasi backend. Jika Anda menggunakan sesuatu seperti window.location, di sisi lain, semuanya akan menjadi buruk.

Untuk mencegah pengiriman formulir, Anda hanya perlu melakukan ini.

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

Dengan menggunakan kode di atas ini akan mencegah pengiriman formulir Anda.

Inilah jawaban saya:

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

    return false;
}
</script>

Saya menambahkan event.preventDefault();pada onsubmitdan bekerja.

Anda bisa menambahkan eventListner ke formulir, itu preventDefault()dan mengonversi data formulir ke JSON seperti di bawah ini:

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>