How to pass variable in href in html

I am trying to give another variable when href=""

Hello

Above is my code.

I want to pass value apple named fruit variable when going to a.html. How can I do this in JavaScript or jQuery?

asked Dec 13, 2018 at 8:03

임지웅임지웅

1211 gold badge1 silver badge8 bronze badges

3

The only way that JS can communicate (easily) between URLs is by creating a parameter on your link. For example:

Hello

On the receiving page, fetch that parameter data. If you are wanting the data embedded into the link purely via JS, you can append to the HREF using something similar to this by using the jQuery library:

$("a").attr("href", '?fruit=' + 'apple');

answered Dec 13, 2018 at 8:09

Just do this on your main page:

Hello

And on a.html, add this code:

function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    var fruit = getParameterByName('fruit');

Hello

answered Dec 13, 2018 at 8:08

Jack BashfordJack Bashford

41.9k11 gold badges46 silver badges76 bronze badges

4

You can reset the href value by concatenating the existing value with the new value:

var el = document.getElementById('a');
el.href += '?fruit=apple';
console.log(el.href);

Hello

answered Dec 13, 2018 at 8:07

Giulio BambiniGiulio Bambini

4,5554 gold badges19 silver badges34 bronze badges

2

As i understand you want to add query parameter fruit=apple to anchor tag url when new page opened. So you need to use window.open() to open new page

document.getElementById("a").onclick = function(e){
  e.preventDefault();
  window.open(this.href+"?fruit=apple", '_blank');
}

Hello

Because new tab doesn't work in snippet, check it in jsfiddle.

answered Dec 13, 2018 at 8:12

MohammadMohammad

20.5k15 gold badges53 silver badges80 bronze badges

1

Would would need a way to acceess Html parameters. I dont believe its possible in html. There is a good load of Javascript Methods however.

For example:

function getUrlVars() { 
var vars = {}; 
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
   vars[key] = value; 
});
return vars; 

}

You would call this function like so

var fruit = getUrlVars()["fruit"];
console.log(fruit);
//Apple

Your URL in href would look like:

a.html?fruit=Apple

However this is hardcoded, if you wanted some nice dynamics with this prehpas use angularJS to create this with.

Source

answered Dec 13, 2018 at 8:16

1

How do I add a variable to a link in href?

Can we pass value in href?

How do I pass a parameter to a link in HTML?

How do you pass a variable to a tag in HTML?