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

Posted 2023-02-24

【中文标题】在模态中使用时提交按钮的值不通过

【英文标题】：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() 方法创建一个字符串，其参数由& 分隔，您也可以使用"&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>