All geek questions in one place

Javascript redirect to form based on input

I am working on a simple javascript quiz and I can’t get Javascript for life to submit a form and open the result on the same page, regardless of whether I use location.href, open.window, or I set "_self" to as a goal. It doesn't seem to matter what I'm doing ...

Here is my javascript:

function answer(){ var response = document.getElementById('answer').value; if (response == "correctanswer") location.href('right.html'); else location.href('wrong.html'); }

Here is my 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 do when the user submits the form, they go to "right.html" if they typed correctanswer in the text box or "wrong.html" if they typed something else.

Everything works fine for me, except that no matter what I do, I can not get the resulting page to open in _self , but rather in another window. Everytime.

I drove me crazy all night.

+4
source share
1 answer

Five things:

  • Remove the entire target form attribute. By default this is a window. Although it does not really matter, because:

  • Cancel the submit event by returning false in onSubmit , since you are processing the form in your own code. One easy way to do this is to return the function false , and return the result of the call to onSubmit .

  • This line is incorrect:

     var response = document.getElementById('answer').value;
    Items

    form do not have value . Instead, you should put id on the input type="text" element.

  • href on location not a function, this property. You simply assign it (or simply assign location directly).

  • This is a little subtle: because you have a global function called answer and you have an element with id "answer" , there is a conflict: both want to end up as window properties (one of the many reasons not to use the old DOM0 onxyz attributes - or global functions ) Therefore, you need to change the name of one of them, for example, 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.

+18
source

Source: https://habr.com/ru/post/1485255/

More articles:


All Articles