Set a html form with javascript - javascript

I've been playing with the PayPal code:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="paypal">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="business" value="test#test.org">
<input type="hidden" name="item_name_1" value="Item1">
<input type="hidden" name="amount_1" value="1.00">
<input type="hidden" name="item_name_2" value="Item2">
<input type="hidden" name="amount_2" value="2.00">
<input type="submit" value="PayPal">
</form>
And I want to set the value of item_name_1 and amount_1 via javascript when a button is pressed elsewhere so when that form is submitted the values are all set:
So I have this function run when the add to cart is clicked:
<script type='text/javascript'>
function addtocart(){
paypal.item_name_2.value="Hello!";
}
</script>
I feel I'm on the right tracks but no joy. Help please! TIA

Try this
document.forms["paypal"].item_name_2.value="heelo";

try this
document.forms['paypay']['item_name_2'].value = "hello";

Related

paypal button form will not auto-submit in php file

I've got a paypal button form in a php file that I'm trying to auto-submit using javascript. It seems like it should be very straight forward, but when I test it, the submit button displays, and I am not automatically re-directed to paypal as expected. When I click the submit button I am redirected to paypal and everything looks right. I've read through all the similar posts, which is where I found the script I'm trying to use. I've been at this for several hours and have tried several different recommendations from other posts but I just can't get it to work. Any assistance would be very appreciated! The form code (with some values "xxx"'d out for security) and script is shown below. Note that some of the field values are populated with php.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypalButton" name="paypalButton" target="_top" >
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="xxx">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="<?php echo $_SESSION['item_name'];?>">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="http://example.com/sucess.php">
<input type="hidden" name="cancel_return" value="http://example.com/Cancel.php">
<input type="hidden" name="src" value="1">
<input type="hidden" name="a3" value="<?php echo $_SESSION['price'];?>">
<input type="hidden" name="custom" value="<?php echo $_SESSION['deal_id'].$_SESSION['refresh_token'];?>">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="<?php echo $_SESSION['t3'];?>">
<input type="hidden" name="a1" value="<?php echo $_SESSION['a1'];?>">
<input type="hidden" name="p1" value="1">
<input type="hidden" name="t1" value="Y">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="xxx">
<input type="submit" name="submit">
</form>
<script type="text/javascript">
document.getElementById('paypalButton').submit(); // SUBMIT FORM
</script>
``
I think it should be (even if you have your JS after the Form is created):
window.onload = submit_document();
function submit_document(){
document.getElementById('paypalButton').submit();
}
If you had JQuery, you may even do:
$().ready(function(){
$("#frm1").paypalButton();
});
Would this work for you?

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/

Same form multiple times on page, Get values of submitted form

I have the same form multiple times on my page, I'm trying to use jquery to detect which form is submitted and get its values. But currently only the first form on the page works and the other ones wont trigger. How can I fix this issue?
Forms look like this:
<form id="prepare_payment_form" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery code:
$("#prepare_payment").unbind('click').click(function(e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $('#prepare_payment_form').serialize()
};
});
I figured it out thanks. used this:
form:
<form id="'.time().'" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery:
$("form").submit(function (e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $(this).serialize()
};
});

How to validate a form field inside the validation of different form with JS

How to validate a form field inside the validation of different form
As I have two forms if am i am submitting first form without feeling another form then how can i validate another form in JS.
Please help me
my code is as below
<form action="#" method="post" target="_top" onsubmit="return validate()" id="sponsorform1">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png" width="250px"><br>
<input type="hidden" name="cmd" value="_xclick"><br>
<input type="hidden" name="business" value=""><br>
<input type="hidden" name="no_shipping" value="1"><br>
<input type="hidden" name="currency_code" value="GBP"><br>
<input type="hidden" name="no_note" value="1"><br>
<input type="hidden" name="rm" value="2"><br>
<input type="hidden" name="amount" value="300"><br>
<input type="hidden" name="item_name" value=""><br>
<input type="hidden" name="custom" value="">
</form>
my second form is:
<form action="#" method="post" target="_top" onsubmit="return validate()"
id="ninja_forms_form_2">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png" width="250px"><br>
<input type="text" name="name" ><br>
<input type="text" name="surname" ><br>
</form>
if i am submitting my first form onclick of image then i must validate my second form.
how can i do this in Javascript???
please help me....
My Javascript for validation is
<script type="text/javascript">
function validate() {
alert('hi');
if (!document.getElementById("ninja_forms_form_2").submit()) {
alert('Please Fill up the Below Form');
var x=callme();
return false;
}
}
function callme() {
alert('call');
}
</script>
As its not showing this alert 'call'
please help as am very new to this .
Try this ..
<html>
<head>
<script type="text/javascript">
function validate() {
var name = document.getElementById("name").value;
var surname = document.getElementById("surname").value;
alert(name + " " + surname);
if((name==null || name == "")
&& (surname==null || surname=="")){
alert('Please Fill up the Below Form');
return false;
}
return true;
}
</script>
</head>
<body>
<form action="#" method="post" target="_top"
onsubmit="return validate()" id="sponsorform1">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png"
width="250px"><br> <input type="hidden" name="cmd"
value="_xclick"><br> <input type="hidden"
name="business" value=""><br> <input type="hidden"
name="no_shipping" value="1"><br> <input type="hidden"
name="currency_code" value="GBP"><br> <input
type="hidden" name="no_note" value="1"><br> <input
type="hidden" name="rm" value="2"><br> <input
type="hidden" name="amount" value="300"><br> <input
type="hidden" name="item_name" value=""><br> <input
type="hidden" name="custom" value="">
</form>
my second form is
<form action="#" method="post" target="_top"
onsubmit="return validate()" id="sponsor">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png"
width="250px"><br> <input type="text" id="name"><br>
<input type="text" id="surname"><br>
</form>
</body>
</html>
Note that I am using id attribute instead of name for input fields.

minicart.js not working, cart is not popping up

I am using Minicart.JS for my simple paypal shopping cart. But this is not working as it should. The cart is not popping up if I click 'add to cart' button.
Here's my code.
<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.3/minicart.min.js"></script>
<script>
paypal.minicart.render();
</script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="labs-feedback-minicart#paypal.com" />
<input type="hidden" name="item_name" value="Test Product" />
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="shipping2" value="1.50">
<input type="hidden" name="shipping" value="2.50">
<strong>Test Product</strong>
<p>
<label><input type="checkbox" id="terms" name="terms" value="" /> I agree to the terms</label>
</p>
<input type="submit" name="submit" value="Add to cart" />
</form>
<script>
paypal.minicart.render();
paypal.minicart.cart.on('checkout', function (evt) {
var hasAgreed = !!document.getElementById('terms').checked;
if (!hasAgreed) {
alert('You must agree to the terms!');
evt.preventDefault();
}
});
</script>
</body>
</html>
Here is the actual site. , I found an error in console that said:
Uncaught TypeError: Cannot call method 'appendChild' of null
I am not sure how to fix this, please let me know what's wrong with my setup. Thanks.
You need to change the Add to cart button to not be saved on PayPal (In Profit and loss Section) and also unprotect code after the button is created right before you copy and paste it :)
Hope this helps :)

Categories

Resources