如何使用多個提交和Laravel路由處理AJAX表單提交

Question

以下表單未提交到數據庫。如果我運行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' 

]); 

感謝

Answer 1

在提交表單的調用之後添加了提交函數。此外，你unneccesarily重新選擇的元素，你可能還需要範圍的數據收集：

$(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) { 
 
\t event.preventDefault(); 
 
\t 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);   
 
       });  
 
\t }); 
 

 
// submit form 
 
\t i.submit(); 
 
    }); 
 

 
});

您可能還需要探索移動的onsubmit方法聲明的設置外的onClick方法，以及替換：

.submit(function(){...}) 

與：

.on('submit', function(){...})