如何在 javascript 中将文本输入变量添加到 URL

Question

I'm having the weirdest problem right now. I have this JS code:

    function CreateChat() {
    var chatName = document.getElementById("chatName").value;
        window.location.href = "https://localhost:44321/CreateNewChat/CreateChat?ChatName=" + chatName;
}

Thing is, as it is, I can't make it work. It obviously should be calling a controller method, but it just won't work. If I hit that url with the project running and put anything at the end of it, like https://localhost:44321/CreateNewChat/CreateChat?ChatName=TestName , that test name variable will get to the controller without a problem. If I hardcode to the code the "TestName" instead of passing the chatName variable I define earlier, it will get to the controller, no problem. Hell, if I debug the script, the chatName variable gets loaded correctly with my input, and if I console.log the url it will show up correctly (in fact, I can copy/paste that url and it will hit the controller method correctly). But, as the code is presented above, it will never, by any means, hit the controller. It will reach that point, and cut the execution as if there was an error in the JS code. Do you guys have any ideas on this? It's driving me mad, really.

Just in case, this is how I define the text input in the HTML:

<input type="text" required class="form-control" id="chatName" aria-describedby="nameHelp" placeholder="Name your chat!">

Edit: encodeURIComponent on the chatName doesn't work either.

Answer 1

try using window.open with _self instead:

window.open ('https://localhost:44321/yadayada','_self',false);

Answer 2

You have a submit button (and I assume this button is inside a form )... when you click on the submit button the form is submitted to the submit action of the form, this is the default behavior for the submit action.

Now if you don't want your page to be submitted, you can change the button type to button :

<button type="button" onclick="CreateChat()" class="btn btn-primary">Create a New Chat!</button>

Alternatively if you actually need a submit button then you need to prevent the default behavior in order to change window.location :

function CreateChat(event) {
    e.preventDefault(); // <-- don't submit the form
    var chatName = document.getElementById("chatName").value;
        window.location.href = "https://localhost:44321/CreateNewChat/CreateChat?ChatName=" + chatName;
}

You need to pass the event to CreateChat function:

<button type="submit" onclick="CreateChat(event)" class="btn btn-primary">Create a New Chat!</button>