单击提交按钮后，如何在 laravel 5.2 中逐行向控制器提交数据？

Question

在ajax的帮助下加入两个table后，我已经带了一些数据，现在我需要在点击提交按钮后逐行提交这些数据。

Serial_no|member_id|member_name|account_no|General_saving|Dps|actions
 1       | 1111111 | zia       | 01010101 |100           |190|submit


 2       | 2222222 |shishir    | 02020202 |100           |200|submit


 3       | 3333333 | shohan    | 03030303 |100           |230|submit

我想点击提交按钮将行数据发送到控制器到数据库。我的 HTML 代码在下面是 blade:

<div class="col-md-12" style="background-color: #EAEAEA">
<div class="form-group col-md-12" id="form-MemberPresentAddress-error">
    <h3>Account Information</h3>               
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
    <th width="50px" style="text-align: center">No</th>
    <th>
        <a href="javascript:ajaxLoad('posting/list?field=MemberId&sort=
{{Session::get("posting_sort")=="asc"?"desc":"asc"}}')">
            Member ID
        </a>
        <i style="font-size: 12px"
           class="glyphicon  {{ Session::get('posting_field')=='MemberId'?
(Session::get('posting_sort')=='asc'?'glyphicon-sort-by-
alphabet':'glyphicon-sort-by-alphabet-alt'):'' }}">
        </i>
    </th>
    <th>
        <a href="javascript:ajaxLoad('posting/list?field=MemberName&sort=
{{Session::get("posting_sort")=="asc"?"desc":"asc"}}')">
            Member Name
        </a>
        <i style="font-size: 12px"
           class="glyphicon  {{ Session::get('posting_field')=='MemberName'?
(Session::get('posting_sort')=='asc'?'glyphicon-sort-by-
alphabet':'glyphicon-sort-by-alphabet-alt'):'' }}">
        </i>
    </th>
     <th>
        <a href="javascript:ajaxLoad('posting/list?field=AccountNo&sort=
{{Session::get("posting_sort")=="asc"?"desc":"asc"}}')">
            Account No
        </a>
        <i style="font-size: 12px"
           class="glyphicon  {{ Session::get('posting_field')=='AccountNo'?
(Session::get('posting_sort')=='asc'?'glyphicon-sort-by-
alphabet':'glyphicon-sort-by-alphabet-alt'):'' }}">
        </i>
    </th>
    <th>
        <a href="javascript:ajaxLoad('posting/list?field=app_form&sort=
{{Session::get("posting_sort")=="asc"?"desc":"asc"}}')">
            General Saving
        </a>
        <i style="font-size: 12px"
           class="glyphicon  {{ Session::get('posting_field')=='app_form'?
(Session::get('posting_sort')=='asc'?'glyphicon-sort-by-
alphabet':'glyphicon-sort-by-alphabet-alt'):'' }}">
        </i>
    </th>
    <th>
        <a href="javascript:ajaxLoad('posting/list?field=passbook&sort=
{{Session::get("posting_sort")=="asc"?"desc":"asc"}}')">
            DPS 
        </a>
        <i style="font-size: 12px"
           class="glyphicon  {{ Session::get('posting_field')=='passbook'?
(Session::get('posting_sort')=='asc'?'glyphicon-sort-by-
alphabet':'glyphicon-sort-by-alphabet-alt'):'' }}">
        </i>
    </th>

    <th width="140px">Actions</th>
</tr>
</thead>
<tbody id="searchShow" class="searchShow">

</tbody>
</table>
<div class="pull-right"></div>
<div class="row" id="totalRecord">

    Total: records

</div>
</div>

我的jquery代码如下：

$(document).ready(function () {
        $(document).on('click', '#searchInfo', function () {
            var DomainName = document.getElementById('DomainName').value;
            var DivisionOfficeId = 
                          document.getElementById('DivisionOfficeId').value;
            var ZoneId = document.getElementById('ZoneId').value;
            var AreaId = document.getElementById('AreaId').value;
            var MonthId = document.getElementById('MonthId').value;
            var YearId = document.getElementById('YearId').value;

            var i = 1;
            var j = 0;

            $('#searchShow').empty();
            $.ajax({
                type: 'get',
                url: 'getSearchinfo',
                data: {'DomainName': DomainName, 'DivisionOfficeId': 
 DivisionOfficeId, 'ZoneId': ZoneId, 'AreaId':AreaId, 'MonthId': MonthId, 
 'YearId': YearId},
                success: function (data) {

                    $.each(data, function (index, subcatObj3p) {
                        $('#searchShow').append('<tr><td style="text-align: 
center" id="'+i+'">' + i + '</td><td style="text-align: center">' + 
subcatObj3p.MemberId + '</td><td style="text-align: center">' + 
subcatObj3p.MemberName + '</td><td style="text-align: center">' + 
subcatObj3p.AccountNo + '</td><td><input style="width:30%" type="text" 
Name="Dps" value="100"></input></td><td><input style="width:30%" type="text" 
Name="Dps" value="'+subcatObj3p.MonthlyInstallment+'"></input></td><td>
<input type="submit" value="submit" id="goDB"></td></tr>');
                        i++;
                        j=i;


                    });
                    // document.getElementById('hidden').value = i - 1;
                    alert(j);
                    $('#totalRecord').val(j);
                },
                error: function () {
                }
            });

        });
    });

这是我的控制器功能：

 public function getSearchinfo(Request $request){

    $DomainName = $request->DomainName;
    $DivisionOfficeId = $request->DivisionOfficeId;
    $ZoneId = $request->ZoneId;
    $AreaId = $request->AreaId;
    $MonthId = $request->MonthId;
    $YearId = $request->YearId;

    $searchInfo = Accountopen::select('*')
                        ->join('members', 'accountopens.MemberId' , '=', 
 'members.MemberId')
                        ->where('members.DomainName', $DomainName)
                        ->orWhere('accountopens.DivisionOfficeId','=', 
 $DivisionOfficeId)
                        ->orWhere('accountopens.ZoneId','=', $ZoneId)
                        ->orWhere('accountopens.AreaId','=', $AreaId)
                        // ->where('accountopens.MonthId', $MonthId)
                        // ->where('accountopens.YearId', $YearId)
                        ->get();

    return response()->json($searchInfo);
}

现在我想点击提交按钮并逐行发送数据。请回应我。我正在使用 laravel 5.2 版本。

Answer 1

为所有 Update / Edit button 或 anchor 提供公共 class 并传递更新行所针对的 ID 值。并参考以下示例：

$('.edit').click(function(){
 alert( $(this).closest('td').attr('id') );
  // make ajax call here
});

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

<table border="1">
  <tr>
    <td id="1">One <a href="javascript:void(0);" class="edit">Edit</a></td>
   </tr>
   <tr>
    <td id="2">Two <a href="javascript:void(0);" class="edit">Edit</a></td>
   </tr>
   <tr>
    <td id="3">Three <a href="javascript:void(0);" class="edit">Edit</a></td>
  </tr>
</table>

使用上面给定的方法并进行相应的 ajax 调用。

Answer 2

$('#searchShow').append('<tr id="row"'+i+'><td style="text-align: 
center" id="'+i+'">' + i + '</td><td style="text-align: center" class="memberId">' + 
subcatObj3p.MemberId + '</td><td style="text-align: center" class="membeName">' + 
subcatObj3p.MemberName + '</td><td style="text-align: center" class="memberAccNum">' + 
subcatObj3p.AccountNo + '</td><td><input style="width:30%" type="text" 
Name="Dps" value="100"></input></td><td><input style="width:30%" type="text" 
Name="Dps" value="'+subcatObj3p.MonthlyInstallment+'"></input></td><td>
<input type="submit" value="submit" id="goDB" attr"'+i+'"></td></tr>');

$(document).on('click', '#goDB', function () {
    var attr = $this.attr();
    var parentId = "#"+row+attr;
    var memberId = $(parentId).child("#memberId").val();
    var memberName = $(parentId).child("#membeName").val();
    var memberAccNum = $(parentId).child("#memberAccNum").val();

    Then here you send post request to save these values to DB
});

您已使每一行都具有唯一 ID 以获取特定的行数据，因此只需创建具有唯一 ID 的动态行并获取其子数据并作为 post 请求传递。

单击提交按钮后，如何在 laravel 5.2 中逐行向控制器提交数据？

how do i submit row by row data to controller in laravel 5.2 after clicking the submit button?

javascript

ajax

jquery

laravel-5.2