Question

我有这段代码：

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!");
        }
    }
}

使用新信息快乐地更新div标签，但是如果您查看它在屏幕第13行打印文本框的部分，这些文本框将由用户更新。

简而言之，添加了文本框，并更新了值。

但是如果有一个值为5的文本框，则此函数再次调用以添加另一个文本框，之前的文本框值将被擦除干净！

那么，我如何防止这种情况，我是否必须做一些事情，对于获取值的div控件进行循环，然后在调用此函数后将它们放回去？！？

Answer 1

在添加控件之前，我创建了一些javascript来保存特定输入值字段中的所有值，然后将所有保存的值返回到他们尊重的输入。

    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;
}

如何防止Javascript更新整个控件，刷新内容？

1 个答案: