Question

我希望使用AJAX通过ID提交多个表单，使用下面的jQuery找到并生成ID。每个表格当然都有个人唯一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;
    });
});

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

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

编辑：我还根据jquery文档将.prop（）更改为.attr（）：http://api.jquery.com/attr/。prop（）在这种情况下没有正确用法

使用AJAX通过ID提交多个表单

1 个答案: