Question

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

$(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成功添加的任何数据-为什么？

Answer 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);

稍后我会担心布局。

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

1 个答案: