使用 AJAX 按 ID 提交多个表单

Question

我希望使用 AJAX 通过他们的 ID 提交多个表单，ID 是使用下面的 jQuery 找到和生成的。当然，每个表单都有单独的唯一 ID，目前由变量 i 创建。

     <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;?>

更新

<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;
    });
});

显然使用 this 会获取表单中已经使用的数据，并使用当前方法将其提交给当前操作。

因此，如果您使用 GET 和 POST 以及不同的提交位置（操作），这基本上是可行的。

编辑：我还根据 jquery 文档将 .prop() 更改为 .attr()：http://api.jquery.com/attr/ .prop() 在这种情况下不是正确用法