CODEWITHSUNDEEP
javascripthtmlformshyperlink
Tim Draws
Tim Draws

Reputation: 71

How to save click event to HTML form using Javascript

I have an HTML form that includes several links in the following format:

<a id="url_1" href="#" target="_blank">LINK</a>

How can I detect whether such a link was clicked and then save that event (e.g., as url_1.clicked) in my form?

I tried

<script>
    function updateInput(){
    document.getElementById("#url_1").value = "clicked";
}
</script>

and adding onclick="updateInput(this.value)" to the link, but that doesn't work.

I suppose the problem is that the link is not an input and can therefore not be updated. I am stuck however in creating an appropriate input to the form. In the data file that results from submitting the form, one variable should indicate whether the link has been clicked.

Upvotes: 1

Views: 4388

Answers (4)

Tim Draws
Tim Draws

Reputation: 71

Solved it with the help of a co-worker today. This is the only solution that worked for me:

JavaScript:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<script>
var clickedlinks = [0,0,0,0];

$('html').on('click','.tracked',function () {
    var id = $(this).attr('id').split('_')[1];
    console.log(id);
    clickedlinks[id] += 1;
    $('#tracker').val(clickedlinks);
});
</script>

HTML:

<form>
<a id="url_0" class="tracked" target="_blank">LINK</a>
<a id="url_1" class="tracked" target="_blank">LINK</a>
<a id="url_2" class="tracked" target="_blank">LINK</a>
<a id="url_3" class="tracked" target="_blank">LINK</a>
<input id="tracker" type="hidden" name="tracker">
<input type="submit">
</form>

The number of times each link was clicked is saved in clickedlinks and then sent to the form as tracker via a hidden input field. For this to work it is crucial that each link id ends on _{number} as in url_1.

Upvotes: 0

Kelsnare
Kelsnare

Reputation: 705

Try Event.preventDefault

var ids = ["url_1"];
for(let id of ids) {
  document.querySelector(`a#${id}`).addEventListener("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log("Prevented click navigation on anchor");
    // ...
    // Do your stuff
    // ...
    var link = document.querySelector(`a#${id}`).getAttribute("href");
    if (link[0] == "#") {
      link = `${location.href.split("#")[0]}${link}`;
    }
    location.href = link;
  });
}
<a id="url_1" href="#test" target="_blank">LINK</a>

Upvotes: 0

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4015

You can use hidden input to save array of clicked links

var clickedlinks = [];
document.querySelectorAll("a").forEach((a)=>{
 a.addEventListener("click",addtoarr);
});
document.querySelector("form").addEventListener("submit",fnsubmit);

function addtoarr(){
  clickedlinks.push(this.outerHTML);
}

function fnsubmit(){
  this.querySelector("input[type=hidden]").value= JSON.stringify(clickedlinks);
  console.log(JSON.parse(this.querySelector("input[type=hidden]").value)[0]);
  event.preventDefault();//return true;
}
<form>
<a id="url_1" href="#" target="_blank">LINK</a>
<input type="hidden" name="clickedlinks">
<input type="submit">
</form>

Upvotes: 1

malarres
malarres

Reputation: 2946

 function updateInput(){
    document.getElementById("url_1").innerHTML = "clicked";
    
}
<a id="url_1" href="#" target="_blank" onClick="updateInput()">LINK</a>

Adding the onClick to the <a> tag is ok for you?

Upvotes: 1

Related Questions