Bagaimana untuk Menghalang Butang daripada Menghantar Borang dalam HTML dan JavaScript?

Cara Menghalang Butang daripada Menghantar Borang

Dalam HTML, apabila butang diklik dalam borang, ia biasanya mencetuskan borang penyerahan. Walau bagaimanapun, terdapat senario di mana anda mungkin mahu butang untuk melakukan tindakan tertentu tanpa menyerahkan borang.

Pertimbangkan borang berikut:

<code class="html"><form id="myform">
  <label>Label
    <input />
  </label>
</form>
<button>My Button</button></code>

Dalam contoh ini, mengklik butang masih mencetuskan penyerahan borang walaupun ia di luar elemen borang. Untuk mengelakkan tingkah laku yang tidak diingini ini, anda boleh menentukan atribut type="button" untuk butang:

<code class="html"><button type="button">My Button</button></code>

Penyelesaian Alternatif melalui JavaScript

Jika anda lebih suka mengendalikan ini menggunakan JavaScript, anda boleh melumpuhkan tingkah laku penyerahan borang lalai. Berikut ialah contoh menggunakan pendengar acara:

<code class="html"><button onclick="event.preventDefault();">My Button</button></code>

Dalam kes ini, fungsi event.preventDefault() menghalang borang daripada diserahkan apabila butang diklik.

Kesimpulan

Dengan menyatakan type="button" untuk butang atau menggunakan JavaScript untuk menyekat tindakan lalai, anda boleh menghalang butang daripada menyerahkan borang walaupun ia terletak di luar elemen borang.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Butang daripada Menghantar Borang dalam HTML dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!