Question

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

 <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项目中的工作。

Answer 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>

使用JavaScript将按钮中的数据ID传递到表单

1 个答案: