Блог

Главная - Вопросы по программированию - Передать идентификатор данных из кнопки в форму с помощью JavaScript

Передать идентификатор данных из кнопки в форму с помощью JavaScript

#javascript #html #ajax #forms

#javascript #HTML #ajax #формы

Вопрос:

У меня есть кнопка, которая запускает модальный:

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

Мне нужно значение идентификатора.

В модальном у меня есть форма со скрытым полем 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 с представлением twig.

Комментарии:

1. Не могли бы вы добавить JS, где вы открываете модальный. Потому что это та часть, где вам нужно выбрать атрибут данных и задать значение.

2. Извините. Я отредактировал сообщение. @EmielZuurbier

Ответ №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>

Другим способом, используя button, вы можете получить значение 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>