How to change the result of a click event based on link clicked

Question

In my code, I created a table from the output of an ldap search with the output (in the form of an array) being in the first column. What I would like to do is depending on the link clicked, have some text appear in the second column. I have figured out how to get "Hello World" to appear but it appears regardless of the link I choose. Is there a way to make the text change based on the link the user clicks? For example if the user clicks link 1 the right column would display "Hello" but if the user selects link 2 the right column displays "Goodbye". The idea I have is

If (link that's clicked text eq $textToMatch) {
    print some text
}

Here is the code I have:

if (($corpId ne "")&&($CorpIdResults eq "")) {
    print "This user does not belong to any groups.";
} elsif ($CorpIdResults ne "") {
    @splitarray = split(' ',$CorpIdResults);
    print "Corp Id: " . $corpId;
    print "<BR>";
    print "<BR>";
    print "This user is a member of the following groups:";
    print "<BR>";
    print "<TABLE border=22>";
    foreach $tmp (@splitarray) {
        print "<TR>";
        $links = "<a href = 'javascript:testFunction()' id='groups' >$tmp \n</a><BR>";
        print "<TD>$links</TD>";
    }
    print "<TD id='demo'></TD>";
    print "</TR>";
    print "</TABLE>";
}

Hopefully I made that clear enough. If not, please let me know.

It may take me a little while, but I will try. I have all this in a cgi script — Brittany, Jun 12 '14 at 03:10
Make sure the script is added **below** the fields it is trying to access. Otherwise you should wait for the dom to finish loading — jasonscript, Jun 12 '14 at 03:51

RobEarl · Accepted Answer · 2014-06-12T20:13:50.277

2

To change the behaviour of the javascript function based on certain actions, you need to pass it a variable. You can either do the leg work in javascript by having the link pass a reference to itself:

<a href='#' onclick='testFunction(this); return false;'>Hello</a>
<a href='#' onclick='testFunction(this); return false;'>Goodbye</a>

You can then use this reference from within the function, e.g:

function testFunction(link) {
    var text;
    if (link.innerHTML == "Hello") {
        text = "Hello";
    } else if (link.innerHTML == "Goodbye") {
        text = "Goodbye";
    }

    document.getElementById('demo').innerHTML = text;
}

or you can do the legwork in Perl and generate links which pass the desired text:

<a href='#' onclick='testFunction("Hello"); return false;'>Hello</a>
<a href='#' onclick='testFunction("Goodbye"); return false;'>Goodbye</a>

Then use the text directly in the javascript:

function testFunction(text) {
    document.getElementById('demo').innerHTML = text;
}

edited Jun 12 '14 at 20:13

answered Jun 12 '14 at 07:28

RobEarl

7,862
6
35
50

Nice advice. Btw, you chose to change the parameter version to use the href instead of onclick event. Was there a particular reason you did that? It's been my assumption that the onclick event would be the preferred location for that code, although both do work. – Miller Jun 12 '14 at 19:05
@Miller I actually changed the `this` version to use onclick as it didn't reference the link the other way. I'll change the second example for consistency + http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick – RobEarl Jun 12 '14 at 20:08
Nice clean up. And yes, that's a good reference. Tiz why I inquired as to the style difference. +1 – Miller Jun 12 '14 at 20:24

How to change the result of a click event based on link clicked

1 Answers1