Redirect URL based on a value does not always work

Question

I'm pretty new on JavaScript, I wrote a code to redirect user into another page based on what they typed in a search bar.

The weird thing is, it sometimes works sometimes don't (half half), someone might know what could cause this?

my HTML

<form class="form-inline my-2 my-lg-0">
    <input id="inputName" class="form-control mr-sm-2" type="search"
           placeholder="Search">
    <button id="searchBtn" class="btn btn-outline-success my-2 my-sm-0" onclick="searchUser()" type="button">
        Search
    </button>
</form>

my javascript

function searchUser() {
    window.open("/user/" + String(document.getElementById('inputName').value));
}

Update: Thank you for point out dual id, I have deleted extra id but the issue remains.

It could happen to all string, eg., "hsy", it sometimes work, sometimes don't.

When searching from URL http://127.0.0.1:8000/user/hsy, if it doesn't work, the URL just display as http://127.0.0.1:8000/user/hsy? with an extra question mark at the end of the URL.

Can you provide an example input for which it doesn't works? — Yousaf, Jul 12 '20 at 09:10
`HTMLInputElement#value` is already a string. No need to convert it to a `String` object only to concatenate it to a raw string. You're just doing extra work for nothing XD — Niet the Dark Absol, Jul 12 '20 at 09:11
Oh yeah.. you have nothing stopping the form from doing its `default` behaviour of submitting the form. With no `action` attribute, it submits to the current URL, and with no `method` attribute, it defaults to `GET`. And since you have no `name` attributes on your form elements, the entire query is just... `?`. ` — Niet the Dark Absol, Jul 12 '20 at 09:25
@topsoftwarepro Hi, sorry your answer is not correct, the true reason is I mixed form with js. window.location.replace() seems not the reason :( — Yang, Jul 16 '20 at 06:48

topsoftwarepro · Answer 1 · 2020-07-16T06:47:12.260

0

it doesn't work with window.open() because, if you read the console, it says: "there is a blocked opening 'stacksnippets.net/user/vfd' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. window.open() works fine if it isn't in a Stack Snippet.". Because you were using StackSnippets or a similar frame to redirect. If you want to use it...

Use...

window.location.replace()

Instead of...

window.open()

function searchUser() {
    window.location.replace("/user/" + document.getElementById('inputName').value);
}

<form class="form-inline my-2 my-lg-0">
    <input id="inputName" class="form-control mr-sm-2" id="base_layout_user_search" type="search"
           placeholder="Search">
    <button id="searchBtn" class="btn btn-outline-success my-2 my-sm-0" onclick="searchUser()" type="button">
        Search
    </button>
</form>

edited Jul 16 '20 at 06:47

answered Jul 12 '20 at 09:16

topsoftwarepro

773
5
19

Thank you, mind explain why? they seem does not have much difference regarding the issue :( https://stackoverflow.com/questions/1865837/whats-the-difference-between-window-location-and-window-location-replace/1865840 – Yang Jul 12 '20 at 09:22
It doesn't work here because there is a blocked opening 'stacksnippets.net/user/vfd' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. window.open() works fine if it isn't in a Stack Snippet. – topsoftwarepro Jul 12 '20 at 10:12

score 0 · Answer 2 · answered Jul 12 '20 at 09:58

0

Thanks to @Niet the Dark Absol, his idea is the truth.

I should not mix form with input. By delete form attribute it works as normal.

great thanks, fellows.

answered Jul 12 '20 at 09:58

Yang

152
1
9

Redirect URL based on a value does not always work

2 Answers2