/    Sign up×
Community /Pin to ProfileBookmark

Populate link with text box value and execute

Copy linkTweet thisAlerts:
Jan 21.2013

Hi Guys,

I’m trying to build a very simple script that takes the value from a text box and places it within a link (as a parameter) then execute the link afterwards.

So the link would basically look like this

[CODE]http://request.com/action.jsp?parameter={{insert}}[/CODE]

And the value from the text will be placed where {{insert}} is.

And a value from a text box :

[CODE]<input type=”text” name=”tube” id=”linkText”>[/CODE]

So far I have got this:

[CODE]<html>

<head>

<script>

var link = document.getElementById(‘linkid’),
textBox = document.getElementById(‘textInputId’);
function setLinkParam() {
link.href = ‘http://request.com/action.jsp?parameter=’ + textBox.value;
}
textBox.addEventListener(‘change’, setLinkParam);

</script>

</head>

<body>

<input type=”text” id=”textInputId”></input>
<a href=”http://event.com/action.jsp?param=” id=””linkid”>Link</a>
<input type=”submit” value=”Submit” action”setLinkParam()”>

</body>

</html>[/CODE]

But I’m not sure what bit I have wrong, can someone point me in the right direction and tell me why it doesn’t (this is a learning exercise).

Cheers!

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@ReFreezedJan 21.2013 — I see are several problems with the code:

[B]·[/B] The [I]linkid[/I] and [I]textInputId[/I] elements does not exist by the time you're calling [FONT=courier new]getElementById[/FONT]. Moving those calls inside the [FONT=courier new]setLinkParam[/FONT] function would solve that problem. The [FONT=courier new]addEventListener[/FONT] call won't work either for the same reason.

[B]·[/B] Input tags are self-closing, so [FONT=courier new]<input></input>[/FONT] should be [FONT=courier new]<input />[/FONT].

[B]·[/B] There is an extra quotation mark where you specify the ID for the [FONT=courier new]<a>[/FONT] tag.

[B]·[/B] The equal sign after the input's [FONT=courier new]action[/FONT] attribute is missing.

[B]·[/B] Input elements does not have an action attribute - only form elements do!

Now, to clarify, do you want to actually follow the link or do you want to submit a form? Here's an example how you can go to a new page without using a link:

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;

<i> </i>function goToUrl() {
<i> </i> var textBox = document.getElementById('paramInput');
<i> </i> var value = encodeURIComponent(textBox.value); //encode special characters
<i> </i> location.href = 'http://request.com/action.jsp?parameter='+value; //goto URL
<i> </i>}

<i> </i>&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;input type="text" id="paramInput" /&gt;
&lt;input type="button" value="Go to page" onclick="goToUrl();" /&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @dntel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...