下面的表格未提交到数据库。如果我将jQuery
运行到注释掉,则首先提交第一个表单提交,但是显然我需要使用AJAX
继续提交表单。该过程似乎在以下位置失败:
$(i).submit(function(event) {
谁能指出我要去哪里了?
jQuery / AJAX
$(document).on('click', '#button', function() {
var wrap = $(this).closest('div.form_wrap');
wrap.find('form').each(function() {
var id = $(this).prop('id');
var arr = jQuery.makeArray( "#"+id );
var url = $(this).attr('action');
var type = $(this).attr('method');
var i = $('#'+id);
//var data = $(i).serialize();
//$(i).submit();
console.log(url);
console.log(type);
$(i).submit(function(event) {
var data = {
'name' : $('input[name=weight]').val(),
'reps' : $('input[name=reps]').val(),
'sets' : $('input[name=sets]').val()
};
$.ajax({
type : type,
url : url,
data : data,
dataType : 'json',
encode : true
})
.done(function(data) {
console.log(data);
});
event.preventDefault();
})
});
});
的HTML
<?php $workouts = DB::table('workouts')->where('date', $entry->format('Y-m-d'))->where('user_id', Auth::user()->id)->get(); ?>
<?php $f = 0;?>
@foreach ($workouts as $workout)
<?php $formid="form_".$x."_".$f;?>
{!! Form::open(array('route' => 'w_shared', 'method' => 'POST', 'ID' => $formid)) !!}
{{ csrf_field() }}
{{ Form::hidden('user_id', Auth::user()->id)}}
{{ Form::hidden('date', $entry)}}
{{ Form::hidden('weight', $workout->weight)}}
{{ Form::hidden('exercise', $workout->exercise)}}
{{ Form::hidden('reps', $workout->reps)}}
{{ Form::hidden('sets', $workout->sets)}}
{{ Form::checkbox('share', 1, array('class' => 'form-control'))}}
{!! Form::close() !!}
<tr>
<th>{{$workout->exercise}}</th>
<td>{{$workout->weight}}</td>
<td>{{$workout->reps}}</td>
<td>{{$workout->sets}}</td>
</tr>
<?php $f++; endforeach;?>
路线
Route::post('/w_shared', [
'as' => 'w_shared',
'uses' => 'WController@store'
]);
谢谢
最佳答案
在提交表单的调用之后,添加了on Submit函数。另外,您不必要地重新选择了元素,并且您可能还希望确定数据收集的范围:
$(document).on('click', '#button', function() {
var wrap = $(this).closest('div.form_wrap');
wrap.find('form').each(function() {
var id = $(this).prop('id');
var arr = jQuery.makeArray( "#"+id );
var url = $(this).attr('action');
var type = $(this).attr('method');
var i = $('#'+id); // Or just $(this)
var data = i.serialize();
// setup on submit
i.submit(function(event) {
event.preventDefault();
var formElem = $(event.currentTarget);
var data = {
'name' : formElem.find('input[name=weight]').val(),
'reps' : formElem.find('input[name=reps]').val(),
'sets' : formElem.find('input[name=sets]').val()
};
$.ajax({
type : type,
url : url,
data : data,
dataType : 'json',
encode : true
})
.done(function(data) {
console.log(data);
});
});
// submit form
i.submit();
});
});
您可能还想探索将onSubmit方法声明的设置移到onClick方法之外,并替换为:
.submit(function(){...})
与:
.on('submit', function(){...})
关于javascript - 如何处理具有多个提交和Laravel路由的AJAX表单提交,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39829046/