AJAXを使用してIDで複数のフォームを送信

Question

私はIDでAJAXを使用して複数のフォームを送信したいと考えています。そのIDは以下のjQueryを使用して検索され生成されます。各フォームはもちろん、変数iによって現在作成されている個々の一意のIDを持ちます。

 <script> 
$(document).on('click', '#button', function() { 

    var wrap = $(this).closest('div.form_wrap'); 

    wrap.find('form').each(function() { 
     var id = $(this).prop('id'); 
     var i = $('#'+id); 
     console.log(i); 
    }); 

}); 
</script> 

HTML

<?php $f = 0;?> 
@foreach ($workouts as $workout) 
<?php $formid="form_".$x."_".$f;?> 
{!! Form::open(array('route' => 'workoutshared.store', '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;?> 

UPDATE

<script> 
$(document).on('click', '#button', function() { 

    var wrap = $(this).closest('div.form_wrap'); 

    wrap.find('form').each(function() { 
     var id = $(this).prop('id'); 
     var i = $('#'+id); 
     console.log(i); 
     $(i).submit(function() { 
     var that = $(this), 
      url = that.attr('action'), 
      type = that.attr('method'), 
      data = {}; 

     that.find('[name]').each(function(index, value) { 
      var that = $(this), 
       name = that.attr('name'), 
       value = that.val(); 

      data[name] = value; 
     }); 

     $.ajax({ 
      url: url, 
      type: type, 
      data: data, 
      success: function(response) { 
       console.log(response); 
      } 
     }); 

     return false; 
    }); 
    }); 

}); 

</script> 

Answer 1

は、あなたが使用して、すべてのフォームを提出することができます：

wrap.find('form').each(function() { 
var id = $(this).attr('id'); 
var i = $('#'+id); 
    $(i).submit(function() { 
     var that = $(this), 
      url = that.attr('action'), 
      type = that.attr('method'), 
      data = {}; 

     that.find('[name]').each(function(index, value) { 
      var that = $(this), 
       name = that.attr('name'), 
       value = that.val(); 

      data[name] = value; 
     }); 

     $.ajax({ 
      url: url, 
      type: type, 
      data: data, 
      success: function(response) { 
       console.log(response); 
      } 
     }); 

     return false; 
    }); 
}); 

明らかにこれを使用すると、フォームですでに使用されているデータが取得され、現在のメソッドで現在のアクションに送信されます。

GETとPOSTと異なる送信場所（アクション）を使用している場合、基本的にこれは機能します。

編集：私はまた、（）（.ATTRする）jQueryのドキュメントに応じ.prop変更：http://api.jquery.com/attr/ .prop（）このシナリオでは、正しい使い方ではない