更改隐藏值并使用 onclick for href 提交表单

Question

我目前有多个链接充当按钮，每个链接都有不同的形式，其中隐藏值存储 ID。问题是我正在使用引导程序并且它弄乱了样式，并且解决它的唯一方法似乎是有一个隐藏的值，一旦单击链接，它将使用选定的 ID 进行更新。

我目前有<a href="javascript:;" class="list-group-item list-group-item-default" onclick="parentNode.submit();"> 作为链接，我也一直在寻找一种编辑值的方法。不幸的是，似乎每个人都强烈建议不要走 javascript 路线并改用 jQuery，但我不太确定如何将两者联系起来。

我找到了this link，它有一个很好的例子，说明如何使用 jQuery 来更改值，尽管我可以通过一些帮助将它放在一起，因为我不确定是否可以使用jQuery 代码也可以提交表单，或者如果我应该创建一个单独的 javascript 函数来运行 jQuery，然后提交表单。

如果 javascript 路由实际上没有任何问题，看起来 this 可以完成这项工作，只是想先检查一下。

Answer 1

首先，jQuery 实际上是 Javascript，它只是一个扩展——如果您使用 jQuery，那么您就是在编写 Javascript。 jQuery 刚刚变得如此流行，以至于有些人将其混为一谈。

您可以将要提交的表单作为参数传递给函数，如下所示：

function handleClickAction(formElement) {
    // change values
    formElement.submit();
}

使用给定的标记，您可以这样称呼它：

<a href="javascript:;" class="list-group-item list-group-item-default" onclick="handleClickAction(parentNode);">

当然，如果您需要知道要更改什么值和/或如何更改，您可以向函数调用添加更多参数。

一般来说，您使用的解决方案不是很优雅而且是多余的，但是如果您想使用内联代码，这可能是一种合适的方式:)

Answer 2

如果你正在做内联事件，那就在一行中做

onclick="document.formName.elementName.value='foo';this.form.submit();"

Answer 3

Bootstrap 的插件依赖于 jQuery 来运行。在这种情况下，当您将 jQuery 添加到引导程序设计中时，您会看到更强大的功能（不仅仅是 CSS 样式）。既然如此，这是一个 jQuery 版本，可以满足您的要求：

注意：已修​​改以回答 cmets 中的后续问题。现在使用点击元素的索引而不是原始帖子请求的 id，因为没有为链接分配 id 属性。

jQuery(function($) {
    $('#form_of_forms a.list-group-item').click(function(e) {
        e.preventDefault();
        $('#dynamic_form_id').val($(this).index()+1);
        $('#form_of_forms').submit();
    });
});

此外，将href="javascript:;" 替换为href="#" 并从每个链接中完全删除onclick="..." 属性。