CODEWITHSUNDEEP
javascriptphphtmlhttp-redirectinput
user6095769
user6095769

Reputation:

html button redirect to page specified in <input>

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?

Upvotes: 1

Views: 3871

Answers (5)

Ravinder Reddy
Ravinder Reddy

Reputation: 3879

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>

Upvotes: 0

Cool Developer
Cool Developer

Reputation: 1

You can use document.getElementById() in button tag.

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

Upvotes: 0

Erazihel
Erazihel

Reputation: 7605

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>

Upvotes: 2

Nolyurn
Nolyurn

Reputation: 608

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>

Upvotes: 0

Zaigham Sarfaraz
Zaigham Sarfaraz

Reputation: 111

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>

Upvotes: 0

Related Questions