/    Sign up×
Community /Pin to ProfileBookmark

How to dynamically generate text fields on the same html page based on user input

Copy linkTweet thisAlerts:
Sep 06.2012

Hi,

I have HTML code where in I need to do the below:

1) I need to ask the user to enter a number – this number will determine how many text fields I need to show up to the user.

For example:

“Enter number of names of people you want to enter:”

If the user enters 5, I need to display 5 text fields below this line on the HTML page.

Can someone guide me how to do this ?

I am working with HTML5, Javascript and Java Servlets.

Thanks in advance.

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@DevFreakauthorSep 06.2012 — I used Javascript as below:

var val= document.getElementById("textfieldid").value;

var i=1;

for(i=1;i<val;i++)

{

document.write("<td>Enter name</td>");

document.write("<input type = "text" id="name1">");

}


but this wrote the data on a new page. Can anyone suggest a better and perhaps clearer way ?
Copy linkTweet thisAlerts:
@DevFreakauthorSep 06.2012 — I managed to figure this out.

Just to let people know this is a sample code (I was just testing this, so the data I am printing may seem illogical)

function showdata()

{

var val= document.getElementById("nofield").value;

var tab = document.getElementById("table1");

var i=1;
for(i=1;i<val;i++)
{
var oRow = tab.insertRow(-1);
var oCell=oRow.insertCell(-1);
oCell.innerHTML = "<b>Here I am";
var oCell=oRow.insertCell(-1);
oCell.innerHTML = "<b>Here I am";
var oCell=oRow.insertCell(-1);
oCell.innerHTML = "<b>Here I am";
}
}

My HTML file holds :

<b> How many names to be entered ?
<input type="number" name="nofield" id="nofield" value="1" required="required" width="7" onchange="showdata()"/>
<br>

<table border="0" id = "table1">
</table>
×

Success!

Help @DevFreak spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...