Member Avatar for thinstaafl

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! :)

<!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>
  • 3 Contributors
  • 2 Replies
  • 215 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by sana3366
Member Avatar for parry_kulk

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,

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

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,

var newdiv = document.createElement('div');
document.forms['example'].appendChild(newdiv);

Hope this helps

Member Avatar for sana3366

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.