Question

■背景：

我有一个类似下面的html，它有1个按钮，2个锚点和一个输入，用于保存包装在表单中的值。我要实现的目标是：

无论单击按钮和锚点，都可以提交表单。
使用帖子。
能够识别出哪个元素导致了提交。（例如，按钮ID或锚点ID）

■问题：

我面临的问题是“由于锚点不可聚焦，如果触发提交，$（document.activeElement）将无法识别它通过点击锚点”（从Google搜索结果中获悉...）。

■问题：

因此，是否有任何简单的方法（对当前代码的更改较少）即可实现我的目标，或者只是如何识别锚点提交的内容，以便我可以像捕获自己的信息一样捕获其信息在这种情况下可以提交按钮吗？

谢谢

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

Answer 1

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

识别锚点提交表单的操作

1 个答案: