Develop Reference

Ask user for amount and user value in a form

I'm trying to integrate a payment method called SiamPay on my website but I don't know javascript :(
On SiamPay website they have this instructions:
Copy the following program code to your payment page and
dynamic generate the Amount show below by yourself
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>
Example in jsp:
<%
double amount = qty * unitPrice ;
%>
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
I would like to create a field where the user can input an amount to pay in THB (Thai currency) and transport that value to this field:
< input type="hidden" name="amount" value="<%= amount %>">.
I think this is relatively easy but because I never user javascript I'm a little confused.
I appreciate any help.
Thank you so much.
Best Regards,
Alex

There's no need to create an extra input field. You have to change the name=amount input's type to number so that it will become visible to the user. Now the user can enter a number of their choice and click the pay button to submit the payment form.
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="number" name="amount" value="" placeholder="Enter amount in THB ">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>

To set value to an element, you can use the document.getElementById().value function. Set the amount data into the Amount variable as shown below.
var Amount = 123;
Also, modify the input tag for the amount to include the same id:
<input type="hidden" name="amount" id="amtId" value="Amount">
var Amount = 123;
function setAmountValue() {
document.getElementById('amtId').value = Amount;
}
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy" onclick="setAmountValue();">
<input type="hidden" name="amount" id="amtId" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764">
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>

try something like this:
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment
/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" id="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
<button id='cmdSend'>Click me</button>
<input id='howmuch' type="number" name="amount" value=1000>
And the JS:
document.getElementById("cmdSend").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("cmdSend").innerHTML = "YOU CLICKED ME!";
//Get the value the user typed:
var Value = document.getElementById("howmuch").value;
console.log(Value);
//Set the value into the hidden input, can be done in 2 ways:
document.getElementById("amount").value = Value;
document.getElementById("amount").setAttribute('value',Value);
//Check the value got assigned:
console.log(document.getElementById("amount").value);
}
Fiddle here: https://jsfiddle.net/s2ztkn8L/

Use JavaScript checkbox value in HTML

I'd like to be able to use a total amount generated using javascriptand displayed on the page in a <span> field later on in an HTML form. The checkbox additions and subtractions work correctly, I have no issue with that. What I have not been able to figure out is how to use that value later on in an HTML field (shown below as the PayPal code).
I have this in the <head> which handles the javascript:
<head>
<script type="text/javascript">
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total.toFixed(2);
}
</script>
</head>
The this adds/subtracts if a check box is checked:
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
Then I display the total with this:
Total Amount: $<span id="Totalcost">0.00</span>
All of this works correctly and checking/unchecking reflects on the Total Amount shown at the bottom of the page.
What I'd like to do is use the total amount that is show in the HTML below for the PayPal subscription link so that the amount is added into the
line.
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
Is it possible to capture the 'totalcost' and have it dynamically added to the "a3" field in the PayPal form (where it says TOTAL_AMOUNT) for when the customer clicks the PayPal button it already has the correct value/amount in the form?
Thank you.

You can use document.getElementsByName. By default you'll get a NodeList. For example:
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
You can easily update its value.
Something like this:
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
document.getElementById("Totalcost").innerHTML = total.toFixed(2);
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
}
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
<table>
<tr>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
</tr>
</table>
<span id="Totalcost">0.00</span>

How to generate a QR code for paypal payment?

I have created a paypal button with official tool before:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="paypal_form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" id="order_button_id" value="123123abc">
<input type="hidden" name="quantity" id="order_quantity">
<input type="hidden" name="on0" value="Name">
<input type="hidden" name="os0" value="" id="post_name">
<input type="hidden" name="on1" value="Email">
<input type="hidden" name="os1" value="" id="post_email">
<input type="hidden" name="on2" value="Phone">
<input type="hidden" name="os2" value="" id="post_tel">
<input type="image" src="https://www.paypalobjects.com/en_GB/HK/i/btn/btn_buynowCC_LG_wCUP.gif" border="0" name="submit" style="position:relative; top:20px; left:20px;">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
Recently, I need to convert this button to QR code, as I would like to allow my customer to scan the QR code at my shop, and make payment on their mobile phone.
To simplify, there is only one product and the quantity will always be one , How to convert that?
Thanks a lot.

