Asked
Updated
Viewed
43k times

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?

  • 0
    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 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
add a comment
1

2 Answers

  • Votes
  • Oldest
  • Latest
JO
144 4
Answered
Updated

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 😉

  • 0
    Thanks for replying. If I use 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
  • 0
    When you submit one, run a JavaScript that does as Joebert says, but detects the 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
  • 0
    Yes, the code is working that was provided by Joebert. I have tested it. — Tannu4u
  • 0
    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 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
add a comment
1
Answered
Updated

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?
        }
    }
}
add a comment
0