Can't get target="_self" to work

Using JavaScript with Hype
1

I can not figure out the correct syntax for this. We have a series of maps (2020 - 2024). There is a Year selector to switch between them. The links are working as they should but they open in new windows instead of _self.

<form name="jump3">

<select name="menu" id="yearmenu" style="font-size : 16px; color: white; background: #4b6bb3;">

<option value="#">YEAR</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2020/">2020</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2021/">2021</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2022/">2022</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2023/">2023</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2024/">2024</option>

</select>

<input type="button" id="gobutton3" onclick="window.open(document.jump3.menu.options[document.jump3.menu.selectedIndex].value);jump2.reset()" target="_self" value="GO" style="display:none;">

</form>

<script>

document.querySelector("#yearmenu").addEventListener('change', function() {

document.querySelector("#gobutton3").dispatchEvent(new Event("click"));

});

</script>

Thanks

2

Coincidently, I was struggling with this problem earlier today… and I ended up not solving the problem, as I'm not sure if it's technically possible in my scenario.

But you, I think your problem is fixable… maybe. :smile:

So, I might not use window.open …instead I might use window.location.href or window.location.assign() …lots of discussion about which is best. So, sticking with just window.open the problem might be that you skipped the second parameter…

It's window.open(url, target)

You have "target" off to the side, as its own separate attribute for the link, which doesn't seem to be doing anything without a “href” value.

2 Likes
3

As @Photics suggested. window.location.href may work better.

But instead of trying to evaluate js in the onclick which can get confusing. have the onclick call a function , especially as you already have script tags in there, you may as well use them.
This will allow you to use the js syntax better with out worrying about evaluating strings to javascript.

Also , as he pointed out you are missing the second parameter "_self"

<form name="jump3">

<select name="menu" id="yearmenu" style="font-size : 16px; color: white; background: #4b6bb3;">

<option value="#">YEAR</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2020/">2020</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2021/">2021</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2022/">2022</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2023/">2023</option>

<option value="https://firesprinklerassoc.org/fire-sprinkler-saves-interactive-map-2024/">2024</option>

</select>

<input type="button" value="GO" style="display:none" id="gobutton3" onclick="myFunction()">

</form>

<script>
function myFunction(){
window.open(document.jump3.menu.options[document.jump3.menu.selectedIndex].value, '_self');
//jump2.reset();

}
document.querySelector("#yearmenu").addEventListener('change', function() {

document.querySelector("#gobutton3").dispatchEvent(new Event("click"));

});

</script>
2 Likes
4

Thank you! that worked brilliantly.

1 Like
5

Also see :