javascript - 单击后隐藏按钮(页面上有现有表单)

coder 2024-07-28 原文

我试图在点击按钮后隐藏它(不在表单标签内)。下面是现有的代码。我尝试过的所有解决方案要么会破坏功能，要么会干扰页面上的表单。

DIV hidden-dev 标签之间的内容是隐藏的，直到靠近代码底部的按钮被点击。单击该按钮后，将向用户显示所有剩余内容。

一旦显示内容，“检查可用性”按钮就没有用了，所以我想隐藏它(特别是因为核心表单出现了提交按钮，并且在底部看到这两个按钮令人困惑全长页面。

这是正确执行所有操作的现有代码(除了在单击后隐藏按钮)...

 <html>
    <head>
    <style>
    .hidden-div {
        display:none
    }
    </style>
    </head>
    <body>
    <div class="reform">
        <form id="reform" action="action.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="type" value="" />
            <fieldset>
                content here...
            </fieldset>

                <div class="hidden-div" id="hidden-div">

            <fieldset>
                more content here that is hidden until the button below is clicked...
            </fieldset>
        </form>
                </div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
    </div>
    </body>
    </html>

最佳答案

将按钮更改为:

<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>

FIDDLE

或者更好的是，通过识别按钮使用适当的事件处理程序:

<button id="show_button">Check Availability</button>

和一个脚本

<script type="text/javascript">
    var button = document.getElementById('show_button')
    button.addEventListener('click',hideshow,false);

    function hideshow() {
        document.getElementById('hidden-div').style.display = 'block'; 
        this.style.display = 'none'
    }   
</script>

FIDDLE

关于javascript - 单击后隐藏按钮(页面上有现有表单)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16903605/

javascript 单击 34 gt lt

有关javascript - 单击后隐藏按钮(页面上有现有表单)的更多相关文章

ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
ruby - 在 ASP 页面上 Mechanize 中断 - 2
require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie
ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？最佳答案如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
Ruby隐藏与覆盖 - 2
我刚刚了解到，在Java中，覆盖和隐藏之间是有区别的(静态方法是隐藏的，而不是覆盖)，这意味着Java使用早期绑定(bind)和后期绑定(bind)。是否有与方法隐藏类似的东西，或者它只是具有方法重写？最佳答案 Java具有三种不同的“方法”:实例方法，静态方法和构造函数。Ruby只有一个:实例方法。在Java中，静态方法的行为必须不同于实例方法，因为类不是对象。它们没有类，因此也没有父类(superclass)，因此没有要覆盖的内容。在Ruby中，类与其他任何对象一样都是对象，它们具有一个类，该类可以具有父类(superclas
ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2
我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.
ruby-on-rails - 在现有数据库上进行 Rails 迁移 - 2
我正在创建一个新的Rails3.1应用程序。我希望这个新应用程序重用现有数据库(由以前的Rails2应用程序创建)。我创建了新的应用程序定义模型，它重用了数据库中的一些现有数据。在开发和测试阶段，一切正常，因为它在干净的表数据库上运行，但是当尝试部署到生产环境时，我收到如下消息:PGError:ERROR:column"email"ofrelation"users"alreadyexists***[err::localhost]:ALTERTABLE"users"ADDCOLUMN"email"charactervarying(255)DEFAULT''NOTNULL但是我在迁移中有这
ruby - 每个页面上的 Jekyll 分页 - 2
据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？最佳答案如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b
ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2
基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

javascript - 单击后隐藏按钮(页面上有现有表单)

有关javascript - 单击后隐藏按钮(页面上有现有表单)的更多相关文章

随机推荐