I've never coded in javascript before, so bare with me please. What i have is a form in mysql that consists of a label with a textfield. Like this, where 'textfield' denotes an actual textfield: Item 1 textfield What i need to do is once the tab key is pressed inside the textfield box, it will have to create a new row below identical to the previous one but increment the number in the label field, so it would like this: Item 1 textfield Item 2 textfield As long as the user keeps hitting the tab key in the last textfield, a new row will keep getting incremented to look like this: Item 1 textfield Item 2 textfield Item 3 textfield Item 4 textfield Item 5 textfield . . . Item n textfield Please someone advise on how i should go about doing this! Thanks.
lost, There are MANY MANY ways to do something like this, so you should start researching and try to learn all you can about DHTML. Here's a little example to get you started. It is very rudimentary, and probably not the way I would do it in a production environment, but it works nonetheless: <html> <head> <title>Add Textboxes Dynamically Example</title> <script language="Javascript" type="text/javascript"> var numBoxes = 1; // Number of textboxes on page function addTextBox() { // Increase the number of textboxes numBoxes++; // Add the textbox to the Inner HTML of our TD document.getElementById("textfields").innerHTML += 'Item '+numBoxes+': <input type="text" name="textbox'+numBoxes+'" value="" onkeydown="if (event.keyCode==9) { addTextBox(); }"><br>'; // Set focus the textfield after the browser has a chance to add it setTimeout('document.forms[0].elements["textbox"+numBoxes].focus();',100); } </script> </head> <body> <form method="post" action="submit.php"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td id="textfields"> Item 1: <input type="text" name="textbox1" value="" onkeydown="if (event.keyCode==9) { addTextBox(); }"><br> </td> </tr> <tr> <td><input type="submit" value="Submit"></td> </tr> </table> </form> </body> </html> Code (markup):
Thanks Durango so much. But I still need more help...can you take a look and see what i'm doing wrong please? I need to expand on what you've provided to me. What i need is this: Item 1 Description TEXTFIELD Part Number TEXTFIELD Item 2 Description TEXTFIELD Part Number TEXTFIELD Item 3 Description TEXTFIELD Part Number TEXTFIELD Item 4 Description TEXTFIELD Part Number TEXTFIELD . . . Item n Description TEXTFIELD Part Number TEXTFIELD So here is what i did to the addNewRow method... <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript" TYPE="text/javascript"> var numItems = 1; // Number of Items on page function addNewRow() { // Increase the number of items numItems++; // Add the textbox to the Inner HTML of our TD document.getElementById("textfields").innerHTML += 'Item '+numItems+' <BR>Description <INPUT TYPE="text" NAME="textfield2" VALUE="" Part Number <INPUT TYPE="text" NAME="pnotextfield" VALUE="" ONKEYDOWN="if (event.keyCode==9) { addNewRow(); }"><BR>'; // Set focus the textfield after the browser has a chance to add it setTimeout('document.forms[0].elements["textbox"+numItems].focus();',100); } </SCRIPT> </HEAD> </HTML> What the output looks like is this: Item 1 Description (this moves down one row each time) Part Number TEXTFIELD Item 2 Description TEXTFIELD Item 3 Description TEXTFIELD Item 4 Description TEXTFIELD Item n Description TEXTFIELD
You didn't close your Description input tag. It should be this: document.getElementById("textfields").innerHTML += 'Item '+numItems+' <BR>Description <INPUT TYPE="text" NAME="textfield2" VALUE=""> Part Number <INPUT TYPE="text" NAME="pnotextfield" VALUE="" ONKEYDOWN="if (event.keyCode==9) { addNewRow(); }"><BR>'; Code (markup):
Thanks again, I knew it was something small. I do have a question though...i've been reading up on some of DHTML...and i can't figure out to format the new row of fields. I have the first one that is created by default looking like this: <TABLE BORDER="0" CELLSPACING="7" CELLPADDING="0"> <TR> <BR> <TD ALIGN=center><B><FONT SIZE=3>Item 1</TD></B></FONT> </TR> <TR> <TD ALIGN=left COLSPAN=30><FONT SIZE=2><SIZE=30>Description <INPUT TYPE="text" NAME="textfield1" VALUE="" </TD></FONT></SIZE> <TD ID="textfields" ALIGN=left COLSPAN=30><FONT SIZE=2><SIZE=30>Part Number <INPUT TYPE="text" NAME="pnotextfield" VALUE="<?php if(isset($_POST['pnofield'])) echo $_POST['pnofield'];?>" ONKEYDOWN="if (event.keyCode==9) { addNewRow(); }"><BR></TD></FONT></SIZE> </TR> Code (markup): And then for the method addNewRows, you've seen what i have. However, the formatting is all messed up! See attachment please.
I figured it out, i had messed up the aligns, heres the correct format <TABLE BORDER="0" CELLSPACING="7" CELLPADDING="0"> <TR> <BR> <TD ALIGN=left><B><FONT SIZE=3>Item 1</TD></B></FONT> </TR> <TR> <TD ID="textfields" ALIGN=left COLSPAN=30><FONT SIZE=2><SIZE=30>Description <INPUT TYPE="text" NAME="textfield1" VALUE="" </FONT></SIZE> <FONT SIZE=2><SIZE=30>Part Number <INPUT TYPE="text" NAME="pnotextfield" VALUE="<?php if(isset($_POST['pnofield'])) echo $_POST['pnofield'];?>" ONKEYDOWN="if (event.keyCode==9) { addNewRow(); }"><BR></TD></FONT></SIZE> </TR> Code (markup):
i have this method: document.getElementById("textfields").innerHTML += '<B><FONT SIZE=2>Item '+numItems+' '+ '</B>Barcode <INPUT TYPE="text" NAME="textfield2" VALUE="" > '+ '<A HREF="cca-assembly.php"><IMG SRC="C:/Server/Apache2/htdocs/Images/down_arrow.gif" HEIGHT=19 WIDTH=20 ALIGN=TOP></A><BR></B>'+ 'Description <INPUT TYPE="text" NAME="textfield2" VALUE=""> Part Number <INPUT TYPE="text" NAME="pnotextfield" VALUE=""> '+ 'Serial Number <INPUT TYPE="text" NAME="serialnofield" VALUE"" ONKEYDOWN="if (event.keyCode==9) { addNewItem(); }">'+ '<A HREF="cca-assembly.php"><IMG SRC="C:/Server/Apache2/htdocs/Images/down_arrow.gif" HEIGHT=19 WIDTH=20 ALIGN=TOP> </A><BR>'; Code (markup): and this line is causing an error in my page, i'm not sure why?? setTimeout('document.forms[0].elements["textbox"+numItems].focus();',100); The error message that i'm getting is the following: Error: document.forms[0].elements["textbox" + numItems] has no properties.
i have this method: document.getElementById("textfields").innerHTML += '<B><FONT SIZE=2>Item '+numItems+' '+ '</B>Barcode <INPUT TYPE="text" NAME="textfield2" VALUE="" > '+ '<A HREF="cca-assembly.php"><IMG SRC="C:/Server/Apache2/htdocs/Images/down_arrow.gif" HEIGHT=19 WIDTH=20 ALIGN=TOP></A><BR></B>'+ 'Description <INPUT TYPE="text" NAME="textfield2" VALUE=""> Part Number <INPUT TYPE="text" NAME="pnotextfield" VALUE=""> '+ 'Serial Number <INPUT TYPE="text" NAME="serialnofield" VALUE"" ONKEYDOWN="if (event.keyCode==9) { addNewItem(); }">'+ '<A HREF="cca-assembly.php"><IMG SRC="C:/Server/Apache2/htdocs/Images/down_arrow.gif" HEIGHT=19 WIDTH=20 ALIGN=TOP> </A><BR>'; Code (markup): and this line is causing an error in my page, i'm not sure why?? setTimeout('document.forms[0].elements["textbox"+numItems].focus();',100); The error message that i'm getting is the following: Error: document.forms[0].elements["textbox" + numItems] has no properties.
Try this and see if it works: setTimeout('document.forms[0].elements["textbox'+numItems+'"].focus();',100); Code (markup):
Thanks Durango, but it doesn't work. I'm now getting: "document.forms[0].elements.textbox2 has no properties. Any ideas??
If you're happy with your current code, then maybe you can ignore this advice, but I would recommend scrapping the entire approach. If you have a table, then you can add new rows using the insertRow method. Then from there you'd add cells, and into the cells you could add text boxes using document.createElement('input') The problem with my suggestion is it means you'd need to learn a lot about the document object model in javascript. The code that durango got you started with makes things easier, but I try to avoid using innerHTML as a panacea.