php - Jquery Button to make visible a form - Stack Overflow

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?

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?

• php
• javascript
• jquery
• forms

Share Follow asked Dec 19, 2012 at 8:22 Celia TanCelia Tan 16577 bronze badges 5

• 2 $('button').click(function(){ $('form').toggle(); }); – elclanrs Commented Dec 19, 2012 at 8:23
• 1 Seriously consider using field-sets instead of putting your form in a table. – deed02392 Commented Dec 19, 2012 at 8:27
• @deed02392 I have created all the search form like this... so I can't change to fieldset. Thanks for remendation. – Celia Tan Commented Dec 19, 2012 at 8:35
• Why this question has 4 upvotes is beyond my understanding. – itachi Commented Dec 19, 2012 at 8:51
• @itachi You get a hat for upvoting a bunch of questions/answers. This question is in the "hot" list, so it gets targeted, I'll assume. =) – J. Steen Commented Dec 19, 2012 at 8:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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 ment

To prevent the submission:

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

See here for .perventDefault()