I want to insert input values to link

Question

I have to link three input values to the link. How I can do in easy way and I click the link I want open the URL.

<html> <script type="text/javascript"> function changeText2(){ var userInput0 = document.getElementById('userInput').value; var userInput11 = document.getElementById('userInput').value; var userInput21 = document.getElementById('userInput2').value; document.write("userinput"); } </script> Here is a link : <a href="/00ON0000000FOHS?pc0=userInput0&pn0=userInput11&pv0=userInput21" >nothing here yet</a> <br/> <input type='text' id='userInput' value='Enter Search String Here' /> <input type='text' id='userInput1' value='Enter Text Here' /> <input type='text' id='userInput2' value='Enter Text Here' /> <input type='button' onclick='changeText2()' value='Change Link'/> </html>

Do you want to make new link? or just need to create parameters for query string from the inputs? It seems that you want to add parameters ! — Dhaval Marthak
– Dhaval Marthak, Commented Dec 16, 2013 at 10:36
Use form tag and set this href value to action. and method as Get, and in the hyper link set href as # and on click of hyperlink call form. submit() — Priyank
– Priyank, Commented Dec 16, 2013 at 10:37
i am getting three inputs from the user and that three data to be inserted in the url ""/00ON0000000FOHS?pc0=**userInput0&pn0=**userInput11**&pv0=**userInput21"" and clicking the button .the url has to opened. — tejdeep
– tejdeep, Commented Dec 16, 2013 at 10:39

user3106875 · Accepted Answer · 2013-12-16 10:41:35Z

If Your link is static than you can create your href link in script it self like :

var link = document.getElementById("test"); link.href = "/00ON0000000FOHS?pc0="+userInput0+"pn0="+userInput11+"pv0="+userInput21;

Here test is id of your <a> element.
You can crate href link by appending parameter value.

I mean your url part /00ON0000000FOHS is static or not ? i am not asking about your data part enter by user.

Andy · Accepted Answer · 2013-12-16 10:49:21Z

I wrote a jsFiddle with a working solution:

http://jsfiddle.net/t8kAS/

Note that I removed the Button and put the event on the onchange event.

$(".jsCustomField").on("change", function() { var customLink = linkTemplate.replace("{0}", $input1.val()) .replace("{1}", $input2.val()) .replace("{2}", $input3.val()); $dynLink.attr("href", customLink); });

Hope this helps!

DetourToNirvana · Accepted Answer · 2013-12-16 10:56:22Z

The most standard-based way is using form with GET method

<form method='GET' action='/00ON0000000FOHS?'> <input type='text' id='userInput' name='pc0' value='Enter Search String Here' /> <input type='text' id='userInput1' name=pn0' value='Enter Text Here' /> <input type='text' id='userInput2' name='pv0' value='Enter Text Here' /> <input type='submit' value='Change Link'/> </form>

The name part of the input tag will be used as the argument key, and the value entered into the input field is the value in the get request.

i need the three input data in url and click on submit button to open that url

DetourToNirvana · Accepted Answer · 2013-12-16 11:01:45Z

Change your function to:

function changeText2(){ var userInput0 = document.getElementById('userInput').value; var userInput11 = document.getElementById('userInput1').value; var userInput21 = document.getElementById('userInput2').value; //document.write("userinput"); window.open("/00ON0000000FOHS?pc0="+userInput0+"&pn0="+userInput11+"&pv0="+userInput21, "_self"); }

If you want it to open in a new window, use "_blank" in the 2nd argument of window.open.

After reading STO's answer (it's inaccurate) I realize, you actually don't need to use js for this. The standard html form was built for exactly this. Use just this, no js required:

<form method='GET' action='/00ON0000000FOHS'> <input type='text' id='userInput' name='pc0' value='Enter Search String Here' /> <input type='text' id='userInput1' name='pn0' value='Enter Text Here' /> <input type='text' id='userInput2' name='pv0' value='Enter Text Here' /> <input type='submit' value='Change Link'/> </form>

The name part of the input tag will be used as the argument key, and the value entered into the input field is the value in the get request.

Thankyou for your valuable answer .it would be better how i can keep this in url
Both the solutions I mentioned above do put it into the URL. When user clicks the button, he's redirected to the generated URL. Can you be more specific about what you mean by "keep this in url"?

Collectives™ on Stack Overflow

I want to insert input values to link

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Related