点击可见性切换器未按预期工作

我从一些基础PHP开始，并注入了我的（之前工作）javascipt"tabs专利"，将所有内容都放在一个地方。

我这里有两个"部分"的表格，单击"注册"按钮后，第一个"登录"部分隐藏，"注册"部分出现。但它只在一秒钟（眨眼）出现，你能检查一下这里有什么问题吗？

默认情况下，"注册"部分在CSS样式表中是隐藏的，然后单击按钮后，JavaScript代码更改可见性值，但是为什么它只闪烁一个并再次隐藏？

.js

function showSignup () {
            document.getElementById("signup").style.visibility = "visible";
            document.getElementById("login").style.visibility = "hidden";
        }
function showLogin () {
            document.getElementById("signup").style.visibility = "hidden";
            document.getElementById("login").style.visibility = "visible";
        }

.html

<!DOCTYPE html>
<head>    
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css">
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="script.js" ></script>
</head>
<body>
<section id="login">
    <form action="login.php" method="post"> 
        <p>your login: <input type="text" name="login" value="" /> </p>
        <p>your pass: <input type="text" name="pass" value="" /> </p>
        <p> <input type="submit" value="send" /> </p> 
    </form>
    <form action="" method="post">
        <p><input type="submit" value="sign up" onclick="showSignup()" /> </p>
    </form>
</section>
<section id="signup">
    <form method="post">
        <h2>Create new account</h2>
        <p>login: <input type="text" name="slogin" value="" /></p>
        <p>e-mail: <input type="text" name="semail" value="" /></p>
        <p>password: <input type="text" name="spass" value="" />  </p>
        <p><input type="submit" value="Sign Up" /> </p>
    </form>
    </section>
</body>
</html>

.css

html, body {
    margin: 0;
    padding: 0; 
}
section {
    position: relative;
    margin: 2em auto;
    padding: 1em;
    border: solid gray 2px;
    border-radius: 8px;
    width: 400px;
}
#signup {
    visibility: hidden;
    position: absolute;
}
#login {
    position: absolute;
}

我做了一个jsfiddle，但它在单击"注册"按钮后显示错误

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x40fda90>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x40fda10>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x40fda90>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x4512190>, 'help_text': '', 'name': 'js_wrap'}"}

为什么？

ID为"login"部分中第二个表单的提交按钮会触发表单，从而重新加载页面。

因此，您可以阻止表单使用 JavaScript 提交，也可以将输入类型更改为按钮。

您已将该函数附加到表单中的提交按钮。当您单击它时，JavaScript 将运行，然后表单提交并加载一个新页面。

使用

常规按钮，不要使用表单。

相关内容

最新更新

热门标签：