在模态中通过 id 传递表单值

Question

我的 jquery 和 Ajax 请求有很大问题，因为我是新手。

我正在做 CRUD 操作，我的添加方法运行良好。编辑让我很头疼。

我在 mu route 中进行了编辑，例如 /edit/{id}，只要单击模态按钮，模态就会打开，但在 'save' 上它是 'undefined'.

你有几个问题：

ID未被抓到
我想显示表单字段的所有当前属性值。这是我最大的问题，我看到了示例，但无法弄清楚如何根据该 ID 显示所有表单字段当前值。
表单正在提交，没有任何更改

所以有一些东西

$(document).on('show.bs.modal', '#editModal', function (e) {
    var id = $(this).data("data-id");
    var startDate = $(this).data("startDate");
    var endDate = $(this).data("endDate");
});

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

    var id = $(this).data("id");
    var startDate = $(this).data("startDate");
    var endDate = $(this).data("endDate");

        $.ajax({
            type: 'PATCH',
            url: "/user/edit/"+id,
            data: JSON.stringify({"startDate":startDate, "endDate":endDate}),
            processData: false,
            contentType: 'application/json-patch+json',
            success: function () {
                $("#user-table").load(location.href + " #user-table");
                $('#editModal').modal('hide');
                displayNotif('success', 'check', 'User updated successfully');
            },
            error: function (xhr, status, error) {
                var ErrorMessage = JSON.parse(xhr.responseText);
            }
        });
});

在模态启动按钮中定义了该 ID，例如：

<a href data-toggle="modal" data-target="#editModal" data-id="{{ user.id }}" class="btn btn-warning user_edit">Edit</a>

表格也设置正确，因为这里添加的表格只是隐藏了 ID 字段。

这是模态宿舍。

<form class="form" id="user-form" method="post" enctype="multipart/form-data">
   <input type="hidden" name="id" value="">

    <label for="startDate">Start Date: </label>
    <input id="startDate" name="startDate" class="form-control" type="date" value="" required/>

    <label for="endDate">End Date: </label>
    <input id="endDate" name="endDate" class="form-control" type="date" value=""/>
         
    <input id="form-edit" type="submit" class="btn btn-primary" value="Save">
 </form>

我是 jquery 和 ajax 的新手，因此我们将不胜感激。谢谢

Answer 1

收听 .user_edit link 上的 click 事件。现在 this 将引用该特定元素并将获得正确的 data-id 属性值。然后使用该值设置隐藏输入元素的 value。

然后使用 submit 事件禁用默认提交行为。在其中找到表单中的子字段并从这些元素中读取值。

尝试下面的代码片段，看看是否传递了任何值。

$(function() {
  $('.user_edit').on('click', function(event) {
    // Get the id and target values from the link.
    var $this = $(this);
    var id = $this.data('id');
    var target = $this.data('target');

    // Select the modal the link refers to..
    var $modal = $(target);

    // ..and find the form inside that modal..
    var $form = $modal.find('.form');

    // ..to set the hidden input field with the id.
    $form.find('input[name="id"]').val(id);
    event.preventDefault();
  });

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

    // Get the values from the form.
    var $form = $(this);
    var id = $form.find('input[name="id"]').val();
    var startDate = $form.find('input[name="startDate"]').val();
    var endDate = $form.find('input[name="endDate"]').val();

    $.ajax({
      type: 'PATCH',
      url: '/user/edit/' + id,
      data: JSON.stringify({
        'startDate': startDate,
        'endDate': endDate
      }),
      processData: false,
      contentType: 'application/json-patch+json',
      success: function () {
        $("#user-table").load(location.href + " #user-table");
        $('#editModal').modal('hide');
        displayNotif('success', 'check', 'User updated successfully');
      },
      error: function (xhr, status, error) {
        var ErrorMessage = JSON.parse(xhr.responseText);
      }
    });
  });

}());

在模态中通过 id 传递表单值

Passing form values by id in modal

javascript

ajax

jquery

bootstrap-modal