如何序列化动态表单数据以保持最大的UI灵活性?

时间:2017-02-09 09:14:20

标签: javascript html forms

由于我当前项目的性质,我经常发现自己必须创建HTML <form>元素,这些元素必须支持项目的动态添加/删除功能,以便将集合发布到服务器。

我的问题是我发现自己受到表单元素的name属性的限制,因为我必须跟踪索引,例如:Room[1].Tourists[0].Name。例如,我希望从一开始就remove现有的input元素给我带来困难。

我目前正在使用react.js构建这些动态表单,从而实现了极大的灵活性,但我想知道是否有某种方法可以在submit事件上收集表单数据并将其序列化以匹配控制器动作中的预期模型并发布它?

1 个答案:

答案 0 :(得分:0)

好的,所以你只想解决这个问题我认为你被困在你的代码中的某个地方,这就是为什么我在询问示例代码时不用担心这个试试这个:

  <script type="text/javascript">
        $(document).ready(function () {
            $("#btn_submit").on('click', function () {
                $.ajax({
                    type: "POST",
                    url: "Give URL here",
                    async: false,
                    data: $("#FormID").serialize(),
                    success: function (result) {
                        //Do what you want
                    },
                    error: function (response) {
                        //Do what you want
                    }
                });
            });
        });
    </script>