在模态中使用时提交按钮的值不通过

Posted

技术标签:

【中文标题】在模态中使用时提交按钮的值不通过【英文标题】:Submit buttons' value doesn't pass when used in modal 【发布时间】:2021-04-30 15:37:54 【问题描述】:

表单中有一个按钮(如下所示)。当在常规(如果您想将其称为常规)Django 模板化 html 页面中使用时,该按钮会正确地将 submit 上的 value 传递给下面的代码。

<button type="submit" class="btn btn-primary" name="revoke" value="1" form="my-form">Revoke</button>

序列化数据将包含revoke 及其value

`$('#my-form').on('submit', function(event) 
        event.preventDefault();
        console.log($(this).serialize());

但是,如果表单嵌入在 Bootstrap 4 提供的模式中,则序列化数据具有其余的表单数据,但没有 revoke。如果按钮也能通过revoke就好了。

【问题讨论】:

【参考方案1】:

由于serialize() 方法创建一个字符串,其参数由&amp; 分隔,您也可以使用"&amp;revoke=" + $("[name=revoke]").val() 附加按钮的值,然后这也将传递到您的后端页面。

演示代码

$('#my-form').on('submit', function(event) 
  event.preventDefault();
  //attch revoke as well
  var formdatas = $(this).serialize() + "&revoke=" + $("[name=revoke]").val();
  console.log(formdatas)
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="acd">
  <input type="text" name="acd1">
  <button type="submit" class="btn btn-primary" name="revoke" value="1" form="my-form">Revoke</button>
</form>

【讨论】:

以上是关于在模态中使用时提交按钮的值不通过的主要内容,如果未能解决你的问题,请参考以下文章

如何在提交时重新加载页面

提交按钮不能在ajax生成的表的模态弹出视图中工作

单击提交按钮时如何传递单击按钮的值?

在 JQuery 委托中触发表单提交

您可以在 jquery 模态对话框中提交表单吗

React 模态提交表单