在ajax的帮助下将两个表连接起来后,我带来了一些数据,现在我需要在单击Submit按钮之后逐行提交那些数据。
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代码如下所示:
<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版本。
最佳答案
为所有class
或Update / Edit button
提供一个公共anchor
,并传递要更新的行的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调用。