I am trying to dynamically update the amount and currency value fields in the following PayPal Buy Now form based on the radio button selection using the function below. I am unable to get it to pass the currency and amount values to the form.
The form:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" name="f" id="f">
<input name="audio-book" type="radio" class="sum" value="54.95" checked="checked" /> NZ$ 54.95
<input name="audio-book" type="radio" class="sum" value="43.95" /> AU$ 43.95
<input name="audio-book" type="radio" class="sum" value="45.00" /> US$ 45.00
<input name="audio-book" type="radio" class="sum" value="34.95" /> EU€ 34.95
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="xxxxxxxxxx">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="item_name" value="xxxxxxxxx">
<input type="hidden" name="amount" id="amount" value="">
<input type="hidden" name="currency_code" id="currency_code" value="">
<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="rm" value="1">
<input type="hidden" name="return" value="xxxxx">
<input type="hidden" name="cancel_return" value="xxxxxx">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image" class="alignleft wp-image-2884 size-full" src="../uploads/btn_buynow_pp_142x27.png" border="0" name="submit1" id="button" onclick="javascript:doSubmit();" alt="PayPal - The safer...">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
and the function:
<script>
function doSubmit(){
var $cost=0;
var $code="";
var $currency=['NZD', 'AUD', 'USD', 'EUR'];
var parent = document.getElementsByClassName('sum');
for (i = 0; i<parent.length; ++i){
if(parent[i].checked === true){
cost = Number(parent[i].value);
code = currency[i];}
}
document.getElementById('amount').value = cost;
document.getElementById('currency_code').value = code;
document.getElementById('f').submit();
return true;
}
</script>
It seems like everything is fine with the code . The only thing you need to change in the script is the below line :
Currently you have :
code = currency[i];
Change it to :
code = $currency[i];
I just tried it at my end and it worked .
Please have look at my sample fiddle:
http://jsfiddle.net/ghtgggb2/
Couple of things
move the script to the bottom (not sure where it is in your HTML)
move the function to the form for testing onsubmit="return doSubmit()"
Related
Here is my code for going to the Paypal payment gateway for the item after a click on the "Buy Now" Button, But I want this function to be without even click on the "Buy Now" button, my meaning is when then webpage opened automatically go to the Paypal payment gateway without a click on "Buy Now" button. Is it possible? Any guidance will be very helpful.
<script type="text/javascript" src="https://test.com/java.js"></script>
<form target="PayPal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin:0;padding:0;">
<input type="hidden" name="business" value="test#yahoo.com">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="item_name" value="Membership">
<input type="hidden" name="item_number" value="1 Month">
<input type="hidden" name="amount" value="23">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="handling" value="">
<input type="hidden" name="return" value="https://test.com/Successful_Payment.php">
<input type="hidden" name="cancel_return" value="">
<input type="hidden" name="undefined_quantity" value="0">
<input type="hidden" name="receiver_email" value="test#yahoo.com">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="0">
<div id="PayPal6" style="position:absolute;left:445px;top:470px;width:134px;height:65px;">
<input type="image" name="submit" src="images/buynow.png" style="position:absolute;left:0px;top:0px;" alt="Make payments with PayPal, it's fast, free, and secure!">
</div>
</form>
U can achieve that by JavaScript:
window.onload = function(){
// u should put a name for your form
document.forms['my_form_name'].submit();
}
EDIT: You could also submit the PayPal submit button instead of the form:
window.onload = function(){
document.getElementById('paypalButton').submit();
}
Here is my completed code for doing function for the form of going to the PayPal payment gateway by javascript without clicking on the "BUY NOW" button. Just my problem is here, this going to opening a new window to do that, I want this function to do it on the same window. Please guide me on how can we fix it? Any help will be appreciated.
window.onload = function() {
// u should put a name for your form
document.forms['my_form'].submit();
}
<form target="PayPal" id="my_form" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin:0;padding:0;">
<input type="hidden" name="business" value="test#yahoo.com">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="item_name" value="Membership">
<input type="hidden" name="item_number" value="1 Month">
<input type="hidden" name="amount" value="23">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="handling" value="">
<input type="hidden" name="return" value="https://test.com/Successful_Payment.php">
<input type="hidden" name="cancel_return" value="">
<input type="hidden" name="undefined_quantity" value="0">
<input type="hidden" name="receiver_email" value="test#yahoo.com">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="0">
</form>
```
remove attribute target="Paypal" from the form
I have a form element which contains a bunch of input elements (however, I expect it would be the same if instead of a form, the inputs were in a given div) . JavaScript needs the the values within the form multiple times. Instead of using a bunch of var id=$('#id').val(); script, how can I grab everything in the form, and then use the values like mainForm.id?
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
EDIT
Not perfect, but maybe just:
var obj=document.getElementById('mainForm');
console.log(obj.id.value);
Try creating an empty object , utilizing $.each() to populate object with property id of input , object value with value of input
var obj = {};
$.each($("#mainForm input"), function(key, val) {
obj[val.id] = val.value
});
console.log(obj)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
Without jQuery
var obj = {};
var inputs = document.querySelectorAll("#mainForm input");
[].forEach.call(inputs, function(val, key) {
obj[val.id] = val.value;
});
console.log(obj)
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
$('#mainForm input').each(function() {
// do what you want with the input here
// console.log($(this).attr('id')); will print the id of every input for example
});
I created a Paypal button for both one-time & recurring donations using some jQuery to switch out the input values so both buttons could be used.
The links function perfectly in both Chrome and Firefox, but when I test it in Safari the submit button just takes it to Paypal's main page, not the checkout. Does anyone have a clue why this might be happening?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="paypal-form">
<input id="paypal-cmd" type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="TBX92MDZ4GV64">
<input type="hidden" name="lc" value="US">
<input id="paypal-item-name" type="hidden" name="item_name" value="Monthly Donation to Growing Home">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="src" value="1">
<input type="hidden" name="a3" value="75.00">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-SubscriptionsBF:btn_subscribe_SM.gif:NonHosted">
<div id="paypal-donate">
<h2>Donate</h2>
<p><input id="paypal-amount" type="text" name="a3" maxlength="10" placeholder="$75" value="$75"></p>
<div id="donate-once" class="button-off">Today</div>
<div id="donate-monthly" class="button-on">Monthly</div>
</div>
<div id="paypal-share">
<h2>Share</h2>
<input type="hidden" name="on0" value="Why do you give?">
<p><textarea id="paypal-reason" name="os0" placeholder="What's your reason for giving?"></textarea></p>
<input type="hidden" name="on1" value="Can we quote you?">
<input type="checkbox" name="os1" id="paypal-quote"><label for="paypal-quote"></label>
<span class="paypal-quote-label">Can we quote you?<span>
</div>
<div id="paypal-submit">
<h2>Submit</h2>
<p>Thank you so much for donating.</p>
<input type="image" src="donate_sm.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</div>
var onceButton = jQuery('#donate-once');
var monthlyButton = jQuery('#donate-monthly');
jQuery("input[type=checkbox]").change(function(){
cb = jQuery(this);
cb.val(cb.prop('checked'));
});
jQuery(onceButton).click(function(){
jQuery(onceButton).removeClass('button-off').addClass('button-on');
jQuery(monthlyButton).removeClass('button-on').addClass('button-off');
var a = jQuery("input[name=no_note]").val();
if (a === '1') jQuery("#paypal-cmd").val("_donations"), jQuery("#paypal-item-name").val("One-Time Donation to Growing Home"), jQuery("input[name=src]").val("0"), jQuery("input[name=no_note]").val("0"), jQuery("input[type='hidden'][name=a3]").remove(), jQuery("input[name=a3]").attr('name', 'amount'), jQuery("input[name=p3]").remove(), jQuery("input[name=t3]").remove();
});
jQuery(monthlyButton).click(function(){
jQuery(monthlyButton).removeClass('button-off').addClass('button-on');
jQuery(onceButton).removeClass('button-on').addClass('button-off');
var a = jQuery("input[name=no_note]").val();
if (a === '0') jQuery("#paypal-cmd").val("_xclick-subscriptions"), jQuery("#paypal-item-name").val("Monthly Donation to Growing Home"), jQuery("input[name=src]").val("1"), jQuery("input[name=no_note]").val("1"), jQuery("input[name=amount]").attr('name', 'a3'), jQuery('#paypal-form').append('<input type="hidden" name="a3" value="75.00"><input type="hidden" name="p3" value="1"><input type="hidden" name="t3" value="M">');
});
Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?
Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.
A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example