1
votes

Comment enregistrer l'événement de clic dans un formulaire HTML à l'aide de Javascript

J'ai un formulaire HTML qui comprend plusieurs liens au format suivant:

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

Comment puis-je détecter si un tel lien a été cliqué puis enregistrer cet événement (par exemple, sous url_1.cliqué ) dans mon formulaire?

J'ai essayé

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

et d'ajouter onclick = "updateInput (this.value)" au lien, mais cela ne fonctionne pas ne fonctionne pas.

Je suppose que le problème est que le lien n'est pas une entrée et ne peut donc pas être mis à jour. Je suis cependant coincé dans la création d'une entrée appropriée au formulaire. Dans le fichier de données résultant de la soumission du formulaire, une variable doit indiquer si le lien a été cliqué.

javascript html forms hyperlink

1 commentaires

Pouvez-vous publier le formulaire dans son intégralité et clarifier ce que vous souhaitez spécifiquement mettre à jour lorsqu'un lien est cliqué?

4 Réponses :

1
votes

<a id="url_1" href="#" target="_blank" onClick="updateInput()">LINK</a>

 function updateInput(){
    document.getElementById("url_1").innerHTML = "clicked";
    
}

L'ajout de onClick à la balise vous convient?

1 commentaires

cela ne fonctionnera pas, les informations de l'a-tag ne sont pas disponibles lorsque le formulaire est soumis.

1
votes

Vous pouvez utiliser une entrée masquée pour enregistrer le tableau des liens cliqués

<form>
<a id="url_1" href="#" target="_blank">LINK</a>
<input type="hidden" name="clickedlinks">
<input type="submit">
</form>

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;
}

0 commentaires

0
votes

Essayez Event.preventDefault

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

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;
  });
}

0 commentaires

0
votes

Le problème a été résolu avec l'aide d'un collègue aujourd'hui. C'est la seule solution qui a fonctionné pour moi:

JavaScript:

<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>

HTML:

<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>

Le nombre de fois que chaque lien a été cliqué est enregistré dans clickedlinks puis envoyé au formulaire en tant que tracker via un champ de saisie masqué. Pour que cela fonctionne, il est essentiel que chaque identifiant de lien se termine sur _ {number} comme dans url_1.

0 commentaires