/    Sign up×
Community /Pin to ProfileBookmark

Adding elements to a form on clicking a button

Copy linkTweet thisAlerts:
Dec 03.2008

Hi All,

Here is my scenario:

I have a button in a form. On clicking the button, it calls a javascript function. I need to add certain elements to the form when i click the button.

Here is my HTML code
</head><body><form name=”form1″><table width=1500><tr bgcolor=”red”><td><input type=”submit” value=”Click me” onClick=funfun()></td><td>Contacting Your Prospects</td></tr>

On clicking the ‘Click me’ button, in the funfun() function, I need to add a text box in the form. How can i do this?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@abesmithDec 03.2008 — try this


[CODE]
<html>
<head>
<title>Dynamic Form</title>
<script type="text/javascript" >
function CreateTextbox()
{
var i = 1;
createTextbox.innerHTML = createTextbox.innerHTML +"<input type=text name='mytext'+ i/>"

}
</script>
</head>
<body>

<form name="form" action="post" method="">
<input type="button" value="clickHere" onClick="CreateTextbox()">
<div id="createTextbox"></div>
</form>
</body>
[/CODE]
Copy linkTweet thisAlerts:
@toicontienDec 03.2008 — You might also want to read this blog post: Cross-Browser JavaScript: Creating DOM Nodes That Set The name Property. Internet Explorer has some goofiness to it when adding form elements. Furthermore, I don't remember if adding form fields via innerHTML actually allows those form fields to be submitted when the form submits. To be safe, stick with standard functions like document.createElement and the appendChild method of a DOM node.
Copy linkTweet thisAlerts:
@Joseph_WitchardDec 04.2008 — Using IF, wouldn't you just be able to document.write some HTML element strings within the body?
Copy linkTweet thisAlerts:
@toicontienDec 04.2008 — Using document.write would work as long as you only want the dynamic form fields created before the page loads. If you need dynamic form fields after the page loads, then you'll need to use DOM methods for creating and appending new DOM nodes.
Copy linkTweet thisAlerts:
@vaishnaviauthorDec 05.2008 — Thanks everyone,

I used the createElement() method to add elements dynamically to the form.

This is what i developed:

<head><title>Prospecting</title>

<script type="text/javascript">

function CreateTextbox()

{

var r = document.createElement('tr');

var ca = document.createElement('td');

var input = document.createElement('input');

var type = document.createAttribute('type');

var value = document.createAttribute('value');

input.setAttribute(type,"text");

input.setAttribute(value,"first value");

var t=document.getElementById('table1234');

ca.appendChild(input);

r.appendChild(ca);

t.appendChild(r);

}

</script></head>

<body>

<form name="form">

<table border="0" cellpadding="0" cellspacing="0" width=100% id="table123">

<tr bgcolor="#990000" id="table1234">

<td length=20 width=2%><INPUT type="button" name="search" onClick="CreateTextbox()"></td>

<td length=1700 width=98%><font face="Verdana" color="#FFFFFF">Contacting Your Prospects</td></tr>


<tr height="2.5" bgcolor="#990000" id="new123">

<td length=20><INPUT type="button" name="search" onClick="CreateTextbox()"></td>

<td length=1700><font face="Verdana" color="#FFFFFF">Type of Business</td></tr>

</form>

</body>

There are two attributes for the <input>, 'type' and 'value'. but only my first attribute 'type' gets appended, but my second attribute 'value' does not works. Any mistake in my code?

For creating a text box, I need to write multiple lines of code which is seen in my function CreateTextbox(). But i need to add many fields like this. So is there any other easy way to achieve this?
Copy linkTweet thisAlerts:
@toicontienDec 05.2008 — This will work fine except if you then need to access those form fields using JavaScript. Internet Explorer has a bug where the document.createElement function doesn't create a form field that registers itself in a <form>'s document object model unless you give Internet Explorer special treatment.

If you do need to access those dynamic form fields using JavaScript, please read this blog post. If not, then disregard it (but maybe read it anyway and just keep that info in the back of your head).
×

Success!

Help @vaishnavi 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.18,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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