HTML / JavaScript为什么我的表单会不断重定向我，以及如何停止它？

Question

我是第一次尝试JS，并且尝试执行一些基本任务只是为了检查一切正常，当我单击“提交”以简单地检查一些带有“警告”的变量时，我返回了404网页未找到。 我还找不到任何有用的东西。 我在表单标记中尝试了action =“＃”，还尝试了prevent.Default方法，但到目前为止没有用。 以下是我的HTML和JavaScript文件。 提前致谢！！

<!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>

这是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))

}

Answer 1

要默认不提交，请尝试以下操作

<form onSubmit="caesarEncipher(); return false;">

而且我会像这样使用错误检查。

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>

Answer 2

因此，我通过删除表单标签并仅处理各个元素来解决了该问题。

<!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>

和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); 
}

而且一切正常。

HTML / JavaScript为什么我的表单会不断重定向我，以及如何停止它？

问题描述

2 个解决方案

解决方案1
0 2018-02-09 01:30:30

解决方案2
0 2018-02-09 01:33:22

HTML / JavaScript为什么我的表单会不断重定向我，以及如何停止它？

问题描述

2 个解决方案

解决方案1 0 2018-02-09 01:30:30

解决方案2 0 2018-02-09 01:33:22

解决方案1
0 2018-02-09 01:30:30

解决方案2
0 2018-02-09 01:33:22