Redirect to local html file doesn't open in same window

Question

I know that similar questions have been asked but after various tests, no one seem to work. I think it has to do something with the fact I try to redirect from a local html file to another local html file using js.

Button in my creationPage.html:

      <form>
          <button id="createChar">Create character</button> 
      </form>

Code in my js file for redirect:

var Create = document.getElementById('createChar');

  Create.addEventListener("click", function() {

    //window.open(url); //opens in a new tab, WHICH IS NOT DESIRED !!!
    //window.location.replace(url); //doesnt work either.

  var url = "http://localhost/myprojects/L2/selectYourCharacter/test.html";
    window.location.href = url;
    return false;
});

I want to stick with addListenerEvent as it's best practice. If I run window.open(url, "_blank"), it doesnt work.

Summary: I want to redirect via my Button located in http://localhost/myprojects/L2/charCreation/creationPage.html to http://localhost/myprojects/L2/selectYourCharacter/selectYourCharacter.html staying in the same window.

Thanks a lot for your help as I have been stuck with this for hours...

Note: The window.open("www.youraddress.com","_self") doesn't work and I think it's because my files are running on localhost.

Possible duplicate of [Open URL in same window and in same tab](http://stackoverflow.com/questions/8454510/open-url-in-same-window-and-in-same-tab) — kiner_shah, Dec 17 '16 at 13:58
As I updated the question, the solution of this thread didn't work and it's maybe because I am trying to redirect from local html file to local html file (localhost). — Genia, Dec 17 '16 at 14:45

score 0 · Answer 1 · answered Dec 17 '16 at 14:06

0

Try to use with a tag like this:

<a href="/myprojects/L2/selectYourCharacter/selectYourCharacter.html" style="text-direction:none">
     <button>Your Button Text</button>
</a>

answered Dec 17 '16 at 14:06

Mr Lord

150
1
4
18

I want to avoid setting the url inside html as I want to add rules around the redirect. – Genia Dec 17 '16 at 14:50

score 0 · Accepted Answer · answered Dec 17 '16 at 14:14

The complete answer to why your code is not working is because the button you have is submitting the form. Return false from the click listener just tells the browser you did not handle the click.

This code;

var Form = document.getElementById('form');

Form.addEventListener("submit", function(e) {

    //window.open(url); //opens in a new tab, WHICH IS NOT DESIRED !!!
    //window.location.replace(url); //doesnt work either.

    var url = "http://localhost/myprojects/L2/selectYourCharacter/test.html";
    window.location = url;
    e.preventDefault();
});

will work because it will stop the default submit behavior of the form. The button submits the form and you handle the submit event to do what you want it to do.

Also:

var Create = document.getElementById('createChar');

Create.addEventListener("click", function(e) {

    //window.open(url); //opens in a new tab, WHICH IS NOT DESIRED !!!
    //window.location.replace(url); //doesnt work either.

    var url = "http://localhost/myprojects/L2/selectYourCharacter/test.html";
    window.location = url;
    e.preventDefault();
});

this works on the same idea, but instead stops the default behavior of the button, which is submitting the form.

I have no clue why, but the form id trick worked but not the second solution for me. So it could be nice from you to leave just the 1st solution for this exact question maybe. Anyway, thanks a lot ! — Genia, Dec 17 '16 at 15:11
You were right. It works perfect in both cases, who knows what I did... thx — Genia, Dec 18 '16 at 19:05

Redirect to local html file doesn't open in same window

2 Answers2