4

我想允许用户在 Web 应用程序中输入人员列表，然后将它们作为一批提交。每行大致如下所示：

<TR>
    <TD> <INPUT name="person.fname"> </TD>
    <TD> <INPUT name="person.lname"> </TD>
    <TD> <INPUT name="person.birthdate"> </TD>
</TR>

表单以单行空白输入开始，每当用户填写任何字段时，我都希望将新行添加到列表中——即列表按需增长。同样，每当用户清除其中的所有字段时，我希望一行消失。

实现这一点的最简单、最健壮和最可维护的方法是什么？

最后，如何将这个值表提交回服务器？命名每个字段的首选方法是什么，以便服务器可以Person根据输入的值创建实体列表？

4

4 回答 4

4

如果您熟悉 jQuery，则可以使用 .change 处理程序来捕捉它们更改字段。测试它是否是最后一行以及其中是否有数据。如果他们已将所有内容从行中取出，请将其删除。jQuery 有一些很好的方法可以做到这一点，但这完全取决于你想如何编写它。如果是这样，请使用 jQuery 的 .append 函数追加新行。如果您使用 Python 和 cgi_app 并且对每种类型的单元格使用相同的 name 属性，则可以使用 form.getlist('fname[]') 它将返回名称数组。

于 2010-11-15T14:06:10.157 回答
2

命名每个字段的首选方法是什么，以便服务器可以根据输入的值创建人员实体列表？

你可以做：

<TR>
    <TD> <INPUT name="person[fname]"> </TD>
    <TD> <INPUT name="person[lname]"> </TD>
    <TD> <INPUT name="person[birthdate]"> </TD>
</TR>

生成数组“人”

于 2010-11-15T14:16:26.310 回答
0

CSS：

input:not(:first-of-type){
    display:none}

jQuery：

$('input').click(function(){
    $(this).val('');
}).blur(function(){
    if($(this).val().length>1){
        $(this)
            .toggleClass('processed')
            .hide('slow')
            .parents('#person').find('input:not(.processed):first').show('slow'); 
    }
});
$('#person').prepend('Click on blank space to proceed<br/>');

HTML：

<tr>
    <form id=person method=post action='/your_page_on_server'>
        <td><input name="fname" value='Enter the first name'/></td>
        <td><input name="lname" value='Enter the last name'/></td>
        <td><input name="birthdate" value='Enter the birth date'/></td>
        <td><input type=submit value='Submit'/></td>
    </form>
</tr>

我不熟悉服务器端脚本，所以我的回答只是部分。这是一个例子。另外，我建议通过 JS 添加输入验证。

于 2010-11-15T14:35:58.327 回答
0

JQuery 是一个很好的建议，但如果您不想使用它，您可以尝试通过附加索引来生成输入名称。例如：

<TR>
<TD> <INPUT name="person_0.fname"> </TD>
<TD> <INPUT name="person_0.lname"> </TD>
<TD> <INPUT name="person_0.birthdate"> </TD>
</TR>
...
<TR>
<TD> <INPUT name="person_N.fname"> </TD>
<TD> <INPUT name="person_N.lname"> </TD>
<TD> <INPUT name="person_N.birthdate"> </TD>
</TR>

其中“N”是行索引。这种方式可以帮助您通过使用 (ie) $ GET['person '.$i.'fname'], $ GET['person '.$i.'lname']...轻松获取整个行的值。等等。

于 2010-11-15T14:16:29.970 回答