Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 732

Aug 31st, 2010

How to call dynamically created textboxes

Expand Post »

Please help! I have a form with checkboxes. When one or more checkboxes are clicked, I want the program to dynamically create a div, assign that div an editable text area, then when user clicks submit, I need it to gather the input from EACH textbox and output that to another textbox. I can't figure out what I'm doing wrong. It always tells me "Object Expected" on clicking the checkboxes. If I have it completely wrong, Please bear with me - I'm still learning!

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Text Formatter</title>
<script type="text/javascript">
<!--
 
function checkIt()
{
// Gather dynamically created textbox based on id and assign output to textstring
for (i=0;i<5;i++) {
	var box1=document.getElementById('mytext'[i])
		if (box1.value){
		textstring += box1.value + '\n';
		}
	}	
	document.forms['example'].output.value = textstring;
}
function changeIt()
{
//Create textbox within div 'appndiv' and add number to the name based on which box 
//selected it
 
for (var i=0;i<document.forms['example'].ipinfo.length;i++) {
	if (document.forms['example'].ipinfo[i].checked) {
	var newdiv = document.forms['example'].createElement('div');
	var mydiv = "my_div" + [i];
	newdiv.id=mydiv;
	newdiv.innerHTML = '<br>Please copy and paste additional information here<input type='textarea' id=''mytext' +i')>';
	document.getElementById('appndiv').appendChild(newdiv);
		}
	}
}	
// -->
</script>
</head>
<body vlink="blue">
 
 
<h2>Text Formatter</h2>
 
<form name="example">
<table class="form">
<tr>
<td>IP information Gathered From:</td>
<td><input type="checkbox" name="ipinfo"/>Portal<br />
<input type="checkbox" name="ipinfo" onclick="changeIt()" />Ping<br />
<input type="checkbox" name="ipinfo" onclick="changeIt()" />Trace Route<br />
<input type="checkbox" name="ipinfo" onclick="changeIt()" />Whois Lookup<br />
<div id="appndiv"></div>
</tr>
<tr><tr><td><br><br></td></td></tr>
<tr><td colspan="2"><input type="button" action="#" onclick="checkit(); return false" value="Submit form" />
<tr><tr><td><br><br></td></td></tr>
<tr><td colspan="2"><textarea cols="50" rows="25" name="output">When you hit 'Submit' the user input will be written to this text area</textarea></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Text Formatter</title>
<script type="text/javascript">
<!--

function checkIt()
{
// Gather dynamically created textbox based on id and assign output to textstring
for (i=0;i<5;i++) {
	var box1=document.getElementById('mytext'[i])
		if (box1.value){
		textstring += box1.value + '\n';
		}
	}	
	document.forms['example'].output.value = textstring;
}
function changeIt()
{
//Create textbox within div 'appndiv' and add number to the name based on which box 
//selected it

for (var i=0;i<document.forms['example'].ipinfo.length;i++) {
	if (document.forms['example'].ipinfo[i].checked) {
	var newdiv = document.forms['example'].createElement('div');
	var mydiv = "my_div" + [i];
	newdiv.id=mydiv;
	newdiv.innerHTML = '<br>Please copy and paste additional information here<input type='textarea' id=''mytext' +i')>';
	document.getElementById('appndiv').appendChild(newdiv);
		}
	}
}	
// -->
</script>
</head>
<body vlink="blue">


<h2>Text Formatter</h2>

<form name="example">
<table class="form">
<tr>
<td>IP information Gathered From:</td>
<td><input type="checkbox" name="ipinfo"/>Portal<br />
<input type="checkbox" name="ipinfo" onclick="changeIt()" />Ping<br />
<input type="checkbox" name="ipinfo" onclick="changeIt()" />Trace Route<br />
<input type="checkbox" name="ipinfo" onclick="changeIt()" />Whois Lookup<br />
<div id="appndiv"></div>
</tr>
<tr><tr><td><br><br></td></td></tr>
<tr><td colspan="2"><input type="button" action="#" onclick="checkit(); return false" value="Submit form" />
<tr><tr><td><br><br></td></td></tr>
<tr><td colspan="2"><textarea cols="50" rows="25" name="output">When you hit 'Submit' the user input will be written to this text area</textarea></td></tr>
</table>
</form>
</body>
</html>

Similar Threads

Call dynamically created form items. in JavaScript / DHTML / AJAX
Dynamically created textfield's values doesn't appear in POST data in firefox in PHP
setting dynamically created values to Formbean in Java
HELP -- assign a dynamically created LinkButton to a string value in ASP.NET
Giving focus to dynamically created textboxes in C#

thinstaafl

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Aug 2010

Permalink

Sep 3rd, 2010

Re: How to call dynamically created textboxes

First in the code posted above there are syntax errors at line 29. Since you are assiging a string to a variable and that string has single quotes you have to escape them correctly as follows,

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
newdiv.innerHTML = '<br>Please copy and paste additional information here<input type=\'textarea\' id=\'mytext\''+i+'\')>';
newdiv.innerHTML = '<br>Please copy and paste additional information here<input type=\'textarea\' id=\'mytext\''+i+'\')>';

Now on line 26 you are trying to create a new element as

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
var newdiv = document.forms['example'].createElement('div');
var newdiv = document.forms['example'].createElement('div');

But you cannot create a new element on form element. You will have to create a new element on document and than append it as a child to form element as follows,

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
var newdiv = document.createElement('div');
document.forms['example'].appendChild(newdiv);
var newdiv = document.createElement('div');
document.forms['example'].appendChild(newdiv);

Hope this helps

parry_kulk

Sponsor

Reputation Points: 26

Solved Threads: 41

Junior Poster

Offline

166 posts
since Jan 2007

Permalink

Sep 28th, 2010

Re: How to call dynamically created textboxes

Translation.pk have expert translators for many languages including

Arabic translation, English Translation, check republic, French

translation, German Translation, Italian Translation, Japanese

Translation, Russian Translation, Spanish Translation, Dutch

Translation, Greek Translation, Hindi Translation, Korean Translation,

Polish Translation, Portuguese Translation and in many more languages.

I found best Arabic translators at

http://www.translation.pk/arabic-translation.html

Regards,
SANA SALEEM-16628

sana3366

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Sep 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Dropdown search script...

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: how to make td content editable

DaniWeb Message

Cancel Changes

User Name
Password