在表单中更改变量onclick

时间:2015-09-27 22:27:08

标签: javascript html

好的伙计们...我为我的妻子建立了一个电子商务网站,他们销售eLiquids ..我遇到的问题与我正在使用的电子瘾君子推车...我正在努力改变从下拉框中选择瓶子尺寸时“金额”的隐藏值。我希望“金额”值根据每个尺寸选择而改变...我尝试过的任何工作都没有...这里是片段< / p>

<form action="https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2" target="ej_ejc" method="POST">


<input type="hidden" name="amount" value="12.00"/>
<input type="hidden" name="quantity" value="1"/>

Bottle Size: 
<input type="hidden" name="on1" value="Size"/>
<select name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>   
<option value="50">50 ML</option>
</select><br>



<input type="hidden" name="shipping2" value="0.5">
<input type="hidden" name="handling" value="0.5">
<input type="hidden" name="tax" value="0.50"/>
<input type="hidden" name="return_url" value="http://www.e-junkie.com/"/>
<input type="hidden" name="currency_code" value="USD"/>

<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="javascript:return EJEJC_lc(this.parentNode);">

我尝试过使用on1和on1,但它不会改变金额值......

我正在尝试将隐藏的“金额”值更改为12 20或30,具体取决于所选的尺寸...任何帮助都会很棒

2 个答案:

答案 0 :(得分:1)

您可以通过为amount选择框分配onchange功能来更改os1字段的值。这是一个示例javascript函数:

    function changePrice() {
      var size = document.getElementById('os1').value;
      var price = 12;

      switch(size){
        case '15':
          price = 12;
          break;
        case '30':
          price = 20;
          break;
        case '50':
          price = 30;
          break;
        }
      document.getElementById('amount').value = price;
     }

您还需要为金额输入ID:

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

为选择框提供一个ID,并为其指定一个onclick事件:

    <select name="os1" id="os1" onchange="changePrice();">
      <option value="15">15 ML</option>
      <option value="30">30 ML</option>   
      <option value="50">50 ML</option>
    </select>

然而 - 如果您正在处理付款,我建议不要这样做。有人在浏览器中更改金额值并将他们想要的金额提交给付款流程太容易了。至少,您需要在处理付款之前验证服务器上的瓶子大小和支付金额,以防止此类攻击。

答案 1 :(得分:1)

这不是很好的原始JavaScript,但它应该适合你。

更改

<input type="hidden" name="amount" value="12.00"/>

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

并改变:

<select name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>   
<option value="50">50 ML</option>
</select><br>

<select id="os1" name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>   
<option value="50">50 ML</option>
</select><br>

最后改变:

<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="javascript:return EJEJC_lc(this.parentNode);">

<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="return changeCost();">
<script type="text/javascript">
function changeCost(){
  var amountElm = document.getElementById("amount");
  var selectList = document.getElementById("os1");
  var selectedValue = selectList .options[selectList .selectedIndex].value;
  if(selectedValue == "15"){
    amountElm.value "12.00";
  }else if(selectedValue == "30"){
    amountElm.value "20.00";
  }else if(selectedValue == "50"){
    amountElm.value "30.00";
  }
  return true;
}
</script>