Jquery Button 使表单可见

Posted

技术标签:

【中文标题】Jquery Button 使表单可见【英文标题】:Jquery Button to make visible a form 【发布时间】:2012-12-06 13:20:49 【问题描述】:

我想问一下如何在单击按钮时使表单不可见?所以,如果我有一个名为“隐藏”的按钮和一个包含许多按钮、文本框等的表单。

然后,当我单击“隐藏”按钮时,它将隐藏所有表单和表单中的所有内容,例如文本框、按钮等。我用谷歌搜索但没有结果。我接受使用 Jquery、JS 或 php 语言的答案,因为我正在使用该语言程序。

例如我的表单是这样的:

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

也许有办法通过按钮使其不可见?

【问题讨论】:

$('button').click(function() $('form').toggle(); ); 认真考虑使用字段集而不是将表单放在表格中。 @deed02392 我已经创建了所有这样的搜索表单......所以我无法更改为字段集。谢谢推荐。 我无法理解为什么这个问题有 4 个赞成票。 @itachi 你会因为点赞一堆问题/答案而获得一顶帽子。这个问题在“热门”列表中,所以我假设它是有针对性的。 =) 【参考方案1】:

你想要这样的东西:

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

Demo for hide

对于使用单个按钮切换表单,您可以尝试:

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

Demo for toggle


根据comment

为了防止提交:

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

查看这里.perventDefault()

【讨论】:

@CeliaTan 检查上面的演示,如果有任何问题,请发表评论。 我不知道为什么,但代码对我不起作用...它重新加载页面(我看到闪烁)但表单仍然显示 @CeliaTan 发布您的按钮代码.. 我认为它拥有type="submit" 点击事件返回false来阻止提交怎么样? 啊,我把提交...它现在可以工作了,但我无法从我隐藏的表单中获得我想要的值(我使用 php,方法 post,这就是我把提交以从该表单中获取值)

以上是关于Jquery Button 使表单可见的主要内容,如果未能解决你的问题,请参考以下文章

Jquery学习(表单-Button)-----jQuery1.4.2

使 JButton 不可见,但可点击?

使按钮在 DataGrid 中可见

使 mat-radio-button 成为表单中的必填字段

input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit

如何在自定义 ListView 中设置按钮的可见性?