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

时间:2012-09-23 16:20:04

标签: html paypal onclick

我有下面的代码,其中更改价格是用户选择的“价格”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个独立的paypal按钮。两个按钮完全相同,但每个按钮都有不同的“值”。如何根据用户选择的图像更改“值”?

img1按钮的值@£245是SKF4F8AARZWKE(下面的代码) img1按钮的值@£265是WEI8F8HHJOPRY

按钮img1值SKF4F8AARZWKE

的paypal代码
<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>​

1 个答案:

答案 0 :(得分:0)

为input元素指定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>​