如何在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

为表格使用一个类

<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');
            }
        });
    });

我建议您最好使用存储在数据库中的帐户的实际ID

Answer 2

您不需要像id =“ frm-add-direct [{{$ i}}]”那样编写ID，只需使用数据属性即可。

在jquery中，您应该使用data属性在HTML中保存ID或任何类型的数据。 因此您可以为每种表单的ID提供一个通用的class和data属性，如下所示：

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

并通过此脚本获取单击的表单ID：

$('.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');
        }
    });
});