使用 JavaScript 将数据 id 从按钮传递到表单答案

【问题标题】：Pass data id from button to form with JavaScript使用 JavaScript 将数据 id 从按钮传递到表单
【发布时间】：2021-02-15 05:26:20
【问题描述】：

我有一个触发模态的按钮：

 <button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="{{ workspace.id }}" data-target="#addSubscription">Add</button>

我需要一个 ID 值。

在模态中，我有一个带有隐藏字段 workspaceId 的表单，我需要在其中传递触发该模态的按钮中定义的值。

 <div id="addSubscription" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <form class="form" id="subscription-form" action="{{ path('my_route') }}" method="post" enctype="multipart/form-data">
       <input type="hidden" name="workspaceId" value="">
       <input id="form-submit" type="submit" class="btn btn-primary" value="Save">
    </form>
  </div>

当我进入时

value="15"

我的表单可以正常工作。

我是 javascript 函数的新手，所以我不知道如何通过我的方法传递 data-workspace_id。

这就是方法：

$().click(function (e) {
  e.preventDefault();
  $('#addSubscription').modal();
});

$('#form-submit').on('click', function (e) {
e.preventDefault();

$.ajax({
    type: "POST",
    url: '/subscription/add',
    data: $('form#subscription-form').serialize(),
    processData: false,
    success: function () {
        console.log('Yezzz!');
    },
    error: function () {
        console.log(this.data);
    }
  });
  return false;
 });

注意：这是在我的带有树枝视图的 Symfony 项目上的工作。

【问题讨论】：

你能在打开模式的地方添加JS吗？因为这是您需要选择数据属性并设置值的部分。
对不起。我编辑了帖子。 @EmielZuurbier

标签： javascript html ajax forms

【解决方案1】：

每当您的模态打开时，您都可以编写事件，即：show.bs.modal，然后使用此事件获取调用模态的按钮，即$(event.target).attr('data-workspace_id')。

演示代码：

//will get call when modal will be open
$(document).on('show.bs.modal', '#addSubscription', function (e) {
    //put the value of attr inside input box
     $("input[name=workspaceId]").val($(event.target).attr('data-workspace_id'))
  console.log($(event.target).attr('data-workspace_id'))
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="12" data-target="#addSubscription">Add</button>

<div id="addSubscription" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <form class="form" id="subscription-form" action="{{ path('my_route') }}" method="post" enctype="multipart/form-data">
    <input type="text" name="workspaceId" value="">
    <input id="form-submit" type="submit" class="btn btn-primary" value="Save">
  </form>
</div>

使用按钮的其他方式，您可以获得data-workspace_id 的值，例如$(this).attr('data-workspace_id')。

演示代码：

//on click of button
$(".add-subscription").click(function(e) {
  e.preventDefault();
  //put value in input box using this .
  $("input[name=workspaceId]").val($(this).attr('data-workspace_id'))
  $('#addSubscription').modal();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="12" data-target="#addSubscription">Add</button>

<div id="addSubscription" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <form class="form" id="subscription-form" action="{{ path('my_route') }}" method="post" enctype="multipart/form-data">
    <input type="text" name="workspaceId" value="">
    <input id="form-submit" type="submit" class="btn btn-primary" value="Save">
  </form>
</div>

【讨论】：