Javascript redirect on form submit depending on input

Question

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.

T.J. Crowder · Accepted Answer · 2013-06-09 06:42:44Z

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.

Wow! Thanks much for all the help clearing up my murky code! And for the speedy reply!

Collectives™ on Stack Overflow

Javascript redirect on form submit depending on input

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related