Блог

При нажатии кнопки редактирования строки таблицы открывается модальная форма.

Я выбираю текущие значения этой строки, чтобы они могли быть значениями по умолчанию для этих полей формы при открытии modal.

Поскольку я новичок в jQuery, я не могу понять, как передать эти значения другим методом.

Моя функция:

 var $fruitForm = $('#edit-form')

$('.fruit_edit').on('click', function(event) {

    // Get the data-id value of the modal link.
    var id = $(this).data('fruit_id');

    // Set the hidden input field with the id.
    $('#fruit_id').val(id);

    var $row = $(this).closest('tr');

    // Here I am finding row value on click
    var tableFruitName =  $("a[data-fruit_id=" id "]").closest("tr").find('.tableFruitName').text() 

    event.preventDefault();
});

// Listen for submit instead of click.
$fruitForm.on('submit', function(event) {
    event.preventDefault();

    // Get the values from the form.
    var $form = $(this);
    var id = $form.find('input[name="fruit_id"]').val();
  
    I want for the value from upper 'onclick' to be defined in from input here
    var fruitName = $('#fruitName').val(tableFruitName);

    $.ajax({
        type: 'PATCH',
        url: '/fruit/edit',
        data: JSON.stringify({
            'id' : id,
            'fruitName' : fruitName
        }),
        processData: false,
        contentType: 'application/json-patch json',
        success: function () {
            $("#fruit-table").load(location.href   " #fruit-table");
            $('#editFruit').modal('hide');
        },
        error: function (xhr, status, error) {
            var ErrorMessage = JSON.parse(xhr.responseText);
        }
    });
});
  

Объяснение моего рабочего процесса находится в комментариях. Я не знаю, как передать захваченное значение в другом методе, где определен ввод.

   <tr>
     <td class="text-center"> {{ fruit.id }} </td>
     <td class="text-center tableFruitName"> {{fruit.fruitName is empty ? "N/A" : fruit.startDate }}</td>
                              
      <td class="td-actions text-center">
         <a href data-toggle="modal" data-target="#editFruit" data-fruit_id="{{ fruit.id }}" class="btn btn-warning fruit_edit">
             <i class="fa fa-fw fa-pencil"></i>
          </a>
      </td>
   </tr>