Question 216747 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Javascript – determining specific urls clicked

I have a survey in which there are 3 URLs (see HTML below) within the question. We want to track which specific URLs are clicked rather than just a URL was clicked. I have this code for that with the embedded data of clicked=0

Qualtrics.SurveyEngine.addOnload(function() {
  jQuery('#extLink').click(function(event) {
    Qualtrics.SurveyEngine.setEmbeddedData("clicked", "1");
    jQuery("#NextButton").click();
  });
});

But I can’t figure out a good way to modify this to be able to know the specific URL clicked, since the jQuery is #extLink and really this code is only counting if something is clicked but not specifically what.

Any advice?

The HTML code is for each option in the survey question.

<div><a href="https://www.directrelief.org/" id="extLink" rel="noopener" target="_blank">Direct Relief</a> - Support for people affected by emergencies</div>

<div><a href="https://water.org/" id="extLink" rel="noopener" target="_blank">Water.org</a> - Provision of safe and accesible water</div>

<div><a href="https://www.feedingamerica.org/" id="extLink" rel="noopener" target="_blank">Feeding America</a> - Works on hunger relief</div>
Tags:

2

Answers


  1. 0

    The id of each link should be unique (e.g., extLink1, extLink2, extLink3). id should always be unique on an html page.

    Then instead of having to do a separate event handler for each, you can add class=’extLink’ to all the links. Then:

    Qualtrics.SurveyEngine.addOnload(function() {
  jQuery('.extLink').click(function(event) {
    Qualtrics.SurveyEngine.setEmbeddedData(this.id+"_clicked", "1");
    jQuery("#NextButton").click();
  });
});
    Login or Signup to reply.
  2. 0

    id needs to be unique for each element on page, to style elements together or fetch a group of them with javascript please use classes.

    any way this code may solve your problem:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div><a href="https://www.directrelief.org/" class="extLink" id="extLink1" rel="noopener" target="_blank">Direct
            Relief</a> -
        Support for people affected by emergencies</div>

    <div><a href="https://water.org/" class="extLink" id="extLink2" rel="noopener" target="_blank">Water.org</a> -
        Provision of safe and
        accesible water</div>

    <div><a href="https://www.feedingamerica.org/" class="extLink" id="extLink3" rel="noopener" target="_blank">Feeding
            America</a> -
        Works on hunger relief</div>

    <script src="jquery.min.js"></script>
    <script>
        $('.extLink').on('click', (e) => {
            console.log($(e.target).attr("id"))
        })
    </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search