Html Javascript根据输入重定向表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17007010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript redirect on form submit depending on input
提问by tpitman
I'm working on a simple javascript quiz, and I can't for the life of me get Javascript to submit the form and open the result in the same page, regardless of whether I use location.href, open.window, or whether I set "_self" as the target. Doesn't seem to matter what I do...
我正在做一个简单的 javascript 测验，我一生都无法让 Javascript 提交表单并在同一页面中打开结果，无论我是使用 location.href、open.window 还是我将“_self”设置为目标。我做什么似乎并不重要...
function answer() {
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location.href('right.html');
else
location.href('wrong.html');
}<form onSubmit="answer()" id="answer" target="_self">
<input type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>So, what I want to happen is, when the user submits the form, they go to "right.html" if they typed correctanswerinto the text box, or "wrong.html" if they typed anything else.
所以，我想发生什么，当用户提交表单，他们去“right.html”如果他们输入correctanswer到文本框中，或“wrong.html”如果他们输入任何东西。
I've got it running fine, except for the fact that no matter what I do I can't get the resulting page to open in _self, but rather in another window. Every time.
我让它运行良好，除了无论我做什么我都无法打开结果页面_self，而是在另一个窗口中打开。每次。
Been driving me crazy all night.
整晚都让我发疯。
回答by T.J. Crowder
Five things:
五件事：
Remove the
targetattribute offormentirely. The default is the same window. Although it doesn't really matter, because:Cancel the
submitevent by returningfalsein youronSubmit, since you're handling the form in your own code. One easy way to do this is have your function returnfalse, and in theonSubmit, return the result of the call.This line is incorrect:
var response = document.getElementById('answer').value;formelements don't have avalue. You'd want to put theidon theinput type="text"element instead.The
hrefonlocationis not a function, it's a property. You just assign to it (or just assign directly tolocation).This one's a bit subtle: Because you have a global function called
answer, and you have an element with anid"answer", there's a conflict: Both want to end up as properties of thewindowobject (one of many reasons not to use old DOM0onxyzattributes — or global functions, come to that). So you need to change the name of one of them, e.g., change the function tocheckAnsweror similar.
完全去除的
target属性form。默认是同一个窗口。虽然这并不重要，因为：submit通过false在您的 中返回来取消事件onSubmit，因为您是在自己的代码中处理表单。一种简单的方法是让您的函数 returnfalse，并在onSubmit, 中返回调用的结果。这一行是不正确的：
var response = document.getElementById('answer').value;form元素没有value. 你会希望把id上input type="text"元素来代替。该
href上location是不是一个函数，这是一个性质。您只需分配给它（或直接分配给location）。这个有点微妙：因为您有一个名为 的全局函数
answer，并且您有一个带有 的元素id"answer"，所以存在冲突：两者都希望最终成为window对象的属性（不使用旧的 DOM0onxyz属性的众多原因之一- 或全局功能，来吧）。因此您需要更改其中之一的名称，例如，将功能更改为checkAnswer或类似。
So:
所以：
<form onSubmit="return checkAnswer();">
<input id="answer" type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
And:
和：
function checkAnswer(){
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location = 'right.html';
else
location = 'wrong.html';
return false;
}
Full Example: Live Copy| Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form onSubmit="return checkAnswer();">
<input id="answer" type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
<script>
function checkAnswer(){
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location = 'http://jsbin.com/ukifoh/1'; // 'right.html';
else
location = 'http://jsbin.com/ukifoh/2'; // 'wrong.html';
return false;
}
</script>
</body>
</html>
I would recommend always using consistent, useful code indentation, and I'm a big fan of always using blocks, not just statements, with control structures.
我建议始终使用一致的、有用的代码缩进，并且我非常喜欢始终使用块，而不仅仅是语句和控制结构。
