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>