发送用<输入类型＝“;范围“>(滑块）到Paypal按钮's的价格值<输入类型＝“;隐藏的“;
Sending variable calculated with <input type="range"> (sliders) to Paypal button's price value <input type="hidden" name="amount">
我试图将用多个（滑块）计算的变量发送到Paypal，以便制作一个动态按钮，其价格值根据滑块值而变化。
到目前为止，我已经设法将计算出的值从javascript中的变量形式中取出（var=mapoman）。但我一直未能将值传递给Paypal按钮。。。我正在使用一个未挂起的贝宝按钮。
我假设计算的值存储在输入中，对吗？？目前表单中的输入通过输出计算显示，函数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>
$(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>我不确定我是否理解您的代码，但我使用了简单的jquery滑块来动态地将项目金额传递给PayPal。
p.S我使用了Jquery，我认为它应该很容易做滑块。
经过这么多的尝试和错误，我终于在没有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>
相关文章：
- 在<输入类型＝“;文件“/>
- 如何将输入类型值或id从一个jsp传递到另一个jsp页面
- 可以't将几个数字设置为<输入类型＝“;数字“>
- 在输入类型日期中设置日期
- 如何将键入的文本从一个输入类型的文本复制到另一个
- 输入类型按钮返回历史记录并返回顶部
- 从HTML表单发布blob的表单输入类型是什么
- 输入类型文件的未捕获类型错误
- 如何在jQuery Mobile中设置100%宽度的输入类型日期
- 输入类型=文件验证停止其他输入类型验证
- 如何显示在输入类型文件中选择的文件
- jQuery Modal Popup-回发后输入类型设置为null
- 在控制器中将输入类型时间更改为秒
- 更改具有相同id的输入类型的所有值
- 对于每个输入类型，使用javascript获取值
- 输入类型范围在angularjs重复内不起作用
- 我如何使HTML5<输入类型=月份>以在所有浏览器上工作
- 如何调用两个函数是一种html输入类型
- 如何使按钮作为输入类型文件
- 可以设置输入类型=文件的文本框的高度
