CODEWITHSUNDEEP
javascripthtmlformshyperlinkhref
JVulture
JVulture

Reputation: 11

Anything wrong with the following code? (html/javascript/href)

<html>
<title>My Web Page</title>

<form onsubmit="return redirect()">
<input id="search_form_input" type="text" name="query" />
<input type="submit" value="Search" />
</form>

<script type="text/javascript">
function redirect() {
var link = document.getElementById('link');
link.href += document.getElementById('search_form_input')
return false;
}
</script>

<body>
<p>
<a id="link" href="http://www.cnn.com/">CNN</a>
</p>
</body>
</html>

Basically id like the input from the form to extend itself onto the URL at CNN.com. For example, politics is entered in the form, submitted, and clicking the CNN link would bring one to CNN.com/politics. Am i going about this the right way?

Upvotes: 1

Views: 217

Answers (1)

bitoiu
bitoiu

Reputation: 7484

It's crazy what you are doing, and how you are doing it. Go for other solutions, but your problem is simple. You're attaching the whole element to the href string. So instead of

link.href += document.getElementById('search_form_input')

use

link.href += document.getElementById('search_form_input').value

The full result being:

<html>
<title>My Web Page</title>

<form onsubmit="return redirect()">
<input id="search_form_input" type="text" name="query" />
<input type="submit" value="Search" />
</form>

<script type="text/javascript">
function redirect() {
var link = document.getElementById('link');
link.href += document.getElementById('search_form_input').value
return false;
}
</script>

<body>
<p>
<a id="link" href="http://www.cnn.com/">CNN</a>
</p>
</body>
</html>​

Give a try to jQuery at the very least.

Upvotes: 3

Related Questions