CODEWITHSUNDEEP
javascriptformsinnerhtml
David
David

Reputation: 16726

Add to HTML form without losing current form input information in Javascript

I have a drop down which builds a form based of the selections that are selected. So, if someone selects 'foobar', it displays a text field, if they choose 'cheese', it displays radio buttons. The user can then enter data into these forms as they go along. The only problem is that when they add a new form element, all the rest of the information is erased. Im currently using the following to do add to the form:

document.getElementById('theform_div').innerHTML = 
    document.getElementById('theform_div').innerHTML + 'this is the new stuff';

How can I get it to keep whatever has be enetered in the form and also add the new field to the end?

Upvotes: 9

Views: 9753

Answers (6)

ms-afk
ms-afk

Reputation: 59

If you want to generate the element using an HTML string, as innerHTML does, a great option is the insertAdjacentHTML function, with it's position parameter:

let newElement = "<div>this is the new stuff</div>";
document.getElementById("theform_div")
.insertAdjacentHTML("beforeend", newElement);

As you can see from Mozilla's documentation, besides being faster, this solves the problem you had because the function doesn't reparse the parent element:

The insertAdjacentHTML() method does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.

However, if you just want to add plain text, not HTML code, then there is a similar function made just for that called insertAdjacentText:

let newText = "this is the new stuff";
document.getElementById("theform_div")
.insertAdjacentText("beforeend", newText);

Upvotes: -1

Emil Ivanov
Emil Ivanov

Reputation: 37633

The most correct way to do it without using a framework (like jQuery, Dojo, YUI) is:

var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);

document.getElementById('theform_div').appendChild(div);

innerHTML, although supported by most browsers, is not standard compliant and - therefore, not guaranteed to work.

Upvotes: 2

tambler
tambler

Reputation: 3039

Step One:

Add jQuery to your headers:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>

Step Two:

Append, don't replace, data to your DIV like this:

$("#theform_div").append("your_new_html_goes_here");

Upvotes: 5

Andy E
Andy E

Reputation: 344547

Don't use innerHTML to create the form elements. With innerHTML you're overwriting the old HTML with new HTML which will recreate all the elements. Instead you need to use the DOM to create and append the elements.

EXAMPLE

function addRadioElement()
{
    var frm = document.getElementById("form_container");
    var newEl = document.createElement("input");
    newEl.type = "radio";
    newEl.name = "foo";
    newEl.value = "bar";
    frm.appendChild(newEl);        
}

Upvotes: 2

SLaks
SLaks

Reputation: 887365

Setting innerHTML destroys the contents of the element and rebuilds it from the HTML.

You need to build a separate DOM tree and add it by calling appendChild.

For example:

var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);

This is much easier to do using jQuery.

Upvotes: 16

Marek Karbarz
Marek Karbarz

Reputation: 29294

I would suggest using jQuery and its append function.

Upvotes: 0

Related Questions