Menu
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...
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 correctanswer into the text box, or "wrong.html" if they typed anything else.
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.
Been driving me crazy all night.
558
Five things:
Remove the target attribute of form entirely. The default is the same window. Although it doesn't really matter, because:
Cancel the submit event by returning false in your onSubmit, since you're handling the form in your own code. One easy way to do this is have your function return false, and in the onSubmit, return the result of the call.
This line is incorrect:
var response = document.getElementById('answer').value;
form elements don't have a value. You'd want to put the id on the input type="text" element instead.
The href on location is not a function, it's a property. You just assign to it (or just assign directly to location).
This one's a bit subtle: Because you have a global function called answer, and you have an element with an id "answer", there's a conflict: Both want to end up as properties of the window object (one of many reasons not to use old DOM0 onxyz attributes — or global functions, come to that). So you need to change the name of one of them, e.g., change the function to checkAnswer or similar.
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.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
