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
  • 239 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by sana3366

Dani AI

Generated

's snippet shows the classic mix of DOM-API misuse and string/quoting bugs that cause "Object expected." correctly flagged the createElement-on-the-form and quoting problems. A small, reliable pattern fixes those issues: create real DOM nodes (not input type="textarea"), give them predictable ids or a shared class, toggle them based on the checkbox state, initialize accumulator variables, and collect values with a single querySelectorAll over the container.

Key points to apply:

  • Create controls with document.createElement and set attributes (id, className, rows/cols) instead of building them with innerHTML.
  • Use a stable id pattern (for example "mytext-0", "mytext-1") or a shared class like "dynamicText".
  • Initialize accumulators (for example, var textstring = '') and declare loop indices with var/let.
  • Wire checkbox changes with addEventListener (or attachEvent fallback) and check for an existing element before creating a duplicate.
  • Gather values using container.querySelectorAll('textarea.dynamicText'), map their .value, filter empty strings, then join with '\n' and write to the output textarea.

A compact example (drop into a script block after the markup or run on DOMContentLoaded):

document.addEventListener('DOMContentLoaded', function () {
  const form = document.forms.example;
  const container = document.getElementById('appndiv');
  Array.from(form.querySelectorAll('input[name="ipinfo"]')).forEach((cb, idx) => {
    cb.addEventListener('change', () => {
      const id = 'mytext-' + idx;
      const exists = document.getElementById(id);
      if (cb.checked && !exists) {
        const ta = document.createElement('textarea');
        ta.id = id;
        ta.className = 'dynamicText';
        ta.rows = 4;
        ta.cols = 50;
        container.appendChild(ta);
      } else if (!cb.checked && exists) {
        exists.remove();
      }
    });
  });

  document.getElementById('submitBtn').addEventListener('click', function (e) {
    e.preventDefault();
    const values = Array.from(container.querySelectorAll('textarea.dynamicText'))
      .map(t => t.value.trim())
      .filter(Boolean)
      .join('\n');
    form.output.value = values;
  });
});

Troubleshooting notes: use the browser console to inspect the exact failing line; mismatched function names or referencing methods on the wrong object often produce "Object expected." The example avoids innerHTML pitfalls noted by and provides a predictable way to collect each textbox value into the output.

Recommended Answers

All 2 Replies

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.