Using form input in button link

Question

I'm trying to basically grab whatever the user inputs in the username form and then use it in URL; if the input is "hello," the URL would end with /hello. Would I have to use js to get it done?

<form class="form-horizontal" role="form">
  <div class="form-group">
  <label for="inputUsername" class="col-sm-2 control-label">Username</label>
  <div class="col-sm-5">
      <input type="text" class="form-control" id="inputUsername" placeholder="Username">
  </div>
  </div>

  <div class="o ">
  <div class="col-sm-offset-2 col-sm-10">
      <a class = "btn btn-default" href=inputUsername> Sign in / Sign up</a>
  </div>
  </div>
</form>

This answer might help (have a look at the comments): [stackoverflow.com/questions/133925/… [1]: stackoverflow.com/questions/133925/… — user3220812
– user3220812, Commented Nov 28, 2014 at 21:07

Community · Accepted Answer · 2017-05-23 10:26:28Z

Yes, you can use JavaScript to grab the username. As mentioned in your question comments you can update your form to include an onsubmit attribute where you can instantiate a function to grab the name.

If you wish to use the inputUsername to define a redirect location onsubmit, you may need to use jQuery for the `preventDefault()' method (discussed here) to interpose on the standard action form submission.

<form class="form-horizontal" role="form" onsubmit="onFormSubmit()">
  <div class="form-group">
  <label for="inputUsername" class="col-sm-2 control-label">Username</label>
  <div class="col-sm-5">
  <input type="text" class="form-control" id="inputUsername" placeholder="Username">
  </div>
 </div>

  <div class="o ">
  <div class="col-sm-offset-2 col-sm-10">
      <a class = "btn btn-default" href=inputUsername> Sign in / Sign up</a>
  </div>
  </div>
</form>

Then do something like this:

<script>
function onFormSubmit() {
    var inputUsername = document.getElementById("inputUsername").value;
    window.location = "/" + inputUsername;
}
</script>

Collectives™ on Stack Overflow

Using form input in button link

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related