html bouton rediriger vers la page spécifiée dans <input>

Question

Je dois rediriger l'utilisateur vers une page spécifique dans une balise d'entrée.

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

Alors, où il est dit « VALUE » à l'intérieur de la balise bouton, il serait rediriger vers mysite.com/rooms/VALUE

l'entrée « VALUE » serait entré par l'utilisateur dans la balise d'entrée .

Une manière simple que je peux faire ceci?

Answer 1

Si vous utilisez jQuery alors;

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

et avec le javascript

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

Answer 2

Vous pouvez obtenir la valeur de l'entrée à l'aide

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 3

Voici une version avec script séparé du HTML de ce que vous voulez.

<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

Vous pouvez utiliser document.getElementById() dans la balise de bouton.

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

Answer 5

Il est bon d'avoir une fonction javascript séparée pour effectuer une tâche de redirection. Dans votre événement HTML add onclick pour le bouton et dans la fonction javascript écrire du code pour valider et rediriger.

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>