Question

我正在尝试在表单中运行一个脚本，该脚本根据用户选择的数量计算折扣。表单将提交给支付网关，并且必须包含此标记：

<input type="hidden" name="discount" value="0.00"/>

折扣价值根据用户的选择而变化。

所以这就是我的表单外观，但标签没有正确发送。我不知道我做错了什么。

<select name="quantity">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>
<input type="hidden" name="amount" value="10.00"/>

<script type="text/javascript">
<input type="hidden" name="discount"
if (quantity==3)
   {
   value="5.00";
   }
 else if (quantity==2)
   {
   value="2.00";
   }
 else
   {
   value="0.00";
   }
/> 
</script>

我是那么的菜鸟 - 但我一直在努力！请帮忙......

Answer 1

您似乎有两个主要问题：

您将HTML和JavaScript合并为一个块
您无法确保在用户更改数量时执行JavaScript

您的第一步应该是将<input type="hidden" name="discount" />与JavaScript块分开。它是HTML而不是JavaScript，因此JavaScript引擎不知道如何处理它。

<input type="hidden" name="discount" /> 
<script type="text/javascript">
if (quantity==3)
{
   value="5.00";
}
else if (quantity==2)
{
   value="2.00";
}
else
{
   value="0.00";
}
</script>

接下来，您需要确保在用户更改数量时执行JavaScript。要执行此操作，请将代码放入命名函数中，并将onchange元素连接到quantity元素：

<script type="text/javascript">
function updateDiscount()
{
    var select = document.getElementById("quantity");
    var quantity = select.options[select.selectedIndex].value;
    if (quantity==3)
    {
       value="5.00";
    }
    else if (quantity==2)
    {
       value="2.00";
    }
    else
    {
       value="0.00";
    }
}
document.getElementById("quantity").onchange = updateDiscount;
</script>

请注意，我们现在也在JavaScript中查找数量值。这也是因为你不能简单地以你的方式混合JavaScript和HTML。要使查找生效，您需要为元素添加id属性，其值与当前name属性相同（提交表单时需要）。

随着这些变化，你几乎就在那里。您现在将折扣设置为变量value，同时您希望它进入表单的discount字段。为此，您需要查找该元素并设置其值，如下所示：

document.getElementById("discount").value = value;

完整HTML

<select name="quantity" id="quantity">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

<input type="hidden" name="amount" value="10.00"/>
<input type="hidden" name="discount" id="discount" />

完整JavaScript

function updateDiscount()
{
    var select = document.getElementById("quantity");
    var quantity = select.options[select.selectedIndex].value;
    if (quantity==3)
    {
       value="5.00";
    }
    else if (quantity==2)
    {
       value="2.00";
    }
    else
    {
       value="0.00";
    }
    document.getElementById("discount").value = value;
}
document.getElementById("quantity").onchange = updateDiscount;

使用javascript设置输入标记的值

1 个答案: