The moose likes HTML, CSS and JavaScript and the fly likes How to create textboxes dynamically? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to create textboxes dynamically?" Watch "How to create textboxes dynamically?" New topic

How to create textboxes dynamically?

Anu satya
Ranch Hand

Joined: Mar 17, 2005
Posts: 146
Hi All,
I am developing a web page using HTML,JSP and JAVAScript.

Problem description:
There is a given number. Say "amount"
User has to enter numbers in the textbox provided. If the user entered value in the text box is equal to the "amount", then user is taken to the next page. OTherwise,
1. If Value entered in the textbox is greater than "amount". error/alert message is displayed. and user is not allowed to navigate to the next page.
2. If value entered in the textbox is less than "amount", another textbox has to be displayed(dynamically) to enter the balance amount.....

So, this loop goes on till the sum of values in the textboxes becomes equal to "amount".

How to create these textboxes dynamicall? only when sumof values in the textboxes are less than a given number("amount")?

Any one please help. Thanks for your time and help.

With Regards,
Abrahim Daver
Ranch Hand

Joined: Aug 06, 2004
Posts: 69
Well,If you are using table with an id to put textfield, the you can use that id of table to add a row and data in that table, and in that td, you can put textfield, which has same name as your first textfield. Now while comparing the amount, you will get array of textfield values. From which you can get values to add and compare. Hope this will help.

You can use following javascript function for adding the row dynamically

var tbl = document.getElementById("tableId");
tbody = tbl.getElementsByTagName("TBODY")[0];
row = document.createElement("<tr>");
td1= document.createElement("<td>");
ele1 = document.createElement("<input type='text' name='textFieldName'>");


Anu satya
Ranch Hand

Joined: Mar 17, 2005
Posts: 146
Thank you for the help.
I could able to display the text box. I have few doubts in this:
1)Second row of textboxes are displayed after submit button, but, i want to display them before submit button.
2)How do i get array of textelements to compare?
3)i am finding dificulties to sum the values.
Can anyone please help me in this regard?

Thanks for your time and help
Abrahim Daver
Ranch Hand

Joined: Aug 06, 2004
Posts: 69
You can make two tables, having separate ids, one for TextFields and another for Submit button. There, it requires to be aligned properly.
Now regarding getting array of textfields, you can get lengths of elements of same name using document.forms[0].elements['textFieldName'].length,
and loop throught it, using document.forms[0].elements['textFieldName'][i].value, where i is an integer, incrementing by one.
Hope this will help
Anu satya
Ranch Hand

Joined: Mar 17, 2005
Posts: 146
Thank you Abrahim. Thanks for your help
Consider Paul's rocket mass heater.
subject: How to create textboxes dynamically?
Similar Threads
Search Page - question
saving the details in when i click next and previous buttons
dynamic Textbox validations pls help
Dynamically build a form
URGENT! Mulitbox problem!!