英文:
How to move to another created page after the form validation is over?
问题
我已经创建了一个HTML表单，并在文件script.js中编写了验证逻辑。
在成功验证表单并满足条件后，它应该将用户带到下一个页面。
但实际情况并非如此。
所有这三个文件都在同一个文件夹中。
文件：Script.js
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
function submit() {
if (username.length > 0 && pass.length > 0) {
if (username === "Abi" && pass.length == 5) {
window.open("file:///C:/Users/abiji/Desktop/RapidAPI/index1.html");
return true;
}
}
return false;
}
文件：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RECIPE</title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form name="login" onsubmit="return submit()" method="get">
<div>
<label for="name">Name</label>
<input type="text" id="name" required />
</div>
<div>
<label for="pass">password</label>
<input type="password" id="pass" required />
</div>
<button type="submit" id="but">Login</button>
</form>
</div>
</body>
<script src="script.js"></script>
</html>
文件：index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>First Page</title>
</head>
<body>
<h1>Welcome Beautiful!</h1>
</body>
</html>
以上是您提供的代码的翻译部分。
英文:
I have created a HTML form and i wrote the validation logic in the file script.js.
After the form is successfully validated and the condition is met, it should take the user to the next page.
But it is not happening as expected.
All these three files are in the same folder
File: Script.js
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
function submit() {
if (username.length > 0 && pass.length > 0) {
if (username === "Abi" && pass.length == 5) {
window.open("file:///C:/Users/abiji/Desktop/RapidAPI/index1.html");
return true;
}
}
return false;
}
File: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RECIPE</title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form name="login" onsubmit="return submit()" method="get">
<div>
<label for="name">Name</label>
<input type="text" id="name" required />
</div>
<div>
<label for="pass">password</label>
<input type="password" id="pass" required />
</div>
<button type="submit" id="but">Login</button>
</form>
</div>
</body>
<script src="script.js"></script>
</html>
File: index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>First Page</title>
</head>
<body>
<h1>Welcome Beautiful!</h1>
</body>
</html>
答案1
得分: 3
将以下代码移到 submit 函数中。你之前的做法是在脚本加载时进行评估，而不是在提交表单时进行评估。因此，无论你输入什么，长度始终为0。
顺便提一下：最好使用 === 来检查相等性，而不是 ==。
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
英文:
Move
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
to the submit function. The way you did that it is evaluated when the script is loaded and not when you submit the form. Therefore the length remains 0 no matter what you type in.
Sidenote: it is good practice to use === to check equality instead of ==.
答案2
得分: 1
你应该使用 window.location.href 而不是 window.open，因为它更可靠。
尝试这样做：
window.location.href = "file:///C:/Users/abiji/Desktop/RapidAPI/index1.html";
而不是：
window.open("file:///C:/Users/abiji/Desktop/RapidAPI/index1.html");
英文:
You should use window.location.href instead of window.open. because it is more reliable.
Try this
window.location.href = "file:///C:/Users/abiji/Desktop/RapidAPI/index1.html";
instead of
window.open("file:///C:/Users/abiji/Desktop/RapidAPI/index1.html");
答案3
得分: 1
首先，有一个内置的提交函数，它在表单提交后触发。你将你的函数命名为"submit"，这导致了重复和无法调用。我将其命名为"submitEvent"，现在它可以正常工作。
其次，如果HTML文件位于同一目录中，你可以简单地像这样调用它们："./index1.html"。不要提供完整路径，这不是一个好的做法。
第三，你在作用域之外创建了"username"和"pass"参数。它们将在页面加载后创建，它们将是空白的，并且每次提交时都不会改变。请在你将创建的函数内部创建这些参数。在我的情况下，它是"submitEvent"，我在其范围内创建这些参数。
当你使用"onsubmit"事件用于HTML表单标签时，你只需使用内置的提交函数，它返回一个布尔值。在你的示例中，你根据条件返回true或false。用户名"Abi"和长度为5的任何密码都可以通过你的条件，并成功重定向。
function submitEvent() {
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
if (username.length > 0 && pass.length > 0) {
if (username === "Abi" && pass.length == 5) {
window.open("./index1.html");
return true;
}
}
return false;
}
英文:
First things first, there is built-in submit function, which triggers after form submitting. You named your function as "submit", which results in duplicate and uncallable. I named it as "submitEvent", and it works now.
Secondly, If html files are in the same directory, you can simply call them like "./index1.html". Don't give the full path, it is not a good practice.
Thirdly, you created "username" and "pass" parameters out of scope. They will be created after page load, they will be empty spaces and everytime you submit, nothing will change. Create these parameters inside the function that you will create. In my case, it is submitEvent and I create these parameters in its scope.
When you use "onsubmit" event for html form tag, you simply use the built-in submit function, which returns a boolean value. In your example, you return true or false based on your conditions. Username "Abi" and any password with the length of 5 can pass your conditions and successfully redirects.
function submitEvent() {
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
if (username.length > 0 && pass.length > 0) {
if (username === "Abi" && pass.length == 5) {
window.open("./index1.html");
return true;
}
}
return false;
}
答案4
得分: 0
1- 将<script src="script.js"></script>标签移动到HTML主体的末尾，在闭合的</body>标签之前。
2- 更新你的script.js中的提交函数如下：
function submit(event) {
event.preventDefault();
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
if (username === "Abi" && pass.length === 5) {
window.location.href = "index1.html";
return true;
}
return false;
}
这些更改确保了表单验证的正确执行，并且只有在满足条件时才会将页面重定向到index1.html。
英文:
1- Move the <script src="script.js"></script> tag to the end of the HTML body, just before the closing </body> tag.
2- Update your submit function in script.js as follows:
function submit(event) {
event.preventDefault();
var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
if (username === "Abi" && pass.length === 5) {
window.location.href = "index1.html";
return true;
}
return false;
}
These changes ensure that the form validation is properly performed and the page is redirected to index1.html only if the conditions are met.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论