Question

在我的laravel 5.5项目中，每个职位都有很多问题，每个问题都有很多答案，每个答案都可以接受或不可接受。我正在编写一个负责添加问题的视图。这是我的初始形式：

 <form action="{{route('questions.store')}}" class="form" id="form" method="POST" enctype="multipart/form-data">
            {{csrf_field()}}
            <div class="q">
                <div class="box">
                    <div class="box-header">
                        <strong>سوال</strong> <strong id="number">1</strong>
                    </div>
                    <div class="question">
                        <div class="input-group">
                            <span class="input-group-addon">؟</span>
                            <input type="text" class="form-control" placeholder="متن سوال" name="question">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon"><input value="1" type="checkbox"></span>
                            <input type="text" class="form-control" required placeholder="  پاسخ اول" >
                            <span class="input-group-addon"><input value="0" type="checkbox"></span>
                            <input type="text" class="form-control" placeholder="  پاسخ دوم">
                            <span class="input-group-addon"><input value="0" type="checkbox"></span>
                            <input type="text" class="form-control" placeholder="  پاسخ سوم">
                            <span class="input-group-addon"><input value="0" type="checkbox"></span>
                            <input type="text" class="form-control" placeholder="  پاسخ چهارم">
                        </div>
                    </div>
                </div>
            </div>
                <div>
                    <button type="button" id="add" class="btn btn-warning">more questions</button>
                    <button type="submit" class="btn submit btn-primary">submit</button>
                </div>

        </form>

我添加了一个脚本，因此每当用户点击更多问题时，另一个问题就会添加到表单中：

<script>
        var number = 1;
    $('#add').click(function () {
        number = number + 1;
        $('.q').append($('<div class="box">\n' +
            '                        <div class="box-header">\n' +
            '                            <strong>سوال</strong>  <strong id="number">'+ number + '</strong>\n' +
            '                        </div>\n' +
            '                    <div class="">\n' +
            '                        <div class="input-group">\n' +
            '                            <span class="input-group-addon">؟</span>\n' +
            '                            <input type="text" class="question form-control" placeholder="متن سوال">\n' +
            '                        </div>\n' +
            '                        <div class="input-group">\n' +
            '                            <span class="input-group-addon"><input value="1" type="checkbox"></span>\n' +
            '                            <input type="text" class="answer form-control" required placeholder="  پاسخ اول">\n' +
            '                            <span class="input-group-addon"><input value="0" type="checkbox"></span>\n' +
            '                            <input type="text" class="answer form-control" placeholder="  پاسخ دوم">\n' +
            '                            <span class="input-group-addon"><input value="0" type="checkbox"></span>\n' +
            '                            <input type="text" class="answer form-control" placeholder="  پاسخ سوم">\n' +
            '                            <span class="input-group-addon"><input value="0" type="checkbox"></span>\n' +
            '                            <input type="text" class="answer form-control" placeholder="  پاسخ چهارم">\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                </div>'));
    })
</script>

每个复选框都应确定答案是否可以接受。现在我想使用ajax提交此表单。但是我不知道如何在请求中收集所有问题及其答案，以便我可以在控制器中访问它们。

Answer 1

如果我理解的话。您需要动态添加元素值吗？

如果是，您可以使用以下代码;

$("#form").submit(function() {
    $.ajax({
        data: $("form").serialize(),
        ...rest
    });
});

在上面的代码中，这一行data: $("form").serialize()提供了使用ajax发送到控制器的所有表单元素。

我认为，这将解决您的问题。

laravel 5.5：使用ajax发布包含多个动态创建字段的表单

1 个答案: