複数のサブミットと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(){...})