/    Sign up×
Community /Pin to ProfileBookmark

how to add form text field dynamically?

Copy linkTweet thisAlerts:
May 01.2003

Hi All:
I am working on a page which requires user input author names for a certain book. When there is more than three authors, the user will be able to click a button and new text fields will appear for additional entries.
I googled and found some sample codes but all of them solve the problem by rewriting the whole page on onclick event. My page is a quite complicated one, so that will not be very practical. Any other solutions? Thank you.
JY

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@khalidali63May 01.2003 — [i]Originally posted by smilecry [/i]

[B]Hi All:

all of them solve the problem by rewriting the whole page on onclick event. My page is a quite complicated one, so that will not be very practical. Any other solutions? Thank you.

JY [/B][/QUOTE]

re-writing a page now adays is very wrong...

assign an id attribute to your form.

<form id="frm_1".....

then you can access is as follows

var frm = document.getElementById("frm_1");

now by using this reference you can add or delete elements..

[b]add a text field[/b]

var textfield = document.createElement("input");

//by default input types are text

//if you want to add attributes

textfield.setAttribute("name","bookName");

The above techiniq will work all of the genereation 6+ browsers
Copy linkTweet thisAlerts:
@smilecryauthorMay 01.2003 — Thanks! I will give it a try.
Copy linkTweet thisAlerts:
@smilecryauthorMay 01.2003 — Khalid:

How to add new text filed to the form? Here is my code according to your explanation. I am really new to Javascript. Thank you ?

JY

<html>

<body>

<form id="frm_1">


input the firstname <input type = "text" name = "firstname"><br>

input the lastname <input type = "text" name = "lastname">

<input type = "button" value = "add new author" onclick=addAuthor()>

</form>

<script language="javascript">

function addAuthor()

{

//then you can access is as follows

var frm = document.getElementById("frm_1");

//now by using this reference you can add or delete elements..

//add a text field

var textfield = document.createElement("input");

//by default input types are text

//if you want to add attributes

textfield.setAttribute("firstname","lastname");

frm.???

}

</script>


</body>

</html>
Copy linkTweet thisAlerts:
@khalidali63May 01.2003 — oops missed to type you need to add that to form as well to be proper.

frm.appendChild(textfield);

Then you can keep calling this method to add more fields..
Copy linkTweet thisAlerts:
@smilecryauthorMay 01.2003 — Khalid:

Thanks a lot. You are really helpful.

Last questions ?

Is there a way to set the text before a textfield and define a change line in the function? I found that whenever I tried document.write('<br>'), it will turn me to a new page.

Is there any detailed online method index for javascript? I am just a spoiled user of Java. ?

Thanks again!

JY
Copy linkTweet thisAlerts:
@khalidali63May 01.2003 — I love java..:-)..

you can try here.Its JavaScript1.5 reference

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/
Copy linkTweet thisAlerts:
@smilecryauthorMay 01.2003 — Thanks!
×

Success!

Help @smilecry 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,
)...