html按钮重定向到中指定的页面<input>

Question

I need to redirect the user to a page specificed in an input tag.

<div id="center">
      <input type="text" id="username" placeholder="Username">
      <button onclick="location.href='rooms/VALUE'" id="connect">EnterRoom</button>
</div>

So where it says "VALUE" inside of the button tag, it would redirect to mysite.com/rooms/VALUE

the "VALUE" input would be inputted by the user inside the input tag.

Any simple way I can do this?

Answer 1

You can get the value of the input using

document.getElementById('username').value

 <div id="center"> <input type="text" id="username" placeholder="Username"> <button onclick="location.href='rooms/' + document.getElementById('username').value" id="connect">EnterRoom</button> </div> 

Answer 2

If you are using jQuery then;

<button onclick="location.href='rooms/' + $('#username').val() " id="connect">EnterRoom</button>

and with the javascript

<button onclick="location.href='rooms/' + document.getElementById('username').value " id="connect">EnterRoom</button>

Answer 3

Here is a version with script separated from HTML of what you want.

<div id="center">
      <input type="text" id="username" placeholder="Username">
      <button id="connect">EnterRoom</button>
</div>

<script type="text/javascript">
  var value = ""

  var username = document.getElementById("username")

  username.addEventListener('change', function (e) {
    value = e.target.value
    console.log(value)
  })

  var connect =  document.getElementById("connect")

  connect.addEventListener('click', function (e) {
    location.href='rooms/'+value
  })

</script>

Answer 4

您可以在按钮标记中使用document.getElementById() 。

onclick="location.href='rooms/' + document.getElementById('username').value"

Answer 5

Its good to have a separate javascript function to do redirect task. In your HTML add onclick event for the button and in javascript function write code to validate and redirect.

HTML

<button onclick="toRedirect()" id="connect">EnterRoom</button>

Javascript

<script type="text/javascript">
function toRedirect(){
    // get the user input
    var user_value = document.getElementById('username').value ;
    // check the validation
    if(user_value!=''){
        // redirect
       location.href='rooms/' + user_value;
    }else{
        // alert error message
        alert("validation error");
    }
}
</script>