How can I store obj properties in there current form onload?

Question

I want to remove an obj from my form and be able to add it back as it was onload. But when I try to add it back using the var I tried to save onload I get an error (it queries the current form which has its child removed).

How can I store all the children obj properties in their current form onload, immutably, so that I can be able to add them back after they have been removed from the document?

This would give me an error ("Argument 1 of Node.appendChild is not an object"):

var fullList2 = null;

window.onload = function () {
    fullList2 = document.getElementsByName('person')[0].children;
    document.getElementsByName('person')[0].removeChild(document.getElementsByName('person')[0].children[1]);
    document.getElementsByName('person')[0].appendChild(fullList2[1]);
}

the form:

<form name="trans" id="trans" method=POST action=entertransaction.jsp>
    <input type="text" onkeyup="update();" id="input1" value="" name="filterTxt" size="21" tabindex="1" style="width: 195px" />
    <br />
    <select id="person" name="person" size=10 tabindex="2" style="width: 200px">
        <option value="0">Scott Ambler</option>
        <option value="1">Andrew Binstock</option>
    </select>
    <br />
    <input type=submit name=action value="Next ->" tabindex="3" />
</form>

Why would you want to remove and append? Just to change its position? — Bergi, Sep 21 '14 at 11:16

Rickard Staaf · Accepted Answer · 2014-09-21T09:32:35.123

Your fullList2 is just a reference to the child array of the person select element, when you remove childs from the person select you also remove them from the fullList2 array, that is why your approach does not work.

As for the solution: you will have to store the child elements by themselves. So your code would look something like (not tested just written from the top of my head):

var fullList2 = [];

window.onload = function () {
  var person= document.getElementsByName('person')[0];
  //Remove objects from the dom and store them in fullList2
  fullList2.push(person.removeChild(person.childNodes[0]);
  fullList2.push(person.removeChild(person.childNodes[1]);
  //Add them back in
  person.appendChild(fullList2[0]);
  person.appendChild(fullList2[1]);
}

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

You are running into the problem that when you assign an object to a variable, you are not making a copy of the object. So, when you delete the object, the variable that was pointing at it no longer has something to point at. You need to make a clone of the object. So, see What is the most efficient way to deep clone an object in JavaScript?

edited May 23 '17 at 12:14

Community

1
1

answered Sep 21 '14 at 09:19

vernonner3voltazim

780
6
5

How can I store obj properties in there current form onload?

2 Answers2