php - 填充另一个输入框时动态添加输入框

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="username"），您必须为每个输入指定一个唯一名称。

所以将评论输入更改为

<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>