[英]HTML/JavaScript why does my form keep redirecting me and how do I stop it?
I am trying out JS for the first time, and I'm trying to carry out a few basic tasks just to check everything works, and when I click submit to simply check some variables show them with 'alert', I am returned a 404 page not found. 我是第一次尝试JS,并且尝试执行一些基本任务只是为了检查一切正常,当我单击“提交”以简单地检查一些带有“警告”的变量时,我返回了404网页未找到。 I haven't been able to find anything helpful. 我还找不到任何有用的东西。 I have tried action="#" in the form tag and also the prevent.Default method I found but so far to no avail. 我在表单标记中尝试了action =“#”,还尝试了prevent.Default方法,但到目前为止没有用。 Below is my HTML and JavaScript files. 以下是我的HTML和JavaScript文件。 Thanks in advance!! 提前致谢!!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="scripts.js"></script>
<title>Classical Ciphers Test</title>
</head>
<body>
<div id="wrapper_ciphers">
<div id="container_ciphers">
<div id="heading"><h1><br>Classical <br>Ciphers</h1></div>
<div id="caesar_cipher">
<div id="inner_caesar"><h1>Caesar Cipher</h1>
<form onSubmit="caesarEncipher()">
<input type="text" id="caesar_text" required>
<input type="text" id="caesar_key" required>
<input id="caesar_submit" type="submit" value="Submit" >
</form>
</div>
<div id="hill_cipher">
<div id="inner_hill"><h1>Hill Cipher</h1></div>
</div>
<div id="vigenere_cipher">
<div id="inner_vigenere"><h1>Vigenere Cipher</h1></div>
</div>
</div></div>
here is the JavaScript file. 这是JavaScript文件。
function validateKey(){
alert("Hello");
if(isNAN(document.getElementById("caesar_key").value)){
alert("Please input a valid number")
}
}
function caesarEncipher(){
validateKey();
alert(document.getElementById("caesar_key").value))
}
To not submit by default, try below 要默认不提交,请尝试以下操作
<form onSubmit="caesarEncipher(); return false;">
and I would use error checking like this. 而且我会像这样使用错误检查。
if(document.getElementById("caesar_key").value == ""){
function validateKey(){ alert("Hello"); if(document.getElementById("caesar_key").value == ""){ alert("Please input a valid number") } } function caesarEncipher(){ validateKey(); alert(document.getElementById("caesar_key").value) }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="style.css"> <script src="scripts.js"></script> <title>Classical Ciphers Test</title> </head> <body> <div id="wrapper_ciphers"> <div id="container_ciphers"> <div id="heading"><h1><br>Classical <br>Ciphers</h1></div> <div id="caesar_cipher"> <div id="inner_caesar"><h1>Caesar Cipher</h1> <form onSubmit="caesarEncipher(); return false;"> <input type="text" id="caesar_text" required> <input type="text" id="caesar_key" required> <input id="caesar_submit" type="submit" value="Submit" > </form> </div> <div id="hill_cipher"> <div id="inner_hill"><h1>Hill Cipher</h1></div> </div> <div id="vigenere_cipher"> <div id="inner_vigenere"><h1>Vigenere Cipher</h1></div> </div> </div></div>
So I solved it by taking away the form tags and just dealt with the individual elements. 因此,我通过删除表单标签并仅处理各个元素来解决了该问题。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="scripts.js"></script>
<title>Classical Ciphers Test</title>
</head>
<body>
<div id="wrapper_ciphers">
<div id="container_ciphers">
<div id="heading"><h1><br>Classical <br>Ciphers</h1></div>
<div id="caesar_cipher">
<div id="inner_caesar"><h1>Caesar Cipher</h1>
<input type="text" id="caesar_text" >
<input type="text" id="caesar_key" >
<input type="submit" value="Submit" onClick="caesarEncipher()" >
</div>
<div id="hill_cipher">
<div id="inner_hill"><h1>Hill Cipher</h1></div>
</div>
<div id="vigenere_cipher">
<div id="inner_vigenere"><h1>Vigenere Cipher</h1></div>
</div>
</div></div>
</body>
</html>
and the JS 和JS
function caesarEncipher(){
if (document.getElementById("caesar_text").value === "") {
alert("Please enter some text to encipher.");
return false;
} else if (document.getElementById("caesar_key").value === "") {
alert("Please enter a valid key.");
return false;
}
if(isNaN(document.getElementById("caesar_key").value)) {
alert("Please input a valid number");
return false;
}
alert(document.getElementById("caesar_key").value);
}
and it all works fine. 而且一切正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.