2012-04-17 219 views
0

我有这样的代码:如何防止Javascript更新整个控件,并刷新内容?

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控制采取值,然后把它们放回这个函数被称为?!?

+1

'num'从哪里来?你已经标记jQuery,但似乎没有在任何地方使用它?和'maxlenght'拼写错误......我绝对不知道你在做什么......你能用一个问题的例子创建一个http://jsfiddle.net吗? – ManseUK 2012-04-17 14:47:01

+1

数字5对您的代码没有重要价值。你可以设置一个jsfiddle吗?我试过了,如果没有更多的信息,不能重现这一点。 – buley 2012-04-17 14:52:03

+0

http://jsfiddle.net/mZ9ZG/ – 2012-04-17 21:46:20

回答

0

我创建了一些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; 
}