Распознать действие отправки формы по якору - PullRequest
Новая
       9

Распознать действие отправки формы по якору

0 голосов
/ 22 ноября 2018

■ ПРЕДПОСЫЛКИ:

У меня есть HTML, как показано ниже, который имеет 1 кнопку, 2 привязки и вход для хранения значения, обернутого в форму.Цель, которую я хочу достичь:

  1. иметь возможность отправить форму независимо от нажатия кнопки и привязки.
  2. с помощью сообщения.
  3. быть в состояниираспознал, какой элемент вызывает отправку (например, идентификатор кнопки или идентификатор привязки)document.activeElement) не распознает его, если отправка инициируется нажатием кнопки «якоря».к моему текущему коду) альтернативные способы достижения моей цели или просто как распознать отправку от якорей, чтобы я мог захватить ее информацию так же, как я могу сделать для отправки кнопки в этом случае?

    спасибо 

    <form id="detailsForm" method="post" class="ui form" enctype="application/x-www-form-urlencoded" action="someUrl">

...
<button id="prodDelButton" form="detailsForm">
delete
</button>
...
<input type="text" id="pickupSearchCriteria.pageNumber" name="pickupSearchCriteria.pageNumber" value="1" />

<a class="item paginationAnchor" id="1" onclick="document.getElementById('detailsForm').submit();" shape="rect">page1</a>
<a class="item paginationAnchor" id="2" onclick="document.getElementById('detailsForm').submit();" shape="rect">page2</a>
...
...
</form>


...

<script id="shared_index_before">
    $('#detailsForm').submit(function () {

        var $btn = $(document.activeElement);
        if ($btn.prop('id') == 'stgDelButton') {
            $("#pickupSearchCriteria.pageNumber").val($btn.prop('id'));
        }
        else if ($btn.prop('id') == 'prodDelButton') {
            $("#pickupSearchCriteria.pageNumber").val($btn.prop('id'));
        }
        else if($btn.hasClass( "paginationAnchor" )){
            
            $("#pickupSearchCriteria.pageNumber").val($btn.prop('id'));
        }

    });
</script>

1 Ответ

0 голосов
/ 22 ноября 2018 
<form id="detailsForm" method="post" class="ui form" enctype="application/x-www-form- 
urlencoded" action="someUrl">

   <button class="submitableElement" id="prodDelButton" >
     delete
   </button>

   <input type="text" id="pickupSearchCriteria.pageNumber"name="pickupSearchCriteria.pageNumber" value="1" />

   <a class="item paginationAnchor submitableElement" id="1"  shape="rect">page1</a>
   <a class="item paginationAnchor submitableElement" id="2"  shape="rect">page2</a>

</form>

JS: 

$('.submitableElement').click(function(event){
   const id = event.target.id;
   doSomeThingWithId(id)//You can use the item id to know what was clicked.
   $('#detailsForm').submit()
 })



function doSomeThingWithId(id){
   alert(`Element with id ${id} was used to submit the form...`);  
   //Do something here with the data...
}

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

Моя скрипка: https://jsfiddle.net/ku4rgqne/

...