CODEWITHSUNDEEP
javascripthtmlurl
tejdeep
tejdeep

Reputation: 115

I want to insert input values to link

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>

Upvotes: 2

Views: 6895

Answers (4)

DetourToNirvana
DetourToNirvana

Reputation: 83

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.

Upvotes: 1

STO
STO

Reputation: 10658

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.

Upvotes: 1

Andy
Andy

Reputation: 141

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!

Upvotes: 2

user3106875
user3106875

Reputation:

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.

Upvotes: 3

Related Questions