How to prevent Javascript updating entire control, and refreshing content?

Question

I have this code:

function addFormControls() {
    var e = document.getElementById("ProductsList");
    var prodid = e.options[e.selectedIndex].value;
    var prodvalue = e.options[e.selectedIndex].text;
    if (num == 0) {
        document.getElementById("ProductsPanel").innerHTML = '<h3>Products added to Variant</h3>';
    }
    if (num < 10) {
        var boolCheck = checkArrayData(prodid);
        if (boolCheck == false) {
            document.getElementById("ProductsPanel").innerHTML = document.getElementById("ProductsPanel").innerHTML + prodvalue + '<input type="text" id="' + prodid + 'product" value="0" width="50px" maxlenght="2" /><input type="button" onclick="updateArrayData(\'' + prodid + '\', document.getElementById(\'' + prodid + 'product\').value);" value="Update Number" /><br />';
            num++;
            prodIdArray.push({
                'key': prodid,
                'value': prodvalue,
                'num': 0
            });
            document.getElementById("productsArray").value = prodIdArray;
        } else {
            alert("Sorry product has already been added!");
        }
    }
}

which happily updates a div tag with new info, however if you look at the section where it prints a text box to the screen, line 13, these textbox's will be updated by the user.

So in short, textboxs are added, and value update.

however if there is a textbox with value 5, then this function called again to add another textbox, the previous textbox' values will be wiped clean!

So, how do i prevent this, will i have to do some, for loop over div controls taking the values, then put them back after this function is called?!?

Answer 1

I create some javascript to save all the values in a particular input's value field before adding the control, then return all the saved values back to their respected inputs.

    function saveValuesOfProducts()
{
    // initialise the array
    numOfProds = new Array();
    // get all the elements which are inputs
    var x=document.getElementsByTagName("input");
    // remove all un necessary inputs
    x = leaveTextInputs(x);
    // loop through the entire list of inputs left saving their value
    for (i=0; i<x.length; i++)
    {
        numOfProds.push(x[i].value);
    }
}
function returnValuesOfProducts()
{
    // get all the elements which are inputs
    var x=document.getElementsByTagName("input");
    // remove all un necessary inputs
    x = leaveTextInputs(x);
    // loop through the entire list of saved values and return them to the input
    for (i=0; i<numOfProds.length; i++)
    {
        x[i].value = numOfProds[i];
    }
}

function leaveTextInputs(value)
{
    // create a new blank array
    var newArr = new Array();
    // loop through all the elements in passed array
    for (i=0; i<value.length; i++)
    {
        // cache the element
        var thevalue = value[i];
        // check if the element is a text input
        if (thevalue.type == "text")
        {
            // check the id consists of product in it!
            var regexteststring = thevalue.id;
            // create the pattern to match
            var patt1 = /product/i;
            if (regexteststring.match(patt1) == "product")
            {
                // as additional check, if it has a size quantity of 2 then its defo out stuff
                if (thevalue.size == 2)
                {
                    newArr.push(thevalue);
                }
            }
        }
    }
    // now return the new array
    return newArr;
}