Make a new file like this:
<HTML><head><script>function SF(){document.getElementById('paypal_form').submit();}</script></head><body onload="SF();"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="paypal_form"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" id="order_button_id" value="123123abc"> <input type="hidden" name="quantity" id="order_quantity"> <input type="hidden" name="on0" value="Name"> <input type="hidden" name="os0" value="" id="post_name"> <input type="hidden" name="on1" value="Email"> <input type="hidden" name="os1" value="" id="post_email"> <input type="hidden" name="on2" value="Phone"> <input type="hidden" name="os2" value="" id="post_tel"> <input type="submit" value="Please click here if you are not redirected." border="0" style="position:relative; top:20px; left:20px;"> <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> </form></body></HTML>
And make a QR code point to that.

Script to join checkbox values into string before submitting

I have a paypal checkout form where I need to join together multiple chosen checkbox values (name="cb1") into a single string so it can be submitted as a hidden input (name="os1") value. I'm going round in circles trying to figure this out. I know very little JS! Can somebody help please?
<div id="buyform">
<form target="paypal" id="ppform" name="ppform" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="myPPbusinessid">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="Form Title">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<div><input type="hidden" name="on0" value="Options"><h5>Options</h5></div>
<div>
<select name="os0" id="os0" required>
<option value="Chosen Product">Any quantity £10.00 GBP</option>
</select>
</div>
<input type="hidden" name="on1" value="Colours">
<div>
<input type="checkbox" name="cb1" value="Red" id="os10" class="thecbox"/><label for="os10"></label>
<input type="checkbox" name="cb1" value="Green" id="os11" class="thecbox"/><label for="os11"></label>
<input type="checkbox" name="cb1" value="Orange" id="os12" class="thecbox"/><label for="os12"></label>
<input type="checkbox" name="cb1" value="Purple" id="os13" class="thecbox"/><label for="os13"></label>
<input type="checkbox" name="cb1" value="Yellow" id="os14" class="thecbox"/><label for="os14"></label>
<input type="checkbox" name="cb1" value="Black" id="os15" class="thecbox"/><label for="os15"></label>
<input type="checkbox" name="cb1" value="Blue" id="os16" class="thecbox"/><label for="os16"></label>
<input type="hidden" name="os1" value="EACH, CHECKED, VALUE, HERE">
</div>
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="option_select0" value="Options">
<input type="hidden" name="option_amount0" value="10.00">
<input type="hidden" name="option_index" value="0">
<input type="hidden" name="currency_code" value="GBP">
<input type="submit" border="0" name="submit" id="submit" value="Purchase" class="buynow mb0"></form>
</div>

I seem to have got it working exactly as wanted. Can't help feeling that the JS needs tidying though! Seems long for what I suspect should be a smaller piece of code... like I say: my JS is poor to non-existent!
<script type="text/javascript">
function checkTotal() {
document.ppform.os1.value = '';
if (document.getElementById('os10').checked){
var cb1str = document.ppform.cb1.value;
} else {
var cb1str = '';
}
if (document.getElementById('os11').checked){
var cb2str = document.ppform.cb2.value;
} else {
var cb2str = '';
}
if (document.getElementById('os12').checked){
var cb3str = document.ppform.cb3.value;
} else {
var cb3str = '';
}
if (document.getElementById('os13').checked){
var cb4str = document.ppform.cb4.value;
} else {
var cb4str = '';
}
if (document.getElementById('os14').checked){
var cb5str = document.ppform.cb5.value;
} else {
var cb5str = '';
}
if (document.getElementById('os15').checked){
var cb6str = document.ppform.cb6.value;
} else {
var cb6str = '';
}
if (document.getElementById('os16').checked){
var cb7str = document.ppform.cb7.value;
} else {
var cb7str = '';
}
var sum = cb1str.concat(cb2str).concat(cb3str).concat(cb4str).concat(cb5str).concat(cb6str).concat(cb7str);
document.ppform.os1.value = sum;
}
</script>
<div id="buyform">
<form target="paypal" id="ppform" name="ppform" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="myPPbusinessid">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="Form Title">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<div><input type="hidden" name="on0" value="Options"><h5>Options</h5></div>
<div>
<select name="os0" id="os0" required>
<option value="Chosen Product">Any quantity £10.00 GBP</option>
</select>
</div>
<input type="hidden" name="on1" value="Colours">
<div>
<input type="checkbox" name="cb1" value="Red " id="os10" onchange="checkTotal()" /><label for="os10"></label>
<input type="checkbox" name="cb2" value="Green " id="os11" onchange="checkTotal()" /><label for="os11"></label>
<input type="checkbox" name="cb3" value="Orange " id="os12" onchange="checkTotal()" /><label for="os12"></label>
<input type="checkbox" name="cb4" value="Purple " id="os13" onchange="checkTotal()" /><label for="os13"></label>
<input type="checkbox" name="cb5" value="Yellow " id="os14" onchange="checkTotal()" /><label for="os14"></label>
<input type="checkbox" name="cb6" value="Black " id="os15" onchange="checkTotal()" /><label for="os15"></label>
<input type="checkbox" name="cb7" value="Blue " id="os16" onchange="checkTotal()" /><label for="os16"></label>
<input type="hidden" name="os1" value="">
</div>
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="option_select0" value="Options">
<input type="hidden" name="option_amount0" value="10.00">
<input type="hidden" name="option_index" value="0">
<input type="hidden" name="currency_code" value="GBP">
<input type="submit" border="0" name="submit" id="submit" value="Purchase" class="buynow mb0"></form>
</div>

Disable form submission if checkbox is unchecked

I am trying to use function checkbox() to disable form submission.
Can anyone suggest what am i doing wrong?
Thanks in advance.
Here is the code snippet for the JS:
<script type = "text/javascript">
function checkbox() {
if(document.form.checkbox.checked)
{
document.form.submit.disabled=false;
}
else
{
document.form.submit.disabled=true;
}
}
</script>
And here is the HTML code.
<form name="form" action="shop_paypal.php" method="post">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest" />
<input type="hidden" name="item_name" id="item_name"value="YOUTUBE"/>
<select name="amount" id="amount" style="width:256px; height:32px;">
<option value="18" id="1">10,000 PINS - $18 </option>
<option value="35" id="2">20,000 PINS - $35</option>
<option value="75" id="3">30,000 PINS - $75</option>
<option value="140" id="4">50,000 PINS - $140</option>
</select>
<label>Your Facebook fan page URL: </label><br />
<input class="input-box" type="text" />
<input type="text" />
<input type="checkbox" class="checkbox" name="checkbox" id="checkbox"/>
<label class="agree">I agree to Terms & Conditions</label>
<input type="image" src="images/products/buynow.gif" class="submit" onclick= "checkbox();" name = "submit"/>
</form>

The obvious first thought would be:
var form = document.getElementsByTagName('form')[0];
function check (){
return document.getElementById('checkbox').checked;
}
form.addEventListener('submit', check);

Try this and notice how the function is simplyfied and calling is moved to the checkbox itself. When it's checked, button is enabled, and when unchecked, it's disabled (this is also a default state).
Here's also a working demo: http://jsfiddle.net/kL7We/
<script>
function enableSending() {
document.form.submit.disabled = !document.form.checkbox.checked;
}
</script>
<form name="form" action="shop_paypal.php" method="post">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest" />
<input type="hidden" name="item_name" id="item_name"value="YOUTUBE"/>
<select name="amount" id="amount" style="width:256px; height:32px;">
<option value="18" id="1">10,000 PINS - $18 </option>
<option value="35" id="2">20,000 PINS - $35</option>
<option value="75" id="3">30,000 PINS - $75</option>
<option value="140" id="4">50,000 PINS - $140</option>
</select>
<label>Your Facebook fan page URL: </label><br />
<input class="input-box" type="text" />
<input type="text" />
<input type="checkbox" class="checkbox" name="checkbox" id="checkbox" onclick= "enableSending();"/>
<label for="checkbox" class="agree">I agree to</label> Terms & Conditions
<input type="button" src="images/products/buynow.gif" class="submit" name = "submit" value="Send" disabled="disabled"/>