來自回圈資料的Ajax呼叫跳過

我的回圈資料中有模態，并且在該模態中我將相關資料保存到每個專案，問題是它只保存回圈中的第一個專案和它回傳的其他專案的資料""

示例代碼：

@section('content')
<div>
    <table class="table table-bordered dataex-html5-selectors">
        <thead>
          <tr>
            <th class="text-center">Name</th>
            <th class="text-center">Button</th>
          </tr>
        </thead>
        <tbody>
            @foreach($items as $item)
            <tr>
                <td>{{$item->name}}</td>
                <td>
                    <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#editModal-{{$item->id}}">Add Data</button>
                </td>
                <!-- item modal -->
                <div class="modal fade" id="editModal-{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="editModalLabel">Add Data To "{{$item->name}}"</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form>
                            <div class="modal-body">
                                <div class="tab-content" id="myTabContent">
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <label for="question">Question *</label>
                                        <input type="text" class="form-control" id="Qquestion" name="question">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="note">Note</label>
                                        <input type="text" class="form-control" id="Qnote" name="note">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="correctAnswer">Correct Answer</label>
                                        <input type="text" class="form-control" id="QcorrectAnswer" name="correctAnswer">
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                <button type="button" class="saveQuestion btn btn-primary" data-id="{{$item->id}}">Save</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- item modal -->
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection


@section('scripts')
<script>
    $(document).ready(function() {
        $('.saveQuestion').on('click', function(e) {
            e.preventDefault();
            $.ajaxSetup({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });
            var Qquiz_id = $(this).attr("data-id");
            var Qquestion = $('#Qquestion').val();
            var Qnote = $('#Qnote').val();
            var QcorrectAnswer = $('#QcorrectAnswer').val();

            console.log('1', Qquiz_id)
            console.log('2', Qquestion)
            console.log('3', Qnote)
            console.log('4', QcorrectAnswer)
            $.ajax({
                url: '{{ route('addQuestion') }}',
                type: 'POST',
                data: {
                    quiz_id: Qquiz_id,
                    question: Qquestion,
                    note: Qnote,
                    correctAnswer: QcorrectAnswer,
                },
                success:function(data) {
                  console.log('data', data);
                  $('#Qquestion').val('');
                  $('#Qnote').val('');
                  $('#QcorrectAnswer').val('');
                }
            });
        });
    });
</script>
@endsection

因此，例如，如果我有 2 個帶有 id1和的專案2，當我打開 id 的模式1并輸入資料時，它會保存資料。但是，當我打開帶有 id 的專案的模式2并嘗試保存資料時，它會將我的輸入值回傳為""

這是控制臺螢屏截圖：

保存專案 ID 的資料1

保存專案 ID 的資料2

任何想法？

uj5u.com熱心網友回復：

您需要在問題、測驗和正確答案中添加專案 ID。

就像：

<div class="col-md-6">
  <label for="question">Question *</label>
  <input type="text" class="form-control" id="Qquestion_{{$item->id}}" name="question">
</div>

<div class="col-md-6">
  <label for="note">Note</label>
  <input type="text" class="form-control" id="Qnote_{{$item->id}}" name="note">
</div>

<div class="col-md-6">
  <label for="correctAnswer">Correct Answer</label>
  <input type="text" class="form-control" id="QcorrectAnswer_{{$item->id}}" name="correctAnswer">
</div>

在 jquery 中你需要添加 quiz_id

var Qquiz_id = $(this).attr("data-id");
var Qquestion = $('#Qquestion_' Qquiz_id).val();
var Qnote = $('#Qnote_' Qquiz_id).val();
var QcorrectAnswer = $('#QcorrectAnswer_' Qquiz_id).val();

標籤：javascript jQuery 阿贾克斯 拉拉维尔 laravel-刀片

上一篇：Onkeyup僅在幾個字符后觸發獲取請求

下一篇：JQUERYforeach亂序附加PHP腳本