Jquery Button to make visible a form

Question

I want to ask about how to make a form invisible when a button clicked? So, if I have a button called "Hide" and a form with many button, textbox, etc.

Then when I click "Hide" button, it will hide all form and all things in form such as textbox, button, etc. I have google it but have no result. I accept answer with Jquery, JS, or php language because I'm using that language program.

Example my form is like this:

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

maybe there's a way to make it invisible by a button?

Answer 1

You want something like this:

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

Demo for hide

and for toggle the form with a single button you can try:

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

Demo for toggle

---

According to comment

To prevent the submission:

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

See here for .perventDefault()