Question

下面是一个简化示例，演示了我遇到的问题。百分之百的代码发布在下面。

三个文件一起工作：testa.php，testb.php和testc.js。（FWIW，testa.php可以作为index.php，但这只是一个演示）

概述：

TESTA.PHP

当用户点击锚标记时，将值发送到testb.php
在FORM结构
表单已提交给自己，因此它会打印$ _POST数据 -

TESTB.PHP

通过ajax
输出与收到的值对应的表
（在这个例子中，我删除了如何使用接收值，但仍然保留了这个结构，因为它影响了testc.js中的jQuery）

TESTC.JS

使（部分）工作的jQuery

问题1：如果用户添加了多个“文档”（即行），则POST数据中只会显示最后一个文档的数据。。

问题2：DocTitle和FileName ID（dt1，fn1）不会出现在DOM中。在DOM中，它们的ID正确递增（dt11，dt12，dt13等），但是当POST时只有一个通过并且它没有递增。（在添加几个文档后使用firebug检查表元素。

问题3：在添加新文档时单击“选择文件”锚点时，第一次单击不会“占用”。有关这个的任何想法吗？

TESTA.PHP

<?php   
    If (empty($_POST)===false) {
        echo '<pre>';
        print_r($_POST);
        echo '</pre>';
        die();
    }
?>
<html><body>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-custom-file-input.js"></script>
<script type="text/javascript" src="testc.js"></script>
<br />

Project*:<br />
<a href="#" id="project_pick">Click Me</a>

<form action="" method="post">
    <div id="reportstable">
    </div>
</form>

</body></html>

TESTB.PHP

<?php
    $project_id = $_POST['project_id'];

    if ($project_id == 5) {
        echo '
            <table id="DocTable">
                <tr>
                    <th width="150">Document Title</th>
                    <th width="150">File Name</th>
                </tr>
                <tr name="tr2" id="tr2" style="display:none;">
                    <td><input type="text" name="dt1" id="dt1"></td>
                    <td>
                        <input type="hidden" name="fn1" id="fn1">
                        <span id="sp1"><a href="#" id="ah1">choose file</a><span>
                    </td>
                </tr>
            </table>
            <br />
            <a href="#" id="add_row">add document</a><br />
            <br />
            <input type="submit" name="submit" id="submit_it" value="Submit">
        ';
    }

TESTC.JS

$(function(){

var count = 1;
//*******************************************************************    
$('#project_pick').click(function(e) {
    $(this).hide();
    $.ajax({
        type: "POST",
        url: "testb.php",
        data: "project_id=5",
        success:function(data){
            $('#reportstable').html(data);
        }
    });
});
//*******************************************************************    
$(document).on('click','#ah11',function() {
    $(this).file().choose(function(e, input) {
        $('#fn11').val(input.val());
        $('#sp11').html(input.val());
        $('#sp11').css('color','grey');
    });
});
//*******************************************************************    
$(document).on('click','#ah12',function() {
    $(this).file().choose(function(e, input) {
        $('#fn12').val(input.val());
        $('#sp12').html(input.val());
        $('#sp12').css('color','grey');
    });
});
//*******************************************************************    
$(document).on('click','#ah13',function() {
    $(this).file().choose(function(e, input) {
        $('#fn13').val(input.val());
        $('#sp13').html(input.val());
        $('#sp13').css('color','grey');
    });
});
//*******************************************************************    
$(document).on('click', '#add_row', function() {
    $("table#DocTable tr:nth-child(2)")
        .clone()
        .show()
        .find("a, input, span, tr").each(function() {
            $(this)
                .val('')
                .attr('id', function(_, id) {
                    return id + count;
                    });
        })
        .end()
        .appendTo("table");

    count++;
    if (count == 4) {
        $('#add_row').prop('disabled', 'disabled');
    }
}); //end fn add_row
//*******************************************************************    
$(document).on('click', '#submit_it', function() {
    alert('This will be submitted now');
});
//*******************************************************************
});

Answer 1

您的javascript中似乎只更改了id属性的值。但是，当您发布表单时，id属性无关紧要且未发布，您需要使用name属性。

所以，在你改变id的地方，你真的应该改变名字（如果你真的需要它们，那就是id，因为它们需要是唯一的。）

然而，一个更容易的解决方案是将名称用于数组，例如：

<input type="text" name="dt[]">

如果使用这些名称复制/克隆元素并发布表单，您将在$_POST['dt']中获得一个数组。

表单中的jQuery clone表行不提交克隆字段

1 个答案: