Jquery 替换动作形式的奇怪行为

Question

我正在尝试创建一个模式弹出窗口，其中包含一个确认删除按钮，当我在我的索引视图上按删除时，该按钮包含您要删除的对象的 ID，我用 jquery 并用它替换表单操作。我的问题是替换它，不仅仅是替换我的操作表单上的占位符 ID，而是用 http://localhost/project/public/logout.

之类的东西替换整个路线

删除我的按钮 index.blade.php:

<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal" data-id="{{$category->id}}"><i class="far fa-trash-alt"></i> Delete</button>

模态窗体：

<form action="{{route('categories.destroy', ['id' => 'placeHolderId'])}}" method="POST">
          @csrf
          @method('DELETE')
          <button type="button" class="btn" data-dismiss="modal">Cancel</button>
          <button class="btn btn-danger" type="submit">Delete</button>
        </form>

Jquery 替换表单操作属性上的 placeholderId 的函数：

$(document).ready(function() {
  $('#deleteModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var placeHolderId = button.data('id'); 

        var modal = $(this);
        var action = $('form').attr('action');
        modal.find('form').attr("action", action.replace('placeHolderId', placeHolderId));
    });
});

结果：

<form action="http://localhost/project/public/logout" method="POST">

预期结果：

<form action="http://localhost/project/public/manager/categories/1" method="POST">

Answer 1

为提交表单提供另一个 ID，然后在 jQuery 上通过该 ID 找到表单，因为现在，它在 DOM 上获取第一个表单，这就是注销表单

基本上把 id="categoriesForm" 和 jQuery $("#categoriesForm").submit()

$(document).ready(function() {
    $('#deleteModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var placeHolderId = button.data('id'); 

        var modal = $(this);
        var action = $('#categoryForm').attr('action');
        modal.find('#categoryForm').attr("action", action.replace('placeHolderId', placeHolderId));
    });
});

或者你可以做的，就是在提交表单时捕获，然后防止默认，弹出确认然后提交

<form action="{{route('categories.destroy', ['id' => 'placeHolderId'])}}" method="POST" id="categoryForm">
      @csrf
      @method('DELETE')
      <button type="button" class="btn" data-dismiss="modal">Cancel</button>
      <button class="btn btn-danger" type="submit">Delete</button>
</form>


$(document).ready(function() {
    $("#categoryForm").on('submit', function(e) {
        e.preventDefault();

        var confirmDelete = confirm("Are you sure you want to delete this category!");

        if(confirmDelete) {
            $(this).submit()
        }
    })
});

Jquery 替换动作形式的奇怪行为

Jquery replace strange behaviour in action form

php

jquery

laravel-blade

laravel-5.8