使用多种形式的一种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

你可以试试这个：从维也纳