adding input box dynamically when filling the other input box - php

Question

i have a form like this
<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>
what i want is when user after filling the comment box ,when they press enter then dynamically another input box has to display with comment label by using javascript.
can anyone help me to write the code...

Answer 1

Try this my friend:
<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>

Answer 2

First of all your all the input names in your form are the same (name="username"), you have to give each input a unique name.
so change comment input to
<TR id="comment">
<TD>Comment</TD>
<TD><INPUT type="text" value="" name="comment[]" title="Enter Comment"/><TD>
</TR>
note that i added id to the TR so it'll be easier to latch on to it using jquery and i also changed the input name to be comment[] since if you add a new comment to the dom you'll have a comment array.
if the new comment should have a new name like : 'comment2', you can change it to be just 'comment'
Now, using Jquery do the following:
$(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);
}
}
});
let me know if that helped or if you need more info.