Question

从标题中可能不容易理解，但我试图只使用javascript制作登录/注册表单。

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="prueba.css">
</head>

<body>
    <div id="Div1">
        <form class="login-form">
            <input type="text" placeholder="username" />
            <input type="password" placeholder="password" />
            <button>login</button>
            <p class="message">Not registered?
                <button onclick="switchVisible()">Register</button>
            </p>
        </form>
    </div>
    <div id="Div2">
        <form class="register-form">
            <input type="text" placeholder="name" />
            <input type="password" placeholder="password" />
            <input type="text" placeholder="email address" />
            <button>create</button>
            <p class="message">Already registered?
                <button onclick="switchVisible()">Login</button>
            </p>
        </form>
    </div>
    <button onclick="switchVisible()">Swap</button>

    <script src="prueba.js"></script>

</body>

</html>

交换按钮工作正常，但内部形式不。我想留下表格中的那些。

编辑：prueba.js

function switchVisible() {
            if (document.getElementById('Div1')) {

                if (document.getElementById('Div1').style.display == 'none') {
                    document.getElementById('Div1').style.display = 'block';
                    document.getElementById('Div2').style.display = 'none';
                }
                else {
                    document.getElementById('Div1').style.display = 'none';
                    document.getElementById('Div2').style.display = 'block';
                }
            }
}

基本上，我想要展示的只是一个表格，如果您在登录表格上，可以按“尚未注册？”中的“注册”。它将显示注册表格，反之亦然。

如果您查看https://www.instagram.com/登录页面，您将获得该页面。问题是我希望交换按钮是个性化的，但只有在我想隐藏/显示div之外的按钮才有效。

Answer 1

我刚刚创建了此问题的基本演示：https://jsfiddle.net/bv5m42od。

问题似乎是div内的按钮在执行JavaScript之前提交表单。

将属性type="button"添加到<button>标记会阻止此操作，并允许Javascript在页面回发之前执行，例如：

<button type="button" onclick="switchVisible()">Register</button>

参见工作示例：https://jsfiddle.net/bv5m42od/1

作为另一种选择，您只需将这些按钮放在<form>标记之外，而无需添加属性。

使用div内部函数的触发器隐藏div

1 个答案: