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

Posted 2023-05-08

【中文标题】更改隐藏值并使用 onclick for href 提交表单

【英文标题】：Change hidden value and submit form with onclick for href

【发布时间】：2015-11-02 16:17:26

【问题描述】：

我目前有多个链接充当按钮，每个链接都有不同的形式，其中隐藏值存储 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 可以完成这项工作，只是想先检查一下。

【参考方案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);">

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

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

【参考方案2】：

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

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

【讨论】：

谢谢，刚开始运行，没想到这么容易运行哈哈，不过从我收集到的信息来看，这不应该是不好的做法吗？

【参考方案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="..." 属性。

【讨论】：

嘿，谢谢，通过搜索隐藏输入来查找输入似乎有点乱，我可以将$form.find('input[hidden]') 更改为$('#input_id') 吗？也就是说，如果你有一个a 与list-group-item 类的链接列表和一个隐藏字段，你是否写它来立即开箱即用？

是的。由于您没有提供隐藏字段的 id，我只是依靠表单中只有一个这一事实。如果你已经有了 id，你可以简化选择器。

我只真正了解 php，所以看看它是如何工作的肯定很有用，jQuery 让你做到这一点非常酷。我现在试着让它运行起来，只是一个关于使用closest('form') 的问题，它是像parentNode，还是它只是找到附近的任何形式，因此如果有多种形式不是一个好主意？

我在将它与 html 链接起来时遇到了一些问题，我尝试将它放在头部和链接下方，它似乎创建了一个名为 naptha_container 的空 div：P

不，它不会创建任何节点。也许您可以发布一个指向您正在尝试做的事情的链接，或者创建一个小提琴。就头部或链接下方而言，您需要将其放入 dom 就绪事件或页脚中。否则它将在它引用的元素实际存在之前运行。