Question

我有一个动态表单，当用户在表单1中输入数字时，当用户按Tab键或转到下一个选项卡时，它会创建一个动态表单，它将在表单1下面创建一个动态表单，用户可以输入数据和日期并附加文件。

每个时间用户在表单1中输入一个数字并按Tab键，表单1下方将有一个动态表单2，用户可以输入数据，并且应该保留，直到用户用表单2附件数据完成所有表单1字段

我已经设法使用jquery创建它的动态过程，但我遇到的问题是我无法保存这些动态表单数据，因为你可以看到我试过抓取数组数据但是当我使用控制台查看检查时它们会被清空。

我想以这种方式保存这些数据：表单1：textfield 1 - ＆gt; hasmany - ＆gt;表格2（文本字段，日期，文件）然后将此数据发布到php文件以保存和上传文件。

任何想法或解决方案如何实现这一目标？

Jquery部分：

$(function () {

    $('#general').change(function () {
        extracted('general', 'general : ');
    });

    $('#in_uni_level').change(function () {
        extracted('in_uni_level', 'in uni level : ');
    });

    $('#in_section_level').change(function () {
        extracted('in_section_level', 'in section level : ');
    });

    $('#in_country_level').change(function () {
        extracted('in_country_level', 'in country level :‌ ');
    });

    function extracted(selection, Gtitle) {

        var brief = [];
        var contributor = [];
        var datepick = [];
        var file = [];
        $('#dynamic_table').find('[name=brief]').each(function () {
            brief.push(this.value);
        });
        $('#dynamic_table').find('[name=contributor]').each(function () {
            contributor.push(this.value);
        });
        $('#dynamic_table').find('[name=datepick]').each(function () {
            datepick.push(this.value);
        });
        $('#dynamic_table').find('[name=file]').each(function () {
            file.push(this.value);
        });
        console.log(brief, contributor, datepick, file);
        //                $("#dynamic_table").empty();//clear dynamic table data each time focus change

        console.log($('#' + selection).val());

        var count = $('#' + selection).val();
        if (count > 0) {

            var nextStep = $(document.createElement('tbody'));

            var Dynamic_form_header =
                '<tr>' +
                '<th>' + Gtitle + '</th>' +
                '<th></th>' +
                '<th></th>' +
                '<th></th>' +
                '</tr>' +
                '<tr>' +
                '<th>Short Brief</th>' +
                '<th>Contributers count</th>' +
                '<th>date</th>' +
                '<th>Related doc</th>' +
                '</tr>';

            var Dynamic_form_body = '';
            for (var i = 0; i < count; i++) {
                Dynamic_form_body +=
                    '<tr>' +
                    '<td><input type="text" name="brief[]" id="brief" ' +
                    '</td>' +
                    '<td><input type="text" name="contributor[]" id="contributor"' +
                    '</td>' +
                    '<td><input type="text" name="datepick[]" class="datepicker"' +
                    '</td>' +
                    '<td><input type="file" name="file[]" id="doc"' +
                    '</td>' +
                    '</tr>';
            }
            nextStep.html(Dynamic_form_header + Dynamic_form_body);

            nextStep.appendTo("#dynamic_table");
        }

        // default
        $('#dynamic_table').live('click', function () {
            $('.datepicker').datepicker();

        });
    }



        $("#Submit_form").click(function () {

            $.post("Requests/spc.php", //Required URL of the page on server
                {   // Data Sending With Request To Server
                    Save_Form: true,
                    brief: brief,
                    contributor: contributor,
                    datepick: datepick,
                    file: file,
                },
                function (response) {  // Required Callback Function
                    //======== disable loading for onclick event ==========
                    $("#loading_gif").hide();
                    $("#add_user_btn").removeAttr('disabled');
                    //======== disable loading for onclick event ==========

                    //$("#Response").text(response);
                    if (response == "save") {
                        $("#Response").text("ارسال دعوتنامه  با موفقیت صورت گرفت.").css({color: 'green'});
                    }
                });
        });
});

Html部分：

