Как сохранить событие клика в форму HTML, используя Javascript - PullRequest
Новая
       32

Как сохранить событие клика в форму HTML, используя Javascript

1 голос
/ 27 февраля 2020

У меня есть форма HTML, которая включает несколько ссылок в следующем формате: 

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

Как определить, была ли нажата такая ссылка, и затем сохранить это событие (например, как url_1.clicked). ) в моем виде?

Я попытался 

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

и добавил onclick="updateInput(this.value)" к ссылке, но это не работает.

Полагаю, проблема в том, что ссылка не является входной и поэтому не может быть обновлена. Однако я застрял в создании соответствующего ввода в форму. В файле данных, полученном в результате отправки формы, одна переменная должна указывать, была ли нажата ссылка.

Ответы [ 4 ]

1 голос
/ 27 февраля 2020

Вы можете использовать скрытый ввод для сохранения массива нажатых ссылок 

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>
1 голос
/ 27 февраля 2020 

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

Добавление onClick в тег <a> хорошо для вас?

0 голосов
/ 27 февраля 2020

Решил это сегодня с помощью сотрудника. Это единственное решение, которое мне помогло:

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>

Количество нажатий на каждую ссылку сохраняется в clickedlinks и затем отправляется в форму как tracker через скрытое поле ввода. Чтобы это работало, важно, чтобы каждый идентификатор ссылки заканчивался на _{number}, как в url_1.

0 голосов
/ 27 февраля 2020

Попробуйте 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>
...