如何在页面上显示两份表单时提交一份表单
如何在页面上显示两份表单时提交一份表单
提问于 2022-10-19 21:55:12
我目前有一个登录页面，允许某人注册，如果他们没有一个帐户已经。注册表单是通过部分视图添加到页面的覆盖，因此不是嵌套表单。然而，这意味着在一个页面上仍然有两个表单，如果我试图登录，我将被阻止这样做，因为我的注册表单字段没有填写。我如何能够张贴我的日志在表单中，而绕过注册表单？
登录视图：
@page "/login"
@model Login
@{
Layout = "_LoginRegisterLayout";
}
@section Links {
<link rel="stylesheet" href="~/styles/login.css" type="text/css" />
<Link rel="stylesheet" href="~/styles/SignupPartial.css" type="text/css" />
}
<div>
<div class="header-logged-out">
<div class="centered-container">
<a class="header-logo" href="/">
<img src="~/images/hoook_round_blue.png" alt="hoook header logo" height="50px" width="50px" />
</a>
</div>
</div>
<div>
<div class="login-content">
<div class="login-form-header">
<h1>Sign in to Hoook</h1>
</div>
<div class="login-form-body">
<form method="post" asp-page="Login">
<label asp-for="Email">Email Address</label>
<input type="email" asp-for="Email" class="form-input" autofocus autocomplete="email" />
<div class="login-position-relative">
<label asp-for="Password">Password</label>
<input type="password" asp-for="Password" class="form-input" autocomplete="current-password" />
<button value="log-in" type="submit" class="submit-btn">Sign in</button>
<a class="login-position-absolute login-link" href="">Forgot Password?</a>
</div>
</form>
</div>
<div class="login-position-relative login-spacer">
<span class="login-or">or</span>
</div>
<div class="login-create-account">
<p>New to Hoook? <a href="" class="login-link" id="login-create-account">Create an account.</a></p>
</div>
</div>
</div>
</div>
<partial name="_SignupPartial" model="@(new Signup())" />SignupPartial通过上面的部分标签添加：
@model Signup
<div class="signup-overlay signup-hide">
<div class="signup-spacer"></div>
<div class="signup-content">
<div class="content-control signup-position-relative">
<div class="signup-header ">Sign Up</div>
<p class="signup-slogan">It's easy and free to start!</p>
<svg class="signup-exit" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" width="24" fill="currentColor"><path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path></svg>
</div>
<div class="message-control">
<p class="error-message"></p>
</div>
<div class="signup-form content-control">
<form method="post" asp-page="Index" id="signupForm">
<input type="hidden" asp-for="Token" />
<input type="text" asp-for="FirstName" class="signup-input signup-form-control" placeholder="First name" required autofocus />
<input type="text" asp-for="LastName" class="signup-input signup-form-control" placeholder="Last name" required />
<input type="email" asp-for="Email" class="signup-input signup-form-control" placeholder="Email address" required />
<input type="password" asp-for="Password" class="signup-input signup-form-control" autocomplete="new-password" placeholder="New password" required minlength="8" />
<input type="password" asp-for="Confirmation" class="signup-input" autocomplete="new-password" placeholder="Confirm password" required minlength="8" />
<div class="content-control btn-control">
<button value="sign-up" class="submit-btn" type="submit">Sign Up</button>
</div>
<input type="hidden" id="returnUrl" name="returnUrl" value='@(ViewContext.ActionDescriptor.AttributeRouteInfo.Template)' />
</form>
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2022-10-20 08:03:42
这个问题源于我的signup表单按钮使用相同的按钮类名通过javascript提交表单，因为我已经在注册中添加了reCAPTCHA。因此，每次我提交登录表单时，我的javascript都会捕捉到它并阻止提交。在下面的代码片段中可以看到这一点，其中submitBtn元素正在捕获登录提交按钮。解决方案是将querySelector的类名更改为仅针对注册表单按钮。
_LoginRegisterLayout:
<script>
grecaptcha.ready(function() {
let submitBtn = document.querySelector(".submit-btn");
let form = document.querySelector("#signupForm");
submitBtn.addEventListener("click", function(event) {
event.preventDefault();
grecaptcha.execute("@captcha.reCaptchaSiteKey", {action: "signupForm"}).then(function(token) {
if (inputValidationFunction()) {
document.getElementById("Token").value = token;
form.requestSubmit(submitBtn);
}
});
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74132331
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号