如何修改链接的href以提交表单

Question

我正在处理一个使用 EJS 模板化的网页。每行都有自己的表单和一些表单元素（全部禁用）；以图标结尾的行用作链接。

我想要做的是，当单击该图标时，该图标将变为“勾号”图标，并启用该行上的所有表单元素。到目前为止一切顺利...

但是，在此转换之后，我希望链接（现在带有“勾号”图标）能够在单击时提交表单。我没有这样做。

我在 EJS 模板中有图标的地方：

<a href="#" onclick="adjustActionIcons('<%=i%>')" id="link<%=i%>"><span class="glyphicon glyphicon-pencil" id="editIcon<%=i%>"></span></a>

点击后调用的函数：

function adjustActionIcons(id) {
document.getElementById("dropDown" + id).removeAttribute("disabled");
document.getElementById("Text" + id).removeAttribute("disabled");
document.getElementById("editIcon" + id).className = "glyphicon glyphicon-ok";
// ?????
}

如何更改由表单提交函数/触发器替换的 href 属性？或者任何其他方法来实现相同的目标？

Answer 1

据我所知，您可以在元素上扩展 onclick 函数 - 并在其旁边放置一个隐藏的提交按钮，然后像这样修改代码：

<a href="#" onclick="adjustActionIcons('<%=i%>');$(this).next().trigger('click');" id="link<%=i%>"><span class="glyphicon glyphicon-pencil" id="editIcon<%=i%>"></span></a>
<button type="submit" style="display:none"></button>

这将分别提交锚标签所在的表单。

PS：作为替代方案，您也可以只找到最近的表单元素并在其上调用提交触发器。如果您需要这些信息，请告诉我。

编辑： 将这一行替换为

$(this).closest('form').submit();

如果您仍在苦苦挣扎，也许可以将标记显示到实际表单。