使用 JSON 的动态引导表/表单答案

【问题标题】：Dynamic Bootstrap Table/Form using JSON使用 JSON 的动态引导表/表单
【发布时间】：2018-10-17 21:11:31
【问题描述】：

我正在使用以下代码在表格内生成动态表单（要求使用引导表格以实现站点范围内的一致布局）。

$(document).ready(function() {
    $('select.changeLanguage').change(function(){

        $("#ValuesFromDB").empty();
        $.ajax({
                type: 'POST',
                url: '/includes/admin/return.php',
                data: {LanguageSelectedDropdown: $('select.changeLanguage').val()},
                dataType: 'json',
                success: function (data) {
                $('#divid').show();  //Show the hidden div

                $.each(data, function (index, item) {
                    var eachrow = ""
                         + '<tr><td><label for=' + item[0] + '>' + item[0] + '</label></td>'
                         + '<td id="autosubmit"><input type="text" class="form-control" id="' + item[1] + '" placeholder="' + item[1] + '" onkeyup="submit()"></td></tr>'
                         + '';  // placeholder (item 88)
                $('#ValuesFromDB').append(eachrow)

                });  // END EACH ROW FUNCTION       
            }  // END SUCCESS   
        });  // END AJAX
    });  // END CHANGE FUNCTION
}); // END DOCUMENT READY

基本概念是我有一个下拉框来选择一种语言。选择后，将查询数据库并将表单与表格一起生成到先前隐藏的 div (#divid) 中。

这一切似乎都在工作，页面看起来生成正确。

/table/form 布局如下；

<div class="container">
    <div class="row">
        <div class="table-responsive">          
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>        
                        <th>Original</th>
                        <th>Translation</th>
                    </tr>
                </thead>
                    <form id="languageset"> 
                    <tbody id="ValuesFromDB">
                    </tbody>
                    </form>
            </table>
                <button type="submit" id="submit" class="btn btn-default"><?php echo lang('Save Changes'); ?></button>  
        </div>
    </div>  
</div>

但是，当我尝试使用以下方式提交表单时，我认为设置方式没有任何问题；

  $(function () {
        $('#languageset').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
            type: 'post',
            url: '/includes/admin/return2.php',
            data: $('#languageset').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
        });
      });

除了警报之外什么都没有发生。

深入研究一下，生成的源代码显示；

<div class="container">
    <div class="row">
        <div class="table-responsive">          
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>        
                        <th>Original</th>
                        <th>Translation</th>
                    </tr>
                </thead>
                    <form id="languageset"></form>
                    <tbody id="ValuesFromDB"><tr><td><label for="field1">Value1</label></td><td id="autosubmit"><input class="form-control" id="field1" placeholder="field1" onkeyup="submit()" data-cip-id="cIPJQ342845640" type="text"></td></tr>
                    <tr><td><label for="field2">Value2</label></td><td id="autosubmit"><input class="form-control" id="field2" placeholder="field2" onkeyup="submit()" data-cip-id="cIPJQ342845641" type="text"></td></tr></tbody>  
            </table>
                <button type="submit" id="submit" class="btn btn-default">Save Changes</button> 
        </div>
    </div>  
</div>

所以，问题...生成的源代码中的表单似乎正在打开然后关闭，而不包含我在 AJAX 成功中附加的任何数据 - 为什么？

【问题讨论】：

标签： jquery ajax twitter-bootstrap

【解决方案1】：

引导表格式有一些有趣的地方。我重新设计了要在 DIV 中设置的表单，现在一切正常。

        $.each(data, function (index, item) {
            var eachrow = 
                   '<div id="' + item[0] + '-group" class="form-group">'
                 + '<label for=' + item[0] + '>' + item[0] + '</label>'
                 + '<input type="text" class="form-control" name="' + item[0] + '" id="' + item[0] + '" value="' + item[1] + '">'
                 + '</div>';
        $('#ValuesFromDB').append(eachrow);

我稍后会担心布局。

【讨论】：