使用多種形式的一種javascript功能

Question

我有幾種產品訂購頁的形式。網頁上的每個商品都需要有兩個價格，一個用於一次性訂單，另一個用於定期訂單。

我的代碼工作正常，問題是每個項目需要三個javascript函數，正如你猜測的那樣，它會很快失去控制。

這裏是一個產品形式：

<form id="mangoForm" action="https://ximo365.foxycart.com/cart" method="post" accept-charset="utf-8"> 

    <input type="hidden" name="name" value="Mango Bash Pack" /> 
    <input id="mango-price-input" type="hidden" name="price" value="50" /> 
    <input id="mango-sub-input" type="hidden" name="sub_frequency" value="1m"> 
    <input id="mango-refBy" type="hidden" name="Referred By:" value="Not Specified"> 

<div class="btn-group"> 
    <button type="button" onclick="changePriceLowMango()" class="btn btn-default">Subscribe & Save</button> 
    <button type="button" onclick="changePriceHighMango()" class="btn btn-default">One Time</button> 
    <button type="button" onclick="mangoSubmit()" class="btn btn-default" value="Submit form">Add To Cart</button> 
</div> 
</form> 

而且她是形成的javascript：

function changePriceHighMango() { 
    document.getElementById("mango-price").innerHTML = "80.00"; 
    document.getElementById("mango-price-desc").innerHTML = "Switch to recurring and save up to 35%!"; 
    document.getElementById("mango-price-input").value = "80.00"; 
    document.getElementById("mango-sub-input").name = "Frequency"; 
    document.getElementById("mango-sub-input").value = "Single Order"; 
} 

function changePriceLowMango() { 
    document.getElementById("mango-price").innerHTML = "50.00"; 
    document.getElementById("mango-price-desc").innerHTML = "Recurring Price. Cancel Anytime."; 
    document.getElementById("mango-price-input").value = "50.00"; 
    document.getElementById("mango-sub-input").name = "sub_frequency"; 
    document.getElementById("mango-sub-input").value = "1m"; 
} 

function mangoSubmit() { 
    var mangoName = document.getElementById("distName").innerHTML; 
    document.getElementById("mango-refBy").value = mangoName; 
    document.getElementById("mangoForm").submit(); 
} 

我想什麼是三個功能，一個用於提高價格，一爲降低價格，以及提交表格的工具 - 這些工具可以用於每個項目。這些功能需要知道需要更改哪些表單，低價格和高價格以及表單上要更新的項目。

難道那是可以做到的嗎？

感謝您的幫助。

Answer 1

試圖保持儘可能你現在所擁有的風格和代碼

function Mango(action) { 
    var mangoprice = document.getElementById("mango-price"), 
    mangopricedesc = document.getElementById("mango-price-desc"), 
    mangopriceinput = document.getElementById("mango-price-input"), 
    mangoprivesubinput = document.getElementById("mango-sub-input"), 
    mangorefBy = document.getElementById("mango-refBy"), 
    mangoForm = document.getElementById("mangoForm"); 
    var mangoName = document.getElementById("distName").innerHTML; 
    switch(action) 
    { 
     case 'Low': 
      mangoprice.innerHTML = "80.00"; 
      //... etc LOW PRICE 
      break; 
     case 'High': 
      //... etc HIGH PRICE 
      break; 
     case 'Submit': 
      mangorefBy.value = mangoName; 
      mangoForm.submit(); 
      break; 
    } 
} 

問候，我只想通過所有變量的東西作爲參數傳遞給一個更通用的changePrice功能。正如你所說，功能將需要知道哪些形式改變，低價格和高價格，什麼樣的項目更新。因此，讓我們創造一個更通用changePrice功能是這樣的：

function changePrice(productName, description, price, subName, subValue) { 
    document.getElementById(productName + "-price").innerHTML = price; 
    document.getElementById(productName + "-price-desc").innerHTML = description; 
    document.getElementById(productName + "-price-input").value = price; 
    document.getElementById(productName + "-sub-input").name = subName; 
    document.getElementById(productName + "-sub-input").value = subValue; 
    } 

    function productSubmit(productName) { 
    var distName = document.getElementById("distName").innerHTML; 
    document.getElementById(productName + "-refBy").value = distName; 
    document.getElementById(productName + "Form").submit(); 
    } 

我假設所有的表單輸入與productName開始，並具有相同的後綴（正價，正價降序排序，購正價輸入， - 子輸入和子輸入）。

然後，您可以通過調用具有適當參數的函數來更改按鈕onclick屬性。爲** FOO形式的

<div class="btn-group"> 
    <button type="button" onclick="changePrice('mango', 'Recurring Price. Cancel Anytime.', '50.00', 'sub_frequency', '1m')" class="btn btn-default">Subscribe & Save</button> 
    <button type="button" onclick="changePrice('mango', 'Switch to recurring and save up to 35%!', '80.00', 'Frequency', 'Single Order')" class="btn btn-default">One Time</button> 
    <button type="button" onclick="productSubmit('mango')" class="btn btn-default" value="Submit form">Add To Cart</button> 
    </div> 

示例*產品：

<form id="fooForm" action="https://ximo365.foxycart.com/cart" method="post" accept-charset="utf-8"> 

    <input type="hidden" name="name" value="Foo Bash Pack" /> 
    <input id="foo-price-input" type="hidden" name="price" value="50" /> 
    <input id="foo-sub-input" type="hidden" name="sub_frequency" value="1m"> 
    <input id="foo-refBy" type="hidden" name="Referred By:" value="Not Specified"> 

     <div class="btn-group"> 
     <button type="button" onclick="changePrice('foo', 'Foo Recurring Price. Cancel Anytime.', '10.00', 'sub_frequency', '1m')" class="btn btn-default">Subscribe & Save</button> 
     <button type="button" onclick="changePrice('foo', 'Foo Switch to recurring and save up to 35%!', '20.00', 'Frequency', 'Single Order')" class="btn btn-default">One Time</button> 
     <button type="button" onclick="productSubmit('foo')" class="btn btn-default" value="Submit form">Add To Cart</button> 
     </div> 
</form> 

Answer 2

你可以試試這個：從維也納