下面的表格未提交到数据库。如果我将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/

10-12 07:24
查看更多