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>
Related
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/
I have a form asking for amount of widgets they want to purchase, and the end goal would be changing the paypal cost accordingly.
How can I adjust my code to obtain the desired outcome?
var amountOfWidgets = document.getElementById('firstBox').value;
document.getElementById("price").innerHTML = "<input type="hidden" name="amount" value=amountOfWidgets>"
}
</script>
<div id="myCheckout">
</br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="Example#gmail.com">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="1">
<input type="hidden" id="price" name="amount" value="6.99">
<input type="hidden" name="no_shipping" value="0">
Give form a name. PayPal usually names it _xclick.
Javascript:
document._xclick.amount.value = price;
<input type="text" id="usd" size="20" name="usd" onchange="workaround()"
function workaround() {
var amount = document.getElementById("usd").value;
paypal.Button.render({
rest of paypal code...
...
amount: { total: amount , currency: 'USD' }
...
}
}
Will do the trick...
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>
I have a paypal form that I want to dynamically change the email address in based on a radio button in the form. In other words, if one of the radio buttons is checked then the form would send one email address value and if the other was checked it would send another. Here is the sample code I have so far and what I've tried to do.
<form name="myform" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="email#theaddress.com">
<input type="hidden" name="item_name" value="item_name">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="a3" value="60">
<input type="radio" name="operation" value="0" checked>Joe Bob
<input type="radio" name="operation" value="1">Hank
<input type="submit" src="img/ico/joinow.png" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<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>
Once again, if someone selects JoeBob I want the email to be a different email address then if someone selected Hank.
Thanks!
var radios = document.querySelectorAll("input[type='radio']");
for(var i=0;i<radios.length;i+++){
radios[i].onchange = function(){
var email= document.querySelector("input[name='business']");
if(this.value==0) // selected Joe Bob
email.value= "email for Joe";
}
else{ // Selected Hank
email.value= "email for Hank";
}
}
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"/>