CODEWITHSUNDEEP
javascripthtml
chrae
chrae

Reputation: 131

Using form input in button link

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>

Upvotes: 0

Views: 75

Answers (1)

Matt D. Webb
Matt D. Webb

Reputation: 3314

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>

Upvotes: 1

Related Questions