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): [http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit][1] [1]: http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit — user3220812, Nov 28 '14 at 21:07

score 1 · Accepted Answer · edited May 23 '17 at 10:26

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>

Using form input in button link

1 Answers1

Linked