CODEWITHSUNDEEP
javascripthtmlformsurlhttp-redirect
lemmalama
lemmalama

Reputation: 3

Redirecting to URL in external Javascript function not working

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!

Upvotes: 0

Views: 2879

Answers (4)

ul90
ul90

Reputation: 787

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.

Upvotes: 0

Qammar Feroz
Qammar Feroz

Reputation: 718

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/';

Upvotes: 2

Jorel Amthor
Jorel Amthor

Reputation: 1294

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>

Upvotes: 2

Daniel Higueras
Daniel Higueras

Reputation: 2404

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.

Upvotes: 0

Related Questions