javascript - 对多种表单使用一个 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

尝试保留尽可能多的样式和代码，我只是将所有变量作为参数传递给更通用的 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 开头，并具有相同的后缀(-price、-price-desc、-price-input、-sub-input 和 -sub-输入)。

然后，您可以通过使用正确的参数调用这些函数来更改按钮 onclick 属性。

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

**foo* 产品的表单示例:

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