Nút Jquery để hiển thị biểu mẫu

Question

Tôi muốn hỏi về cách làm cho biểu mẫu ẩn đi khi một nút được nhấp? Vì vậy, nếu tôi có nút có tên "Ẩn" và biểu mẫu có nhiều nút, hộp văn bản, v.v.

Sau đó, khi tôi nhấp vào nút "Ẩn", nó sẽ ẩn tất cả biểu mẫu và tất cả mọi thứ dưới dạng hộp văn bản, nút , vv Tôi có google nhưng không có kết quả. Tôi chấp nhận câu trả lời bằng ngôn ngữ Jquery, JS hoặc php vì tôi đang sử dụng chương trình ngôn ngữ đó.

Ví dụ hình thức của tôi là như thế này:

<form name="myform" method="post" action="<?php $_SERVER['PHP_SELF']; ?>"> 
    <table> 
     <tr> 
      <td>ID</td> 
      <td>:</td> 
      <td><input type="text" maxlength="15" name="clientid" /></td> 
      <td><input type="submit" name="cariclientid" value="Search" /></td> 
      <td width="50px"></td> 
      <td>ID</td> 
      <td>:</td> 
      <td><input type="text" maxlength="15" name="orderid" /></td> 
      <td><input type="submit" name="cariorderid" value="Search" /></td> 
     </tr> 
     <tr> 
      <td>No.</td> 
      <td>:</td> 
      <td><input type="text" maxlength="15" name="veh" /></td> 
      <td><input type="submit" name="carikendaraan" value="search" /></td> 
      <td></td> 
      <td>Nama Sopir</td> 
      <td>:</td> 
      <td><input type="text" maxlength="15" name="sopir" /></td> 
      <td><input type="submit" name="carisopir" value="Cari" /></td> 
     </tr> 
     <tr> 
      <td>Waktu Berangkat</td> 
      <td>:</td> 
      <td><input type="text" name="tglb" id="datetimepicker" /></td> 
      <td><input type="submit" name="cariberangkat" value="Cari" /></td> 
      <td></td> 
      <td>Waktu Pulang</td> 
      <td>:</td> 
      <td><input type="text" name="tglp" id="datetimepicker2" /></td> 
      <td><input type="submit" name="caripulang" value="Cari" /></td> 
     </tr> 
    </table> 
</form> 

có lẽ có một cách để làm cho nó vô hình bằng một nút?

Answer 1

Bạn muốn một cái gì đó như thế này:

// code for only hide 
$('#hide_button').on('click', function() { 
    $('form[name="myform"]').hide(); 
}); 

Demo for hide

và cho chuyển đổi hình thức với một nút duy nhất bạn có thể thử:

$('#your_button').on('click', function() { 
    $('form[name="myform"]').toggle(); 
}); 

Demo for toggle

---

Theo comment

Để ngăn chặn việc nộp:

$('form[name="myform"]').submit(function(e) { 
    e.preventDefault(); 
    // Your code 
}); 

Xem ở đây để .perventDefault()