Question

我正在尝试将使用多个（滑块）计算的变量发送到Paypal，以便创建一个动态按钮，其价格值会根据滑块值而变化。

到目前为止，我已经设法将计算出的值作为javascript中的变量（var = mapoman）。但我一直没有将值传递给Paypal按钮...我正在使用一个未托管的Paypal按钮。

我假设计算出的值存储在输入中，是吗？目前oninput in form计算显示通过输出和函数Add（）计算Paypal按钮的值......

我无法使用PHP，因为我的服务器目前无法处理它。所以我只是想用javascript来实现这个目标。

以下是我的代码.. 我真的希望它可行！我感谢任何建议，谢谢！

<html>

<head>

<script language="javascript">

function Add(){
document.mapo.mapoprice.value = eval(document.mapo.slider1.value) + eval(document.mapo.slider2.value) + eval(document.mapo.slider3.value) + eval(document.mapo.slider4.value) + eval(document.mapo.slider5.value) + eval(document.mapo.slider6.value) + eval(document.mapo.slider7.value) + eval(document.mapo.slider8.value);
}

function GetMapoman(){
var mapoman = document.getElementById("mapoprice").value;
document.getElementById("saru").innerHTML = mapoman; 
}

</script>

</head>

<body>

<form name="mapo" oninput="total.value = slider1.valueAsNumber + slider2.valueAsNumber + slider3.valueAsNumber + slider4.valueAsNumber + slider5.valueAsNumber + slider6.valueAsNumber + slider7.valueAsNumber + slider8.valueAsNumber;Add();GetMapoman();">

<input name="slider1" id="slider1" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input name="slider2" id="slider2" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input name="slider3" id="slider3" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input name="slider4" id="slider4" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input name="slider5" id="slider5" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input name="slider6" id="slider6" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input name="slider7" id="slider7" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input name="slider8" id="slider8" type="range" min="3" max="8" value="3" step="1" style="width:650px">

<input type="text" name="mapoprice" id="mapoprice"><!-- <--is this storing the value calculated by the sliders above???-->
<output name="total" for="slider1 slider2 slider3 slider4 slider5 slider6 slider7 slider8"></output>

</form>

<p id="saru"></p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="---.com">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="---">
<input type="hidden" name="amount id="totalmapo"><!--this bit I'm trying to put the calculated value by the sliders-->
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image" src="http://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

</body>

</html>

Answer 1

$(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1,
      max: 10,
      value: 2,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
          $( "#amt_id" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });

<html>
  <head>
    <title>jQuery UI Slider - Range with fixed maximum</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
    </head>
  <body>
  <label for="amount">Choose an Amount</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <div id="slider-range-max"></div>
  <br><br>      
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="vimal.android@gmail.com">
    <input type="hidden" name="lc" value="GB">
    <input type="hidden" name="item_name" value="test">
    <input id="amt_id" type="hidden" name="amount" value="1">
    <input type="hidden" name="currency_code" value="GBP">
    <input type="hidden" name="no_shipping" value="2">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
    <input type="image" src="http://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
  </form>
    </body>
  </html>

在这里： JSfiddle

我不确定我是否理解您的代码，但我使用简单的jquery滑块动态地将项目金额传递给PayPal。

P.S我使用Jquery，我觉得应该很容易做滑块。

Answer 2

经过这么多试验和错误后，我终于设法在没有jquery的情况下实现了我想要的功能。

    <html>

<head>

<script type="text/javascript" >

function Add(){
document.mapo.mapoprice.value = eval(document.mapo.slider1.value) + eval(document.mapo.slider2.value) + eval(document.mapo.slider3.value) + eval(document.mapo.slider4.value) + eval(document.mapo.slider5.value) + eval(document.mapo.slider6.value) + eval(document.mapo.slider7.value) + eval(document.mapo.slider8.value);
}

function GetMapoman(){
var mapoman = document.getElementById("mapoprice").value;
document.getElementById("saru").innerHTML = mapoman; 
}

function updateTextInput1(val) {
      document.getElementById('textInput1').value=val; 
    }

function updateTextInput2(val) {
      document.getElementById('textInput2').value=val; 
    }

function updateTextInput3(val) {
      document.getElementById('textInput3').value=val; 
    }

function updateTextInput4(val) {
      document.getElementById('textInput4').value=val; 
    }

function updateTextInput5(val) {
      document.getElementById('textInput5').value=val; 
    }

function updateTextInput6(val) {
      document.getElementById('textInput6').value=val; 
    }    

function updateTextInput7(val) {
      document.getElementById('textInput7').value=val; 
    }    

function updateTextInput8(val) {
      document.getElementById('textInput8').value=val; 
    }    

</script>

</head>

<body>
<form name="mapo" id="mapo" oninput="Add();GetMapoman();GetMapomanPrice();">

<input name="slider1" id="slider1" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput1(this.value);" oninput="amount1.value=slider1.value">
<input type="text" id="textInput1" value="">
<output name="amount1" for="slider1">3</output>

<input name="slider2" id="slider2" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput2(this.value);" oninput="amount2.value=slider2.value">
<input type="text" id="textInput2" value="">
<output name="amount2" for="slider2">3</output>

<input name="slider3" id="slider3" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput3(this.value);" oninput="amount3.value=slider3.value">
<input type="text" id="textInput3" value="">
<output name="amount3" for="slider3">3</output>

<input name="slider4" id="slider4" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput4(this.value);" oninput="amount4.value=slider4.value">
<input type="text" id="textInput4" value="">
<output name="amount4" for="slider4">3</output>

<input name="slider5" id="slider5" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput5(this.value);" oninput="amount5.value=slider5.value">
<input type="text" id="textInput5" value="">
<output name="amount5" for="slider5">3</output>

<input name="slider6" id="slider6" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput6(this.value);" oninput="amount6.value=slider6.value">
<input type="text" id="textInput6" value="">
<output name="amount6" for="slider6">3</output>

<input name="slider7" id="slider7" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput7(this.value);" oninput="amount7.value=slider7.value">
<input type="text" id="textInput7" value="">
<output name="amount7" for="slider7">3</output>

<input name="slider8" id="slider8" type="range" min="3" max="8" value="3" step="1" style="width:650px" onchange="updateTextInput8(this.value);" oninput="amount8.value=slider8.value">
<input type="text" id="textInput8" value="">
<output name="amount8" for="slider8">3</output>

<p><input type="text" name="mapoprice" value="" id="mapoprice" /></p>

</form>

<p id="saru"></p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="---.com"><!--put your own email address-->
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="---"><!--put your own item name-->
<input type="hidden" name="amount" id="finalpaypal">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image" src="http://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

<script>
function GetMapomanPrice() { 
var mapoman = document.getElementById("mapoprice").value;
document.getElementById("finalpaypal").value = mapoman;
}
</script>

</body>
</html>

将使用<input type =“range”/>（滑块）计算的变量发送到Paypal按钮的价格值<input type =“hidden”name =“amount”/>

2 个答案: