如何仅在单击按钮时显示带有表单的 div? [英] How do I show a div with a form only if a button is clicked?

问题描述

我在 div 中有一个表格，其中包含一个供用户填写的表单.div 上方是一个按钮，上面写着客户信息".我只想在客户想要填写信息时显示表单.这个想法是，如果他们想填写，他们可以点击按钮，表格就会出现在下面.这些部分有很多，所以我只希望客户必须看到他们想看到的内容.下面是一个例子...

<div><表格><表格><tr><td>名称:<input type="text" value="" id="name" name="name"></td></tr>

我的问题是如何编写一个简单的 javascript 函数，该函数将在单击将显示和隐藏 Div 的按钮时起作用?表单仍然存在，只是隐藏，值只是空白.

解决方案

您可以使用 onClick 事件来做到这一点:

工作示例

HTML:

隐藏div<form id="some_form"><表格>

javascript:

I have a table inside a div that contains a form for the user to fill out. Above the div is a button that says "Customer info". I want to show the form only if the customer wants to fill out the information. The idea is that if they want to fill it out they can click the button and the form will appear below. There are many of these sections so I only want the customer to have to see what they want to see. Below is an example...

<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>

My question is how can I write a simple javascript function that will act upon clicking the button that will show and hide the Div? The form would still be there just hidden and the values would just be blank.

解决方案

You can use the onClick event to do that:

Working Example

HTML:

<button id="some_id">Hide div</button>

<form id="some_form">

<form>

javascript:

<script type="text/javascript">
    var theButton = document.getElementById('some_id');
    
    theButton.onclick = function() { 
        document.getElementById('some_form').style.visibility='hidden';   
    }
    
</script>
   

这篇关于如何仅在单击按钮时显示带有表单的 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！