I need to add elements dynamically 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);
However, it produces an error saying the object doesn't have the method.
How can I add elements to a form using Javascript?
Try this on for size 😁
I tested this in multiple browsers:
<html>
<head>
<title>Adding elements to a form</title>
<script>
let items = 1;
function AddItem() {
let div = document.getElementById("items");
let button = document.getElementById("add");
items++;
let 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">
<be>
<input type="button" value="Add an Item" onClick="AddItem();" ID="add">
</div>
</form>
</body>
</html>
If you add a group of checkboxes or something of the sort you may want to make every dynamically created element have the same ID so you can access them through an array 😉
innerHTML the new elements will be painted on my page, won't they? But my problem is that I don't want them to be painted. My problem is that 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 submission is done. Can that be done? I have already a function that receives the two forms ("source" and "target") and reads the source's elements, but I cannot add them to the "target" form.
— LewsTherin_74
innerhtml of the other form, and writes that below the first form, then submits. In 30 secs Joebert will have coded a complete solution, fully tested and annotated 😁 I think he's bored today 🤣
— rtm223
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 a GET request, 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 🤣 but I guess neither of these is possible in your situation.
— rtm223
My code is something like this. I've checked that in the 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?
}
}
}
-
0
There is an
add a commentinnerTextorinnerHTMLproperty that you might be able to use. I'm not sure which one you need to use and there are some compatibility issues with one of them. However, if you want to be adding form elements all the time you may have to mess around and hold all of them in variables so that you don't write over them in the next edit. You will need to keep track of variables. I think that will work but there is probably a better method that's a bit neater! — rtm223