CODEWITHSUNDEEP
javascripthtmlhyperlink
Igal
Igal

Reputation: 6103

Detecting what link was clicked

I have 2 links, both of them leading to contact page, however different fields will be displayed in the contact form, according to the clicked link. Is there a possibility to detect what link was clicked with the URL looking like that: mysite.com/contact.html instead of mysite.com/contact.html?link=1? Perhaps somehow with JavaScript?

Upvotes: 1

Views: 100

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075755

Basically you have three options (or two, depending on how you want to count):

  1. The best thing, which is what you said you didn't want to do: Make the URLs slightly different (perhaps with a query string) and then look at location / location.search in the contact page to see what they clicked.

    It doesn't have to be as obvious as a bit query string parameter; it could be more subtle, like example.com/contact.html vs. example.com/contactb.html. If you want the same actual page served for both of those URLs, you can configure your server to make one an alias of the other.

    Note that this is better not just pragmatically (it works reliably), but because then the URLs of the two pages are different. Since the pages are different, having their unique identifier (their URL) be different makes sense.

  2. This is a variant on #1: Instead of a query string or different page name, use a hash fragment, e.g. example.com/contact.html#A and example.com/contact.html#B. The contacts page can check for that via location.hash. (Make sure you don't have any elements with theid"A"or"B"`, so the page won't scroll down to them.)

  3. Alternately, set information when the link is clicked that the contact page can look for. That could be a cookie with a short expiration, or session storage.

    Here's how the session storage would look. On the first page, setting the session variable:

    // (The value must be a string.)
sessionStorage.contactType = "some value to tell you what contact type";

    On the contact page, retrieving the session variable:

    var contacttype = sessionStorage.contactType;

    Note that this is entirely client-side. See the link above for details.

Upvotes: 2

brandonscript
brandonscript

Reputation: 73044

I realize you're looking at doing this with javascript, but a server-side alternative (that will allow you more flexibility in the future):

Build a single php script that handles the contact form, which shows different form fields depending on the specific url. Let's assume it resides at example.com/contact/index.php.

Create a .htaccess file within the /contact folder with something like this:

RewriteEngine On
RewriteBase /contact/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI}  /([^/]+)/?$  [NC]
RewriteRule .*  /contact/index.php?form=%1  [L]

What this does, is captures a virtual folder after /contact/ and rewrites it as a url parameter to index.php (e.g. index.php?form=sales)

You can now visibly use links like these in your html:

And in your contact form index.php, you can handle different $_GET parameters:

if (isset($_GET['sales']))
{
    //do this
}
else if (isset($_GET['support']))
{
    //do that
}

Some immediate benefits:

  • You only need to manage one file, and it doesn't depend on a bunch of nested includes.
  • The solution scales; it only requires a few if statements to handle another contact form variable.
  • It's protected from client-side manipulation.

Upvotes: 0

Patartics Milán
Patartics Milán

Reputation: 4948

Add a class to your links like class="detector" and ids like id="A" and id="B" than use a jquery event to pass the info.

$('.detector').click(function(){
    e.preventDefault(); // prevent default anchor behavior
    location.href=$(this).attr('href') + '?link=' + $(this).attr('id');
});

This will work with as many links as you wish.

Upvotes: 1

Related Questions