如何防止Javascript更新整個控件，並刷新內容？

我有這樣的代碼：如何防止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控制採取值，然後把它們放回這個函數被稱爲？！？

來源

2012-04-17 Callum Linington

'num'從哪裏來？你已經標記jQuery，但似乎沒有在任何地方使用它？和'maxlenght'拼寫錯誤......我絕對不知道你在做什麼......你能用一個問題的例子創建一個http://jsfiddle.net嗎？ – ManseUK 2012-04-17 14:47:01

數字5對您的代碼沒有重要價值。你可以設置一個jsfiddle嗎？我試過了，如果沒有更多的信息，不能重現這一點。 – buley 2012-04-17 14:52:03

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

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

來源

2012-04-17 22:58:45

如何防止Javascript更新整個控件，並刷新內容？

回答

相關問題