如何根据选择的图像更改表单元素

Question

我有下面的代码，将价格更改为用户选择的“价格”div。

<script type="text/javascript">
        function showprice(e){
            document.getElementById("price").innerHTML = e.getAttribute('data-price');
        }
    </script>

        <img src="http://i.imgur.com/JnUKx.jpg" id="img1" onclick="showprice(this);" width="39" height="33" data-price="245.00">
        <img src="http://i.imgur.com/c8Rwp.gif" id="img2" onclick="showprice(this);" width="39" height="33" data-price="255.00">

        <div id="price" style="padding-bottom:10px"></div>​

我为每个价格创建了 2 个单独的贝宝按钮。两个按钮完全相同，但每个按钮都有不同的“值”。如何根据用户选择的图像更改“值”？

img1 按钮 @ 245 英镑的值是 SKF4F8AARZWKE（代码如下） img1 按钮 @ 265 英镑的价值是 WEI8F8HHJOPRY

按钮 img1 值 SKF4F8AARZWKE 的贝宝代码

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

                  <input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="SKF4F8AARZWKE">

  <input type="image" src="images/buyitnow.png"  style="width:100px; height:30px" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">

            </form>​

Answer 1

给输入元素一个id并使用document.getElementById('YOUR_ID').value = 'YOUR VALUE';

<script type="text/javascript">
   function changeprice(e){
        document.getElementById("price").innerHTML = e.getAttribute('data-price');
        document.getElementById("hosted_button_id").value = e.getAttribute('data-value');
   }
</script>

<img src="http://i.imgur.com/JnUKx.jpg" id="img1" onclick="changeprice(this);" width="39" height="33" data-price="245.00" data-value="SKF4F8AARZWKE">
<img src="http://i.imgur.com/c8Rwp.gif" id="img2" onclick="changeprice(this);" width="39" height="33" data-price="255.00" data-value="WEI8F8HHJOPRY">

<div id="price" style="padding-bottom:10px"></div>​


<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" id="hosted_button_id" name="hosted_button_id" value="SKF4F8AARZWKE">

    <input type="image" src="images/buyitnow.png"  style="width:100px; height:30px" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
</form>​