Adding elements to a Form in JavaScript

  • LewsTherin_74
  • Born
  • Born
  • LewsTherin_74
  • Posts: 4

Post 3+ Months Ago

Hi,

I need to add elements dinamically to a Form in JavaScript. I thought the addChild method would be useful and I tried the following:

var objForm = document.getElementById("idForm");
objForm.addChild(element);

but it produces an error saying the object doesn't accept the method.

How could I add elements to a form?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Don't hold this against me if I'm completely wrong lol!

There is an innertext or innerhtml property that you might be able to use. I'm not sure which one you need to use and there are some compatibillity issues with one of them.

However, if you want to be adding form elements all the time you ma have to mess around with holding all of them in variables so that yo don't write over them in the next edit. And you will need to keep track of variables.

I think that will work but there is probably a better method thats a bit neater!
  • Tannu4u
  • Proficient
  • Proficient
  • User avatar
  • Posts: 480
  • Loc: India

Post 3+ Months Ago

Definately the method innertext will help u do the thing u want ot do when i will be free then i will add the code too till then u try.....
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Try this on for size :D
Tested in IE6, NS7, FFox.08
Code: [ Select ]
<html>
<head>
<title>Adding elements to a form</title>
<script language="javascript">
var items=1;
function AddItem() {
 div=document.getElementById("items");
 button=document.getElementById("add");
 items++;
 newitem="<b>Item " + items + ": </b>";
 newitem+="<input type=\"text\" name=\"item" + items;
 newitem+="\" size=\"45\"><br>";
 newnode=document.createElement("span");
 newnode.innerHTML=newitem;
 div.insertBefore(newnode,button);
}
</script>
</head>
<body>
<h1>Adding Form Elements</h1>
<p>The form below allows you to add elements dynamically.</p>
<hr>
<form name="form1">
<div ID="items">
<b>Item 1:</b>
<input type="text" name="item1" size="45">
<br>
<input type="button" value="Add an Item"
onClick="AddItem();" ID="add">
</div>
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Adding elements to a form</title>
  4. <script language="javascript">
  5. var items=1;
  6. function AddItem() {
  7.  div=document.getElementById("items");
  8.  button=document.getElementById("add");
  9.  items++;
  10.  newitem="<b>Item " + items + ": </b>";
  11.  newitem+="<input type=\"text\" name=\"item" + items;
  12.  newitem+="\" size=\"45\"><br>";
  13.  newnode=document.createElement("span");
  14.  newnode.innerHTML=newitem;
  15.  div.insertBefore(newnode,button);
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <h1>Adding Form Elements</h1>
  21. <p>The form below allows you to add elements dynamically.</p>
  22. <hr>
  23. <form name="form1">
  24. <div ID="items">
  25. <b>Item 1:</b>
  26. <input type="text" name="item1" size="45">
  27. <br>
  28. <input type="button" value="Add an Item"
  29. onClick="AddItem();" ID="add">
  30. </div>
  31. </form>
  32. </body>
  33. </html>


If you add a group of checkboxes or somthing of the sort you may want to make every dynamically created element have the same ID so you can access them through an array :wink:
  • LewsTherin_74
  • Born
  • Born
  • LewsTherin_74
  • Posts: 4

Post 3+ Months Ago

Hi all,

thanks for replying. If I use innerHTML the new elements will be painted in my page, won't they? Bu my problem is that I don't want them to be painted.

My problem is: I've got two forms and I need to send all the elements contained in both forms when I submit one of them. So I need to add the elements from one to the other one before the submit is done. Can that be done?

Thanks
  • LewsTherin_74
  • Born
  • Born
  • LewsTherin_74
  • Posts: 4

Post 3+ Months Ago

Hi all,

thanks for replying. If I use innerHTML the new elements will be painted in my page, won't they? Bu my problem is that I don't want them to be painted.

My problem is: I've got two forms and I need to send all the elements contained in both forms when I submit one of them. So I need to add the elements from one to the other one before the submit is done. Can that be done?

I have already a function wich receives the two forms ("source" and "target") and reads source's elements... but I cannot add them to the "target" form.

Thanks
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

yeah:

when you submit one, run a javascript that does like Joebert says, but detect the innerhtml of the other form, and writes that in below the first form, then submits. In 30 secs joebert will have coded a complete solution, fully tested and annotated :D I think he's bored today :lol:
  • Tannu4u
  • Proficient
  • Proficient
  • User avatar
  • Posts: 480
  • Loc: India

Post 3+ Months Ago

yes its goo its working the code given by joebert i have tested it.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

A lightly better way would be to run a loop through each of the elements in form b (assuming you are submitting from form a) and take the id/name and value of each element and create a whole bunch of hidden form elements in form a, then submit....

Of course this is a lot easier if your form method is get, in which case you can just dynamically write the url and save a lot of hassle :) Or even better is to have a single form :lol: but I guess neither of these are possible in your sitiuation.
  • LewsTherin_74
  • Born
  • Born
  • LewsTherin_74
  • Posts: 4

Post 3+ Months Ago

Hi,

my code is something like this. I've checked that in copyForm function all the elements of objSourceForm are copied into newElement variable. My problem is that I don't know how I can add it to objTargetForm (the commented line):


function myFunction () {
var objForm1 = document.getElementById("idForm1");
var objForm2 = document.getElementById("idForm2");
copyForm (objForm1, objForm2);
objForm2.submit();
}

function copyForm(objSourceForm, objTargetForm) {
var num = objSourceForm.elements.length;
var objSource;
for (var i = num -1 ; i >= 0; i--) {
objSource = objSourceForm.elements[i];
if ((objSource.type != "button")&&(objSource.type != "submit")) {
var newElement = objSource.cloneNode(true);
//how can I add newElement to objTargetForm?
}
}
}


Thanks again

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 101 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.