Question

我正在使用Laravel作为我的网络应用程序。

在我的“国家/地区”表格的每一行中，我都有一个“编辑”按钮，用于打开一个模态，并使用该国家/地区的现有名称填充文本区域。可以在数据库中编辑和更新此textarea。

这是我模态的部分代码：

{!! Form::model($country, [
    'method' => 'PATCH',
    'url' => ['country', 'lblCountryId'],
    'class' => 'form-horizontal'
]) !!}

// some more code

// and the edit button for each row
<td>
   <button type="submit" class="btn btn-primary btn-xs" 
         data-toggle="modal" data-target="#editModal"
         data-id=" {{ $item->id }}"
         data-name="{{ $item->name }}">
         <i class="fa fa-pencil" aria-hidden="true"></i>
   </button>
</td>

当模态显示时，我通过掌舵JS来填充文本字段的值：

$(function () {
    $('#editModal').on("show.bs.modal", function (e) {
        $("#lblCountryId").html($(e.relatedTarget).data('id'));
        document.getElementById("txtCountryName").value = $(e.relatedTarget).data('name');
    });
});

使用相同的脚本我想编辑表单发布的URL，但JS似乎不喜欢这样。

有什么办法可以根据我点击的哪一行动态更改表单的网址？

Answer 1

在前面的答案的帮助下，我能够以这种方式解决它：

以我的形式：

{!! Form::model($country, [
      'method' => 'PATCH',
      'class' => 'form-horizontal',
      'name' => 'myEditForm'
]) !!}

<td>
   <button type="submit" class="btn btn-primary btn-xs" 
         data-toggle="modal" data-target="#editModal"
         data-id=" {{ $item->id }}"
         data-name="{{ $item->name }}">
         <i class="fa fa-pencil" aria-hidden="true"></i>
   </button>
</td>

在我的JS中：

<script type="text/javascript">
$(function () {
    $('#editModal').on("show.bs.modal", function (e) {
        document.getElementById("txtCountryName").value = $(e.relatedTarget).data('name');
        document.myEditForm.action = "{{ url('country') }}" + '/' + $(e.relatedTarget).data('id');
    });
});
</script>

Answer 2

将表单更改为：

{!! Form::model($country, [
    'method' => 'PATCH',
    'class' => 'form-horizontal',
    'id' => 'myForm'
]) !!}

你的剧本喜欢这个：

$(function () {
    $('#editModal').on("show.bs.modal", function (e) {
        var url = "{!! route('country', ':_data_id' ) !!}";
        $('#myForm').attr('action', url.replace( ':_data_id', e.relatedTarget.data('id') ) );
        document.getElementById("txtCountryName").value = $(e.relatedTarget).data('name');
    });
});

引导模式上的动态URL

2 个答案: