Redirecting to URL in external Javascript function not working

Question

I'm currently trying to program a relatively simple site, but my HTML and Javascript skills are pretty basic. Basically, what I'm trying to do is create a page where the user is asked a question which they answer by typing it into a form. With an external Javascript function the users answer is compared to the right one, and if they're the same, the user is supposed to be redirected to a different site. Here's the form in my HTML document:

<FORM NAME="myform" ACTION="" METHOD="GET"> Answer:
    <INPUT TYPE="text" NAME="inputbox" VALUE="">
    <button onClick="checkAnswerExact(this.form)"> Submit </button> 
</FORM>

My Javascript function looks like this:

function checkAnswerExact(form){ 
  //GET ANSWER
  var x = form.inputbox.value;
  //CONVERT ANSWER TO STRING
  var TestAnsw =x.toString();
  //DEFINE RIGHT ANSWER
  var RightAnsw = "rightanswer";
  //CHECK IF THEY ARE THE SAME
  if (TestAnsw.toLowerCase() == RightAnsw.toLowerCase() ){ 
    alert("The answer is right.");
    window.location.href = 'https://www.reddit.com/';
  } //WHAT TO DO IF ANSWER'S RIGHT
  else {
    alert("The answer is wrong.");
  } //WHAT TO DO IF ANSWER'S WRONG  
}

As an example site to redirect it to, I chose reddit. The alerts work right, so the comparison of the strings is okay. I've been googling for a while now and read through a bunch of forums but nothing seemed to work for me. I've tried document.location=url, and window.replace(url) both inside the if-else statement and outside and nothing seems to work, the window only reloads. What does work is window.open(url), but I don't want it to open in a new tab. I'm using Chrome as my browser, if that's relevant.

I'd love some help, I've been researching for some hours and I'm pretty sure it's probably some mistake I made that I can't see.
Cheers!

Do you get any error message in F12 console? – maowtm Jan 28 '16 at 14:16 — maowtm, Jan 28 '16 at 14:16

Jorel Amthor · Answer 1 · 2016-01-28T15:08:41.467

2

This should do the trick.

<INPUT TYPE="text" id="inputbox" NAME="inputbox" VALUE="">
<button id="myButton">Submit</button>

<script type="text/javascript">
   document.getElementById("myButton").onclick = function () {
       var TestAnsw =document.getElementById("inputbox").value;
       //DEFINE RIGHT ANSWER
       var RightAnsw = "rightanswer";
       //CHECK IF THEY ARE THE SAME
       if (TestAnsw.toLowerCase() == RightAnsw.toLowerCase() )
          {alert("The answer is right.");
          location.href = "https://www.reddit.com/"} 
      //WHAT TO DO IF ANSWER'S RIGHT
      else
      {alert("The answer is wrong.");} //WHAT TO DO IF ANSWER'S WRONG

    }
};
</script>

edited Jan 28 '16 at 15:08

answered Jan 28 '16 at 14:05

Jorel Amthor

1,264
13
38

I tried this and now it doesn't even display the alerts. :/ – lemmalama Jan 28 '16 at 14:14
i've added id's on your button and input tag. Make sure yours have those id's too – Jorel Amthor Jan 28 '16 at 15:07

score 2 · Accepted Answer · answered Jan 28 '16 at 15:23

allright, I just figure out the issue with your code. Add return false on onClick event with your button. So your code will become

<button onClick="checkAnswerExact(this.form); return false;"> Submit </button>

and also change

 window.location.href = 'https://www.reddit.com/';

to

 window.location = 'https://www.reddit.com/';

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

As suggested in this question, you need to call the function with "_self":

window.open("https://www.reddit.com/", "_self");

This indicates that it has to open in the same tab, and not open a new one. It's the same as setting the target in a element.

edited May 23 '17 at 12:31

Community

1
1

answered Jan 28 '16 at 14:14

Daniel Higueras

2,404
22
34

Thank you for answering :) I tried this, but it just reloads my initial site again :/ – lemmalama Jan 28 '16 at 14:19
I think I know why, let me make some changes – Daniel Higueras Jan 28 '16 at 14:24
I believe your form is being submitted by the default form submit behavior. You should prevent the form from being submitted before you do what you want. Search for `event.preventDefault();` in stackoverflow. Hope it helps. – Daniel Higueras Jan 28 '16 at 14:54

score 0 · Answer 4 · answered Jan 28 '16 at 15:42

Your button is a submit button (which is the default if you don't specify a type), so the browser sends a GET request for your form if you press the button (and after the onclick handler has been executed). Just change your button definition to

<button type="button" onClick="checkAnswerExact(this.form)"> Submit </button>

and it should work.

Redirecting to URL in external Javascript function not working

4 Answers4