如何仅使用javascript和css隐藏和显示表单内的div

Question

I have a form that has several divs within it grouping certain input fields together. 我有一个窗体，其中包含多个div，将某些输入字段组合在一起。 I want to hide some of those divs (and the input fields within those divs) when the page initially loads. 我想在页面初始加载时隐藏其中一些div（以及这些div中的输入字段）。 This is simple to do with the display:none attribute for css. 这对于CSS的display：none属性很简单。 Then, I want to show those hidden divs and their input fields when the user clicks on a show/hide button. 然后，我想在用户单击“显示/隐藏”按钮时显示那些隐藏的div及其输入字段。 I am using javascript and css only (no jquery) for this project. 我为此项目仅使用javascript和CSS（无jquery）。

I have a basic javascript function that alternately hides (display:none) or shows (display:block) the divs with the click of a button. 我有一个基本的javascript函数，只需单击一下按钮，即可交替隐藏（display：none）或显示（display：block）div。 The function works just fine when I use it on a test page where the divs are not part of a form. 当我在div不属于表单的测试页上使用该函数时，该函数运行良好。 However, when I try to use this same function with the divs part of (ie inside) the form, it doesn't work. 但是，当我尝试对表单的divs部分（即内部）使用相同的功能时，它不起作用。 Actually, it appears to work, but then almost instantaneously reverts back to the initial state of the display setting. 实际上，它似乎可以工作，但随后几乎立即恢复为显示设置的初始状态。 I have a feeling that the issue resides in the fact that my divs are inside a form, but I can't understand why that would be an issue. 我感觉问题出在我的div位于表单内这一事实，但是我不明白为什么这会是一个问题。 What should I do to correct this issue so that the divs within the form can hide/show with the toggle of a button. 我该怎么做才能更正此问题，以便表单内的div可以通过按钮的切换隐藏/显示。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#random {
    width: 600px;
    min-height: 50px;
    background-color:#E01418;
    color:#B5F0B9;
    display: block;
}
#hideshow {
    width: 600px;
    min-height: 50px;
    background-color:#223FCD;
    color:#F2D595;
    display:block;
}
</style>
</head>

<body>

<form id="myform" name="myform" method="post" action="">
    <div id="random">
        <input type="text" id="firstname" name="firstname" placeholder="firstname">
        <input type="text" id="lastname" name="lastname" placeholder="lastname">
        <input type="email" id="email" name="email" placeholder="email">
    </div>

    <div id="hideshow">
        <input type="password" id="password" name="password" placeholder="password">
        <input type="text" id="address" name="address" placeholder="address">
        <input type="text" id="phone" name="phone" placeholder="phone">
    </div>
    <input type="submit" id="submit" name="submit" value="Update">
    <button id="togglehideshow">Hide/Show</button>
</form>

<script>

var button = document.getElementById('togglehideshow'); 

button.onclick = function() {
    var div = document.getElementById('hideshow');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

</script>

</body>

</html>

One last thing - my button I'm using is NOT the submit button for the form. 最后一件事-我正在使用的按钮不是表单的提交按钮。 I just didn't want to confuse anyone with that. 我只是不想让任何人对此感到困惑。 Thanks for your help in advance! 谢谢您的帮助！

Answer 1

Add type = button for the button that shows and hides the div. 为显示和隐藏div的按钮添加type = button。

<button type="button" id="togglehideshow">Hide/Show</button>

This is because the button tries to submit the form after hiding the div. 这是因为按钮在隐藏div之后尝试提交表单。

如何仅使用javascript和css隐藏和显示表单内的div

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-16 17:11:47

如何仅使用javascript和css隐藏和显示表单内的div

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-16 17:11:47

解决方案1
0 已采纳 2015-07-16 17:11:47