How to pass javascript variables as parameters with a href link?

Question

I have a JavaScript variable which I wan to pass along with an HTML link.

<script>
var demo=10;
</script>

I get the value of demo on executing one javascript function & few if-else & for loops. Since that code doesn't make any sense to this question, I haven't included that. Assume after all those operations, the final result that I get is stored in the demo variable. Now I wanna pass this demo variable along with an link.

<a href="to_fake_page.php">On click pass demo</a>

I am trying to pass the demo variable as a parameter to the href link. Is this ever possible???

I know

window.location.href = "to_fake_page.php?demostore=demo";

would do the same.

UPDATE

This is my Javascript function

This function has one parameter & it is passed onto a_php_page.php where some database operations & condition checks are performed & the corresponding result is passed back from the PHP page to the AJAX function as JSON. I parse the JSON & obtain demo variable. And a HTML modal is included if I get response from the PHP page. Inside the HTML modal, I have a link pointing to_fake_page.php to where I have to pass the demo variable on clicking a link On click pass demo.

 function onefunction(parameter)
   {
       if(window.XMLHttpRequest)
       {
           xmlhttp=new XMLHttpRequest();
       }
       else
       {
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.onreadystatechange=function() //callback fn
       {
           if(xmlhttp.readyState==4 && xmlhttp.status==200)
           {
               // these values are obtained from a php page using AJAX.
               // An array has been passed from the php page after json encoding it.

               var jsonStr = JSON.parse(xmlhttp.responseText);
               var demo=jsonStr.value1;
               document.getElementById('myLink').href += '?demo=' + encodeURIComponent(demo);

               $('<div class="modal fade">' +
                   '<div class="modal-dialog">' +
                   '<div class="modal-content">' +
                   demo+
                   '</div>' +
                   '<div class="modal-footer">' +
                   '<a href="to_fake_page.php" id="myLink">On click pass demo</a>' +
                   '</div>' +
                   '</div>' +
                   '</div>' +
                   '</div>').modal();

           }
       }
       xmlhttp.open("GET","a_php_page.php?from="+parameter,true);
       xmlhttp.send();
   }

read [this](http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter) — Himal, Sep 16 '14 at 05:11

score 5 · Answer 1 · answered Sep 16 '14 at 05:12

5

what you would have to do (after all your logic is done, and you have the value you want inside the variable) is to change the href of the link.

something like this:

var demo = 123;
document.getElementById('myLink').setAttribute('href', 'somelink.php?demo=' + demo);

also put example code here for you:

http://jsfiddle.net/x8tgktv6/

answered Sep 16 '14 at 05:12

developer82

13,237
21
88
153

4

Easier to use the property: `document.getElementById('myLink').href += '?demo=' + demo;`. ;-) Oh, the value of *demo* should be [*URI encoded*](http://ecma-international.org/ecma-262/5.1/#sec-15.1.3.4) too, so `... += '?demo=' + encodeURIComponent(demo);`. – RobG Sep 16 '14 at 05:14
Uncaught TypeError: Cannot read property 'setAttribute' of null @developer82 – Sep 16 '14 at 05:22
1

@BeingJudas probably not finding your link in the page. can you edit your post with code so we could have a look? – developer82 Sep 16 '14 at 05:23
1

@BeingJudas in the HTML code, did you add the id property with value 'myLink' to the a tag? – developer82 Sep 16 '14 at 05:40
1

@BeingJudas can you paste the html ? – developer82 Sep 16 '14 at 05:53
The HTML code is inside the AJAX function. I have dynamically created a modal,inside of that a HTML link is dynamically created. Have a look at the onreadystatechange property of the function. You will find HTMLcode. @developer82 – Sep 16 '14 at 06:01
@BeingJudas so that's the problem. You are trying to find the object before adding it to the DOM. Either add the HTML to the DOM and then run this line, or manipulate the string with replace. – developer82 Sep 16 '14 at 07:17

score 3 · Accepted Answer · edited Jan 26 '20 at 00:10

To get the result I modified my JavaScript code like this:

<script>
var demo=10;
var urll='to_fake_page.php?demostore='+demo;
</script>

and changed the line

'<a href="to_fake_page.php" id="myLink">On click pass demo</a>' +

in AJAX function to

'<a href="'+url+'"' +
'id="myLink">On click pass demo</a>' +

It was simple as that. Added the variable urll to the DOM.

Manish Sharma · Answer 3 · 2014-09-16T05:19:37.350

0

try this,

<script>
     var demo = 10;
     window.location.href = "to_fake_page.php?demostore=" + demo;
</script>

you want to set a tag href using this function.

<script>    
   var link = document.getElementById('aTagId');
   link.setAttribute('href', 'to_fake_page.php?demostore=demo' + demo);
</script>

edited Sep 16 '14 at 05:19

answered Sep 16 '14 at 05:12

Manish Sharma

2,406
2
16
31

this code would automatically change the page in the browser and not change the link inside the a tag href attribute as he wanted. – developer82 Sep 16 '14 at 05:14

How to pass javascript variables as parameters with a href link?

3 Answers3