HTML-ссылка для репликации ссылок на изображение

У моего веб-приложения есть форма с некоторыми кнопками изображения, каждая кнопка представляет задачу, когда вы нажимаете на кнопку, она отправляется на /startURL-адрес, а затем я декодирую, на какую кнопку нажимают, а также значение формы из httpRequest<form action = "/ start" method = "post" > <input type = "image" value = "Status Report" name = "statusreport" src = "style / images / status_report.png" title = "Status Report" data-toggle = " всплывающая подсказка " data-placement = " bottom " class = "btn btn-outline-primary btn-lg" > <input type = "image" value = "Fix Songs" name = "fixsongs" src = "style / images / fixsongs.png" title = "Fix Songs" data- toggle = "tooltip" data-placement = "bottom" class = "btn btn-outline-primary btn-lg" > <input type = "text" name = "folder" id = "folder" class = "form-control" value = "C: Music" aria-describeby = "selectfolderaddon" > </ form> 

navbar

Я добавил navbar(используя Bootstrap 4), я включил те же задачи в .<ul class="navbar-nav"> <li class="nav-item"> <a href="" class="nav-link"> Status Report </a> </li> <li class="nav-item"> <a href="" class="nav-link"> Fix Songs </a> </li> </ul>

onclick()

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

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

javascript,html,

0

Ответов: 2

<a HREF = "#" класс = "nav-link" data-name = "statusreport"> Status Report </a> «значение = "id_ 51513868"> 1 принял

Одним из решений является привязка обработчика кликов к каждой ссылке, которая затем вызывает inputщелчок.

Чтобы сопоставить, какая ссылка должна щелкнуть по этому входу, nameатрибут входов является одним из вариантов, где один добавляет то же самое в ссылку, используя element.dataset.nameпрефикс пользовательского атрибута .

document.querySelectorAll('a[data-name]').forEach( function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector('input[name="'+this.dataset.name+'"]').click();
  });
});

Тогда просто возьмите его значение, в этом случае e.preventDefault();.

document.querySelectorAll('a[data-name]').forEach( function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector('input[name="'+this.dataset.name+'"]').click();
  });
});

В предотвращает ссылку для навигации, а мы хотим , чтобы форма должна быть представлена.<ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link" data-name="statusreport"> Status Report </a> </li> <li class="nav-item"> <a href="#" class="nav-link" data-name="fixsongs"> Fix Songs </a> </li> <li class="nav-item"> <a href="" class="nav-link"> Ohter link </a> </li> </ul> <form action="/start" method="post"> <input type="image" value="Status Report" name="statusreport" src="style/images/status_report.png" title="Status Report" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg"> <input type="image" value="Fix Songs" name="fixsongs" src="style/images/fixsongs.png" title="Fix Songs" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg"> <input type="text" name="folder" id="folder" class="form-control" value="C:Music" aria-describedby="selectfolderaddon"> </form>

Фрагмент стека

type="image"
statusreport.x

1

На картах на стороне сервера (которые есть statusreport.y) будут представлены координаты, на которые были нажаты.

Протестируйте наличие fixsongs.xи / fixsongs.y или . и _на своем серверном коде.

Обратите внимание, что некоторые синтаксические анализаторы на стороне сервера не будут принимать .имя и будут делить его. (PHP, IIRC, заменяет его а _).

Тем не менее, если вы хотите кнопку, которая является изображением, вы должны использовать кнопку, которая является изображением, а не картой изображения на стороне сервера.

<button value="Status Report" name="statusreport" title="Status Report" data-toggle="tooltip" data-placement="bottom" class="btn btn-outline-primary btn-lg">
    <img alt="Status Report" src="style/images/status_report.png">
</button>

Затем вы можете просто проверить statusreportили fixsongsна сервере.

JavaScript, HTML,
Похожие вопросы
Яндекс.Метрика