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

Question

我需要将用户重定向到输入标签中特定的页面。

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

因此，在按钮标记内显示“ VALUE”的位置，它将重定向到mysite.com/rooms/VALUE

用户将在输入标签内输入“ VALUE”输入。

有什么简单的方法可以做到吗？

Answer 1

您可以使用获得输入的值

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

如果您使用的是jQuery，那么；

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

并使用javascript

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

Answer 3

这是脚本与所需HTML分开的版本。

<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

拥有一个单独的javascript函数来执行重定向任务是一件好事。 在HTML中为按钮添加onclick事件，并在javascript函数中编写代码以进行验证和重定向。

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>