Use the input as a link

Question

I want to use a text input as a link when user hits enter.

for instance user types "stacks" to the input area and when user hits enter, it directs user to "lookup/stacks". How can I do this? Thanks. I have this code but it does not work.

<form class="ui icon input" role="form" action="/lookup/">
            <input type="text" placeholder="Ara...">
            <i class="search link icon"></i>
</form>

is the enter key a button????then its simple.Instead of placing a button have a link and then style it to lokk like a button.. — Lal, Aug 17 '14 at 17:58
well, just listen to the input change event, and then use the input field value as a parameter when you change the `window.location`, or listen to keyup event "which" is `13` (Enter key) and then use the value from the input as I mentioned before. — vsync, Aug 17 '14 at 18:02
What is `window.location` ? I am very new at these stuff. Can you be more explanatory? — malisit, Aug 17 '14 at 18:06
Sadly it seems [URI templates](http://stackoverflow.com/q/15352739/471559) was a non-starter or it would be perfect here. — clockworkgeek, Aug 17 '14 at 18:32

score 0 · Answer 1 · answered Aug 17 '14 at 17:59

0

You can do it with jQuery .submit().

Here's the example given on jQuery's page:

<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>
<div id="other">
  Trigger the handler
</div>

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

answered Aug 17 '14 at 17:59

Alex

4,674
5
38
59

Target site could be handling GET elements in a different way rather than just `?name=value` – zurfyx Aug 17 '14 at 18:02

score 0 · Answer 2 · answered Aug 17 '14 at 18:08

0

You could use PHP to do this..

Here is a basic example, you could expand on this later if needed.

1st page..

HTML:

<form action="url.php" method="post">

<input name="url" id="url" type="text">
<input type="submit" name = "submit" value="submit">

</form>

2nd page - url.php (must be called depending on form action url)

<?php

$url = $_POST['url'];

header('Location: ' . $url);

?>

answered Aug 17 '14 at 18:08

Alex

1,208
16
26

Well, I use Python/Django. Is there any chance that you know how to do this in Django as well? – malisit Aug 17 '14 at 18:10
You didn't really state in your question what language you wanted it to be achieved by, this works anyway as I have tested it, I've never used python or django so I wouldn't know, sorry. – Alex Aug 17 '14 at 18:13

score 0 · Accepted Answer · answered Aug 17 '14 at 18:22

Here's a quick idea to update the form's URL whenever the input changes, although I haven't tested it. The hidden submit button means the enter key works as you intend. I think you should also follow Alex's idea for a server-side backup just in case a visitor has javascript disabled.

<form class="ui icon input" role="form" action="/lookup/">
  <input type="text" placeholder="Ara..." id="input_lookup">
  <i class="search link icon"></i>
  <input type="submit" style="position: absolute; left: -9999px"/>
</form>
<script type="text/javascript">
  // if "change" doesn't work then maybe "keyup"?
  document.getElementById("input_lookup").addEventListener("change", function(){
    this.form.setAttribute("action", "/lookup/" + this.value);
  });
</script>

Use the input as a link

3 Answers3