我有一个HTML页面，负责在我的网站上创建新用户。创建用户后，网站必须显示一个弹出窗口，说明用户已成功创建。
一切都很好，除了我必须配置一个"；onsubmit＝return false"；因为我没有找到任何其他方法来显示弹出窗口，而不会在提交后立即重定向页面。现在表单不会保存正在创建的新用户，所以我试图将表单值更改为true。。。怎么能做到呢？在弹出窗口关闭后返回true。
这是我到目前为止的代码-
document.getElementById("accountForm").addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup() {
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
document.getElementById("accountForm").setAttribute("onsubmit", "true");
window.location.replace("/login/");
}/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" onsubmit="return false" method="post" id="accountForm">
<form onsubmit="return false" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>您有无效的HTML，嵌套的表单标签，具有重复的ID
你需要提交表格，但如果你真的提交了表格，为什么不在返回时显示弹出窗口呢
以下是如何在表单关闭时停止并提交
const form = document.getElementById("accountForm")
form.addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup(e) {
e.preventDefault(); // stop submission
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.submit();
}/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>最后，我找到了一个解决方案。在提交按钮上使用事件侦听器来阻止默认的操作过程，然后显示弹出窗口。之后，删除弹出窗口，并告诉表单需要执行什么操作并提交。这就是它的样子！
<script>
const form = document.getElementById("accountForm");
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function closePopup(){
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.action = "/create/created_user";
form.submit()
}
document.getElementById("accountForm").addEventListener("submit", function(event){
event.preventDefault();
blur.classList.toggle('active');
popup.classList.add("open-popup");
});
</script># POPUP HTML CONFIGURATION
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with the job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
#FORM CONFIGURATION
<form method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>