Question

95

Javascript redirect on form submit depending on input

rated 0 times [ 100] [ 5] / answers: 1 / hits: 37163 / 11 Years ago, sun, june 9, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 11 Years ago kiyam · Accepted Answer

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.