Laravel 和 Ajax - 在列字段为真的情况下禁用提交按钮

Question

我以前从未使用过 ajax，但在我当前的项目中，我看到了这样做的必要性。我有一张发票表，其中有一个名为“is_confirmed”的字段，默认情况下设置为 false。

在 index.blade.php 中，我显示了当前登录用户发出的所有发票。在表的每一行中，一旦用户单击确认按钮，该行就会更新，并且数据库中的“is_confirmed”字段设置为“true”。现在的问题是他们的确认按钮仍然处于活动状态，这意味着用户仍然可以单击它。

您将如何实现这一点，以便“is_confirmed”字段设置为“true”的所有行都将禁用其按钮，而“is_confirmed”字段设置为“false”的行是唯一具有可点击按钮的行，即使在页面刷新时也是如此.

这是显示的表格：

这是我的 index.blade.php，它当前显示所有已发送的发票。与确认按钮一起更新每行中的“is_confirmed”数据库字段：

        @section('content')
@foreach($sentinvoices as $sentinvoice)
    <tr>
        <td>
            <span>{{ $sentinvoice->recipient->fullname }}</span>
        </td>
        <td>
            <span>{{$sentinvoice->updated_at->format("M d, Y")}}</span>
        </td>
        <td>
            <span>{{$sentinvoice->status}}</span>
        </td>
        <td>
            <span>{{$sentinvoice->amount}}</span>
        </td>


<td class="text-center">
        <form method="POST" action="{{ route('sender.confirm', $sentinvoice->uuid) }}" id="ajax">
            @csrf
            <input type="hidden" name="sender_id" value="{{$sentinvoice->sender_id}}">
            <input type="hidden" name="is_confirmed" value="{{$sentinvoice->is_confirmed}}">
            <button class="btn btn-success btn-sm" type="submit" id="confirm">Confirm</button>
            </form>
    </td>
</tr>
@endforeach

@endsection

我还在index.blade.php的底部添加了ajax函数如下：

@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

    $("#ajax").click(function(event) {
        event.preventDefault();

        $.ajax({
            type: "post",
            url: "{{ url('sender.confirm') }}",
            dataType: "json",
            data: $('#ajax').serialize(),
            success: function(data){
                  alert("Data Save: " + data);
                  $("#confirm").prop('disabled', true);
            },
            error: function(data){
                 alert("Error")
            }
        });
    });
</script>
@endsection

这是我在 InvoiceController 中提交表单的函数：

public function confirmInvoice(Request $request, $uuid)
    {   
        $user = auth()->user();
        $sentinvoices = Invoice::where('uuid', $uuid)->first();

        $sentinvoices->sender_id = $user->id;
        $sentinvoices->is_confirmed = 1;
        $sentinvoices->save();

        return redirect()->back();
    }

我已经检查了其他类似问题的答案，但仍然无法正常工作。请在这里帮助我。

Answer 1

这里有几件事：

1. 由于您正在发出 AJAX 请求，重定向响应没有任何意义。
2. 您的#ajax id 实际上是表单的id，您不能“点击”表单，而是提交它。
3. 由于您可能有多个表单，您应该为每个表单指定一个唯一标识符并监听所有表单的提交事件。

以下是您可以执行的操作的示例：

查看：

@section('content')
<form method="POST" action="{{ route('sender.confirm', $sentinvoice->uuid) }}" id="form-{{$sentinvoice->uuid}}" class='ajax'>
    @csrf
    <input type="hidden" name="sender_id" value="{{$sentinvoice->sender_id}}">
    <input type="hidden" name="is_confirmed" value="{{$sentinvoice->is_confirmed}}">
    <button class="btn btn-success btn-sm" type="submit" class="confirm" {!! $sentinvoice->is_confirmed ? 'disabled="disabled"' : '' !!}>Confirm</button>
</form>
@endsection

JavaScript

@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

    $(".ajax").submit(function(event) { //listening on class name and for submit action
        event.preventDefault();
        var $confirmButton = $(this).find('.confirm'); // the confirm button of this form
       $confirmButton.prop('disabled', true);
        $.ajax({
            type: "post",
            url: $(this).attr('action'), //send to the correct url based on the markup
            dataType: "json",
            data: $(this).serialize(), //this refers to the submitted form
            success: function(data){
                  alert("Data Saved");
            },
            error: function(data){
                 $confirmButton.prop('disabled', false);
                 alert("Error")
            }
        });
    });
</script>
@endsection

还有你的控制器：

public function confirmInvoice(Request $request, $uuid)
{   
    $user = auth()->user();
    $sentinvoices = Invoice::where('uuid', $uuid)->first();

    $sentinvoices->sender_id = $user->id;
    $sentinvoices->is_confirmed = 1;
    if (!$sentinvoices->save()) {
        return response()->json([ 'success' => false ], 500); //Error response
    }


    return response()->json([ 'success' => true ]); 
}

发生了什么变化：

1. id 是唯一的（并不是很重要），但我们会监听类上的事件。这是因为 JavaScript 要求 id 是唯一的
2. 我们监听submit 事件而不是点击事件。这将涵盖提交表单的其他方法（例如通过切换到按钮并按 Enter）
3. 控制器将返回 JSON 和相应的响应代码。

请注意，此处的确认按钮在发送请求之前是禁用的，只有在请求失败时才启用。这将防止任何人在请求完成之前再次单击它。

Answer 2

我假设您对每个确认按钮都有一个表单，因为您没有澄清这一点。

首先，您的表单和确认按钮不能有 id #ajax 和#confirm，因为在 页面和元素 id 在整个文档中应该是唯一的。

所以用一个类替换它并删除确认按钮上的 id，如下所示：

@section('content')
<form method="POST" action="{{ route('sender.confirm', $sentinvoice->uuid) }}" class="confirm-form">
    @csrf
    <input type="hidden" name="sender_id" value="{{$sentinvoice->sender_id}}">
    <input type="hidden" name="sender_confirmed" value="{{$sentinvoice->is_confirmed}}">
    <button class="btn btn-success btn-sm" type="submit">Confirm</button></form>
@endsection

然后在您的 ajax 请求中将 id 替换为类名，将事件更改为提交并使用 jQuery 和 $(this) 当前元素以找到其中的按钮并禁用该道具。

    $(".confirm-form").on('submit', function(event) {
        event.preventDefault();
        var $button = $(this).find('button');
        var data = $(this).serialize();
        $.ajax({
            type: "post",
            url: "{{ url('sender.confirm') }}",
            dataType: "json",
            data: data,
        }).done(function () {
          $button.prop('disabled', true)
        });
    });

这是一个简化的工作示例：

$(".confirm-form").on('submit', function(event) {
    event.preventDefault();
    var $button = $(this).find('button');
    var data = $(this).serialize();
    $.ajax({
        type: "post",
        url: "https://jsonplaceholder.typicode.com/todos/",
        dataType: "json",
        data: data,
    }).done(function () {
      $button.prop('disabled', true)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Confirm 1</td>
    <td>
      <form class="confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
  <tr>
    <td>Confirm 2</td>
    <td>
      <form class="confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
  <tr>
    <td>Confirm 3</td>
    <td>
      <form class="confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
</table>