<form id="form" method="post" action=""
      enctype="multipart/form-data">

    <table class='styled-table' cellspacing='0' width="360"
           border='1'>
        <tr>
            <td>
                <label for="general">general</label>
                <div class="cleaner h10"></div>

                <label for="in_uni_level">in uni level</label>
                <div class="cleaner h10"></div>

                <label for="in_section_level">in section level</label>
                <div class="cleaner h10"></div>

                <label for="in_country_level">in country level</label>
                <div class="cleaner h10"></div>
            </td>
            <td>
                <input type="text" id="general" 
                       name="general"/>
                <div class="cleaner h10"></div>

                <input type="text" id="in_uni_level"
                       name="in_uni_level"/>
                <div class="cleaner h10"></div>

                <input type="text" id="in_section_level"
                       name="in_section_level"/>
                <div class="cleaner h10"></div>

                <input type="text" id="in_country_level"
                       name="in_country_level"/>
                <div class="cleaner h10"></div>
            </td>
        </tr>
    </table>

    <div class="cleaner h30"></div>

    <table class='styled-table' id="dynamic_table"
           cellspacing='0' width="500" border='1'>

    </table>

</form>

<button id="Submit_form">Submit</button>

快照：

Answer 1

您遇到的问题是您没有在第二个表单上为每个字段调用change函数，因此它可以捕获数据以将其推送到数组中。我改变了你的代码，但似乎正在做你想要的。我还添加了一个小提琴。

此外，您可能不希望每次push都change这个值，因为如果用户返回编辑该字段会怎样。它会将它添加到数组而不是替换它。

你也将不得不在这里处理一些你没有实现的多维数组，因为如果用户在第一个表单中选择多于1个，你将需要存储x个数组来与原始请求相关联

$(function () {

  var brief = [];
  var contributor = [];
  var datepick = [];
  var file = [];

    $('#general').change(function () {
        extracted('general', 'general : ');
    });

    $('#in_uni_level').change(function () {
        extracted('in_uni_level', 'in uni level : ');
    });

    $('#in_section_level').change(function () {
        extracted('in_section_level', 'in section level : ');
    });

    $('#in_country_level').change(function () {
        extracted('in_country_level', 'in country level : ');
    });

    $(document).on('change', '#brief', function () {
        brief.push(this.value);
    });

    $(document).on('change', '#contributor', function () {
        contributor.push(this.value);
    });

    $(document).on('change', '#datepick', function () {
        datepick.push(this.value);
    });

    $(document).on('change', '#file', function () {
        file.push(this.value);
    });

    function extracted(selection, Gtitle) {

        $('#dynamic_table').find('[name=brief]').each(function () {
            brief.push(this.value);
        });
        $('#dynamic_table').find('[name=contributor]').each(function () {
            contributor.push(this.value);
        });
        $('#dynamic_table').find('[name=datepick]').each(function () {
            datepick.push(this.value);
        });
        $('#dynamic_table').find('[name=file]').each(function () {
            file.push(this.value);
        });
        console.log(brief, contributor, datepick, file);
        //                $("#dynamic_table").empty();//clear dynamic table data each time focus change

        console.log($('#' + selection).val());

        var count = $('#' + selection).val();
        if (count > 0) {

            var nextStep = $(document.createElement('tbody'));

            var Dynamic_form_header =
                '<tr>' +
                '<th>' + Gtitle + '</th>' +
                '<th></th>' +
                '<th></th>' +
                '<th></th>' +
                '</tr>' +
                '<tr>' +
                '<th>Short Brief</th>' +
                '<th>Contributers count</th>' +
                '<th>date</th>' +
                '<th>Related doc</th>' +
                '</tr>';

            var Dynamic_form_body = '';
            for (var i = 0; i < count; i++) {
                Dynamic_form_body +=
                    '<tr>' +
                    '<td><input type="text" name="brief[]" id="brief" ' +
                    '</td>' +
                    '<td><input type="text" name="contributor[]" id="contributor"' +
                    '</td>' +
                    '<td><input type="text" name="datepick[]" class="datepicker"' +
                    '</td>' +
                    '<td><input type="file" name="file[]" id="doc"' +
                    '</td>' +
                    '</tr>';
            }
            nextStep.html(Dynamic_form_header + Dynamic_form_body);

            nextStep.appendTo("#dynamic_table");
        }

        // default
        $('#dynamic_table').on('click', function () {
            $('.datepicker').datepicker();
        });
    }
});

https://jsfiddle.net/eqrbsgs8/

将多个动态表单存储到对象中，并使用jquery post方法发布和上传

1 个答案: