window.location Does not work in javascript

Asked 18/5, 2012 at 3:26 Answered 6/7, 2018 at 8:35

javascript function http-redirect window.location

This code below for some reason doesn't work when trying to redirect. I have tried several other ways such as window.location.href and more. The only thing that works is window.open ("") but this opens a page in a new window when I need it to be on the same. If I do window.open("", "_self") then it does not work again. If I replace the window.location with an alert it works fine, so I think the overall code is normal just something preventing it from redirecting on the same page. This issue is also on my Windows Chrome and a Mac Firefox.

<html>
    <head>
        <script type="text/javascript">
            function checkAnswers(){    
                getElementById("myQuiz");
                if(myQuiz.elements[1].checked){
                    window.location = "www.google.com";
                }else{
                    alert("Failed");
                }
            };
        </script>
    </head>
    <body>
        <img src="Castle.JPG" />
        <form id="myQuiz" onsubmit="checkAnswers()" action="">
            <p>Name the country this castle is located in?
                <br/>
                <input type="radio" name="radiobutton" value="A"/>
                <label>England</label>
                <input type="radio" name="radiobutton" value="B"/>
                <label>Ireland</label>
                <input type="radio" name="radiobutton" value="C"/>
                <label>Spain</label>
                <input type="radio" name="radiobutton" value="D"/>
                <label>France</label>
                <input type="submit" name="submit" value="Submit"/>
                <input type="reset" name="reset" value="Reset"/>
            </p>
        </form>
    </body>
</html>

Depositor answered 18/5, 2012 at 3:26 Comment(9)

For starters, getElementById( "myQuiz" ); should be var myQuiz = document.getElementById("myQuiz"); – Frolick 18/5, 2012 at 3:30

And please don't put a slash in <input />. It is incorrect. – Askins 18/5, 2012 at 3:37

@jmort253 w3.org/TR/html4/interact/forms.html#h-17.4 – Askins 18/5, 2012 at 3:41

@Derek - You're referencing HTML4, which is superseded by HTML5, which is backwards compatible with HTML4, which kind of makes HTML4 sort of obsolete in my opinion except in some pretty extreme circumstances. Thus, if you're using an HTML5 doctype (which you should) then either method is considered valid. Additionally, here's a handy link: #4893693. My sites also validate with the self-closing tag. – Ardelia 18/5, 2012 at 3:49

@jmort253 - Use W3C's Validation Service, choose HTML5: (Invalid) – Askins 18/5, 2012 at 3:51

@jmort253 - Oh, revalidated and it looks like it is valid in HTML5. – Askins 18/5, 2012 at 3:55

@Derek - That means that the element head is missing a required instance of the child element "title", which it is. Put a <title></title> in the <head></head> section and the error goes away. This has nothing to do with self-closing tags. – Ardelia 18/5, 2012 at 3:55

@Derek - Cool :) Sorry to be picky. The main reason I dug into this as hard as I did is to check my own facts :) Thanks for reaffirming :) – Ardelia 18/5, 2012 at 3:57

You can use self closing HTML like in XHTML in HTML5, but things like <div /> will be interpreted as <div>, not <div></div> as in XHTML. The code looks (arguably) nicer and (arguably) more semantic, but it has no benefit beyond that. – Jacquesjacquet 25/7, 2013 at 12:56

change js to:

function checkAnswers()
{
    var myQuiz=document.getElementById("myQuiz");
    if (myQuiz.elements[1].checked) {
        window.location.href = "http://www.google.com";
    }
    else {
        alert("Failed");
    }
    return false;
};

and change:

<form id="myQuiz" onsubmit="checkAnswers()" action="">

<form id="myQuiz" onsubmit="return checkAnswers();" action="">

Helpful answered 18/5, 2012 at 3:36 Comment(3)

Thanks! Adding the return is definitely what fixed it. I'm obviously very new to javascript, (like a few days new), so can you tell me why this worked? Thanks again. – Depositor 18/5, 2012 at 3:44

@GeorgeKashouh - You have to return, the value of the function checkAnswers has returned, to onsubmit. – Askins 18/5, 2012 at 3:47

To expand, when you return false in an onsubmit, the form doesn't submit. In other words, the page only redirects if the element is checked. – Ardelia 18/5, 2012 at 3:51

When you change the location, you must give it an absolute URL:

location.href = '/some_page_on_my_site';

Or:

location.href = 'http://www.google.com';

Or:

location.href = '//www.google.com';

The last one will go to http or https, depending the current scheme. Thanks @Derek

Bifurcate answered 18/5, 2012 at 3:31 Comment(0)

2018

multibrowser: safari, chrome, firefox:

just this work:

window.location.replace(url)

another options that tries assign url to window.location or window.location fails

Pantie answered 6/7, 2018 at 8:35 Comment(0)

When you run this:

window.location ="www.google.com";

You're running this relative to the current requestURI. Thus, if you are on the http://example.com page, then you're attempting to redirect to:

http://example.com/www.google.com

Instead, just remember to include the protocol:

window.location ="http://www.google.com";

Remember, window.location is not your address bar, designed to deal with nontechnical people entering a web address in an address bar. With window.location, you must explicitly include http://.

Ardelia answered 18/5, 2012 at 3:33 Comment(0)

Your url used in window.location is local; you need to add in the http:// part of the url.

Soilasoilage answered 18/5, 2012 at 3:31 Comment(0)

You forgot to assign myQuiz variable

var myQuiz = document.getElementById( "myQuiz" );

also you need to add http:// in the beginning of your url. Because, otherwise it is meant as relative url.

Riebling answered 18/5, 2012 at 3:34 Comment(0)

-1

    <script type="text/javascript">
        function checkAnswers(){   

            var myQuiz = document.getElementById( "myQuiz" );
            if (myQuiz.elements[1].checked){ alert("123");
                window.location = "www.google.com";
            }else{
                alert("Failed");
            }
        };
    </script>
  </head>
<body>
    <img src="Castle.JPG" />
    <form id="myQuiz" onsubmit="return checkAnswers()" action="">
        <p>Name the country this castle is located in?
            <br/>
            <input type="radio" name="radiobutton" value="A"/>
            <label>England</label>
            <input type="radio" name="radiobutton" value="B"/>
            <label>Ireland</label>
            <input type="radio" name="radiobutton" value="C"/>
            <label>Spain</label>
            <input type="radio" name="radiobutton" value="D"/>
            <label>France</label>
            <input type="submit" name="submit" value="Submit"/>
            <input type="reset" name="reset" value="Reset"/>
        </p>
    </form>
</body>

Synonymy answered 16/10, 2014 at 2:2 Comment(0)

-1

the problem should be with calling a method without the respective object.. change the javascript to be as shown below... getElementById("myQuiz") is a method of the HTML document object.so when in javascript, to use this method you have to attach it to object with which its to act on. Remember getElementById() is not a javascript method. so when you do document.getElementById("myQuiz") you are tellin the javascript to go the document object(i.e HTML) run the method getElementById("myQuiz"). This method returns to JS an element. From DOM, all HTML elements are Objects.. So, we have an Obj_Form which is the element Object from HTML..

function checkAnswers(){    
     var Obj_Form=document.getElementById("myQuiz");
      if(Obj_Form.elements[1].checked){
          window.location = "http://www.google.com";
          }
      else{ alert("Failed");
        }
     }

Upspring answered 9/6, 2016 at 12:5 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags