在填写其他输入框时动态添加输入框

Question

我有一个这样的表单

<FORM method="post">
<TABLE>
<TR>
    <TD>Username</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD>
</TR>
<TR>
    <TD>Age</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter Age"/><TD>
</TR>
<TR>
    <TD>City</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter City"/><TD>
</TR>
<TR>
    <TD>Comment</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter Comment"/><TD>
</TR>
</TABLE>
</FORM>

我想要的是当用户填写评论框后，当他们按下回车，然后动态另一个输入框必须显示评论标签使用javascript。

有没有人能帮我写代码...

Answer 1

首先，表单中的所有输入名称都是相同的(用户名“name=”)，您必须为每个输入指定一个唯一的名称。

因此将注释输入更改为

<TR id="comment">
    <TD>Comment</TD>
    <TD><INPUT type="text" value="" name="comment[]" title="Enter Comment"/><TD>
</TR>

请注意，我将id添加到TR中，以便使用jquery更容易地抓住它，并且我还将输入名称更改为comment[]，因为如果您向dom添加新注释，您将拥有一个注释数组。

如果新的评论应该有一个新的名称，比如：'comment2'，你可以把它改为仅仅是‘评论’。

现在，使用Jquery执行以下操作：

$(document).keypress(function(e) {
    //catch enter event
    if(e.which == 13) {
         var $comment = $('#comments);
        //check that the user entered something in the comment input
        if($comment.find('input').val().length > 0)
        {
            //create new comment element and attach it to DOM
            var $newComment = $comment.clone().removeAttr('id');
            $('form table').append($newComment);
        }
    }
});

如果你需要更多信息，请告诉我这是否有帮助。

Answer 2

试试这个，我的朋友：

<FORM method="post">
    <TABLE>
    <TR>
        <TD>Username</TD>
        <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD>
    </TR>
    <TR>
        <TD>Age</TD>
        <TD><INPUT type="text" value="" name="age" title="Enter Age"/><TD>
    </TR>
    <TR>
        <TD>City</TD>
        <TD><INPUT type="text" value="" name="city" title="Enter City"/><TD>
    </TR>
    <TR>
        <TD>Comment</TD>
        <TD><INPUT class="comment" type="text" value="" name="comment[]" title="Enter Comment"/><TD>
    </TR>
    </TABLE>
</FORM>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function(){
        $('.comment').live('keydown', function(e){
            $field = $(this);
            // capture enter key being pressed
            if (e.which == 13)
            {
                $html = $(this).parents('tr').clone();
                $html.find('input').val('');
                $html.appendTo($field.parents('table'));
            }
        });
    });
</script>