Как получить элементы с id = "id [{{$ index}}]" в jquery

Question

У меня есть блэйд форма, которая показывает учетные записи, уже сохраненные в БД потому что кто-то может добавить много учетных записей, я сначала добавил foreach, а затем добавил переменную $i, которая получает index для элемента id как это

<div style="display: none;">{{ $i = 0 }}</div>
        @if(!empty($accounts))
            @foreach($accounts as $account)
<span class="text-primary number h6 font-weight-bold" data-toggle="modal" data-target="#addDirect{{$i}}">دایرکت اتوماتیک</span><span></span>
                                <!--add Direct Modal -->
                                <form action="{{ route('update_automatic_direct') }}" method="post" id="frm-add-direct[{{$i}}]">
                                <div class="modal fade" id="addDirect{{$i}}" tabindex="-1" role="dialog" aria-labelledby="addmodaldirect" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="addmodaldirect"> دایرکت اتوماتیک</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group row">
                                                    <input type="text" name="direct_page_id" id="direct-page-id[{{$i}}]">
                                                    <label for="direct-count" class="col-sm-5 col-form-label font-weight-bold h6 pr-0">حداکثر دایرکت در ساعت:</label>
                                                    <div class="col-sm-5 pr-0">
                                                        <input type="text" class="form-control form-control-sm" id="direct-count[{{$i}}]" name="direct_count" placeholder="0">
                                                    </div>
                                                </div>
                                                <div class="form-group text-right">
                                                    <label class="font-weight-bold h6">متن پیام</label>
                                                    <textarea id="new-direct[{{$i}}]" class="form-control directText" name="directText" type="textarea" rows="5"></textarea>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <input type="submit" class="btn btn-primary" name="save_direct" id="add-Direct" value="ذخیره">
                                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                                <meta name="csrf-token" content="{{ csrf_token() }}" />
                                                <!-- <button id="add-Direct" type="button" class="btn btn-primary" data-dismiss="modal">ذخیره</button> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
{{ $i + 1 }}
@endforeach
@endif

Теперь это мой скрипт-тег

<script type="text/javascript">
$('#frm-add-direct').on('submit' , function(e){
    e.preventDefault();
    var data = $(this).serialize();
    var url = $(this).attr('action');
    var post = $(this).attr('method');
    console.log(data);
    $.ajax({
        type : post,
        url : url,
        data : data,
        dataTy: 'json',
        success:function(data)
        {
            alert(data);
            $("#addDirect").modal('hide');
        }
    });
});

Теперь мой вопрос: у меня много тегов формы, как я могу найти пользователя, на которого нажали, чтобы изменить его. Потому что мне также нужен id для обновления записи в базе данных.

Answer 1

вам не нужно писать идентификатор, подобный этому id = "frm-add-direct [{{$ i}}]", просто используйте вместо этого атрибуты данных.

в jquery вы должны использовать атрибут данных, чтобы сохранить идентификаторы или любые другие данные в вашем html. так что вы можете назначить общий класс и атрибут данных для идентификатора каждой форме следующим образом:

<form class="add-form" data-id="[{{$i}}]" action="{{ route('update_automatic_direct') }}" method="post" id="frm-add-direct">

и получите идентификатор кликаемой формы с помощью этого скрипта:

$('.add-form').on('submit' , function(e){
    e.preventDefault();

    var data = $(this).serialize();
    var id = $(this).attr('data-id'); // here is the clicked form id
    var url = $(this).attr('action');
    var post = $(this).attr('method');

    console.log(data, id, url, post);

    $.ajax({
        type : post,
        url : url,
        data : data,
        dataTy: 'json',
        success:function(data){
            alert(data);
            $("#addDirect").modal('hide');
        }
    });
});

Answer 2

Используйте класс для вашей формы

<form class="submitForm" action="{{ route('update_automatic_direct') }}" method="post" id="frm-add-direct[{{$i}}]">

изменить ваш ввод на

<input type="text" name="direct_page_id" id="direct-page-id[{{$i}}]" value="{{$i}}">

используйте этот класс формы для отправки ваших данных

 $('.submitForm').on('submit' , function(e){
        e.preventDefault();
        var data = $(this).serialize();
        var url = $(this).attr('action');
        var post = $(this).attr('method');
        var form = $(this);
        var id = form.find('[name="direct_page_id"]').val();//get the id of the element based on the submitted form


        console.log(id);
        $.ajax({
            type : post,
            url : url,
            data : data,
            dataTy: 'json',
            success:function(data)
            {
                alert(data);
                form.find("#addDirect").modal('hide');
            }
        });
    });

Я предлагаю вам лучше использовать фактический идентификатор учетных записей, которые вы сохранили в базе данных