Passing Javascript variable to <a href >
JavascriptJavascript Problem Overview
<script language="javascript" type="text/javascript">
var scrt_var = 10;
</script>
HTML Part:
<html>
this is a <a href ="2.html & Key= scrt_var">Link </a>
</html>
I just want to sent the javascript variable to link (url parameter)
No AJAX
Javascript Solutions
Solution 1 - Javascript
If you want it to be dynamic, so that the value of the variable at the time of the click is used, do the following:
<script language="javascript" type="text/javascript">
var scrt_var = 10;
</script>
<a href="2.html" onclick="location.href=this.href+'?key='+scrt_var;return false;">Link</a>
Of course, that's the quick and dirty solution. You should really have a script that after DOM load adds an onclick handler to all relevant <a> elements.
Solution 2 - Javascript
put id attribute on anchor element
<a id="link2">
set href attribute on page load event:
(function() {
var scrt_var = 10;
var strLink = "2.html&Key=" + scrt_var;
document.getElementById("link2").setAttribute("href",strLink);
})();
Solution 3 - Javascript
<script>
var scrt_var = 10;
document.getElementById("link").setAttribute("href",scrt_var);
</script>
<a id="link">this is a link</a>
Solution 4 - Javascript
Alternatively you could just use a document.write:
<script type="text\javascript">
var loc = "http://";
document.write('<a href="' + loc + '">Link text</a>');
</script>
Solution 5 - Javascript
<html>
<script language="javascript" type="text/javascript">
var scrt_var = 10;
openPage = function() {
location.href = "2.html?Key="+scrt_var;
}
</script>
this is a <a href ="javascript:openPage()">Link </a>
</html>
Solution 6 - Javascript
You can also use an express framework
app.get("/:id",function(req,res)
{
var id = req.params.id;
res.render("home.ejs",{identity : id});
});
Express file, which receives a JS variable identity from node.js
<a href = "/any_route/<%=identity%> includes identity JS variable into your href without a trouble enter
Solution 7 - Javascript
If you use internationalization (i18n), and after switch to another language, something like ?locale=fror ?fr might be added at the end of the url. But when you go to another page on click event, translation switch wont be stable.
For this kind of cases a DOM click event handler function must be produced to handle all the a.href attributes by storing the switch state as a variable and add it to all a tags’ tail.
Solution 8 - Javascript
JAVASCRIPT CODE:
<script>
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var user = getUrlVars()["user"];
var pass = getUrlVars()["pass"];
var sub = getUrlVars()["sub"];
</script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('dropdownCtrl', ['$scope','$window','$http', function($scope, $window, $http) {
$http.get('http://dummy.com/app/chapter.php?user='+user+'&pass='+pass)
.then(function (response) {$scope.names = response.data.admin;});
$scope.names = [];
$http.get('http://dummy.com/app/chapter.php?user='+user+'&pass='+pass+'&sub='+sub)
.then(function (response) {$scope.chapter = response.data.chp;});
$scope.chapter = [];
};
}]);
</script>
HTML:
<div ng-controller="dropdownCtrl">
<div ng-repeat="a in chapter">
<a href="topic.html?ch={{a.chapter}}" onClick="location.href=this.href+'&user='+user+'&pass='+pass+'&sub='+sub;return false;">{{a.chapter}}</a>
</div>