CODEWITHSUNDEEP
javascriptjqueryhtml
Rohinder
Rohinder

Reputation: 153

Dynamically setting href tag

On my page there're 2 href links like this:

<a href="#">Name</a>
<a href="#">Phone</a>

The URL that the user is on is based on this format:

http://localhost/site/name/ASDF

I want it so that the website automatically fill out the href boxes like this

<a href="/site/name/ASDF">Name</a>
<a href="/site/phone/ASDF">Phone</a>

I know I can just assign an id to each of the a tag, and have javascript set the href, but I was wondering if there's a way to do it without having to have a function that sets it once the page is loaded.

Is there a way to do it like I want to? The main problem is the ASDF which is a unique string that the user can specify, so on the page with URL:

http://localhost/site/name/John

the 2 href will be:

<a href="/site/name/John">Name</a>
<a href="/site/phone/John">Phone</a>

Upvotes: 1

Views: 97

Answers (3)

Tom
Tom

Reputation: 83

you can try this..
use query string like localhost/site?name=Max

then do this

$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].DIRECTORY_SEPARATOR.$_GET['name']

Upvotes: 0

Paco Rodr&#237;guez
Paco Rodr&#237;guez

Reputation: 1

If your server-side is generating the 's dynamically, you can make it without problem.

If your links are static you need javascript because parts of your href is based on their own properties.

If you use jquery, you dont need to add ids in links in order to fill hrefs, but, If your document is big, the script should be very inefficient.

If you give me more info about your use case, i can help you better.

Upvotes: 0

Pedram
Pedram

Reputation: 16575

You should get current url then split it and get dynamic name then insert it to href tags. see this exaple:

var fakeUrl = $('#fakeURL').text();
var split = fakeUrl.split('/');
var user = split.pop();

$('#name').attr('href','/site/name/'+user);
$('#phone').attr('href','/site/phone/'+user);
#fakeURL {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="name" href="#">Name</a>
<a id="phone" href="#">Phone</a>

<span id="fakeURL">http://localhost/site/name/ASDF</span>

or another user:

var fakeUrl = $('#fakeURL').text();
var split = fakeUrl.split('/');
var user = split.pop();

$('#name').attr('href','/site/name/'+user);
$('#phone').attr('href','/site/phone/'+user);
#fakeURL {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="name" href="#">Name</a>
<a id="phone" href="#">Phone</a>

<span id="fakeURL">http://localhost/site/name/Jiff</span>

it's an example and will read from fake url you should use this code in your server to get real url:

var url = window.location.href;
var split = url.split('/');
var user = split.pop();

$('#name').attr('href','/site/name/'+user);
$('#phone').attr('href','/site/phone/'+user);

jsFiddle

Upvotes: 1

Related Questions