I have a problem in checkout, i included add to cart code in my webpage and it is working but the checkout button is not working. What is the code or link that i should add in the webpage .The java script i am using is http://cdnjs.cloudflare.com/ajax/libs/minicart/3.0.6/minicart.min.js
and the code in webpage is
<form action="" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="example#minicartjs.com" />
<input type="hidden" name="item_name" value="MAVJ10015" />
<input type="hidden" name="amount" value="10.00" />
<input type="hidden" name="currency_code" value="INR" />
<input type="hidden" name="return" value="http://www.minicartjs.com/?success" />
<input type="hidden" name="cancel_return" value="http://www.minicartjs.com/?cancel" />
<input type="image" name="submit" src="images/add to cart.png" class="button" style="margin-left: 73px; margin-top: 6px; height: 21px;"/>
</fieldset>
</form>
here i am using php to process the post data.
the changes i made are
given id to form
given id to button
submit the cart using the jsvascript
$( "#button_id" ).click(function() { $( "#form_id" ).submit(); });
and php code to process the data.
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
print_r($_POST);
echo "</br></br>";
echo "business : ". $_POST['business'];
}
?>
the entire code is here
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="post" id="form_id">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="example#minicartjs.com" />
<input type="hidden" name="item_name" value="MAVJ10015" />
<input type="hidden" name="amount" value="10.00" />
<input type="hidden" name="currency_code" value="INR" />
<input type="hidden" name="return" value="http://www.minicartjs.com/?success" />
<input type="hidden" name="cancel_return" value="http://www.minicartjs.com/?cancel" />
<input id="button_id" type="image" name="submit" value="submit" src="images/add to cart.png" class="button" style="margin-left: 73px; margin-top: 6px; height: 21px;" />
</fieldset>
</form>
</body>
<script type="text/javascript">
$( "#button_id" ).click(function() { $( "#form_id" ).submit(); });
</script>
</html>
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
print_r($_POST);
echo "</br></br>";
echo "business : ". $_POST['business'];
}
?>
Related
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?
I'm trying to update 2 hidden fields of a form based on the checkbox toggle. For some reason, only the first field is getting update and second one doesn't.
Any ideas what am I missing?
echo '
<form id="form1" action="';
echo $paypalURL;
echo '" method="post"> <p></p>';
?>
<input type="hidden" name="business" value="<?php echo $paypalID; ?>">
<input type='hidden' id="item_number" name="item_number" value="1">
Other Amount: <input id="amount" name="amount" value=""> <p></p>
<input type='hidden' id="currency_code" name="currency_code" value="">
<input type="hidden" id="src" value="" name="src" />
<input type="hidden" name="cmd" value="_donations">
Recurring donation?:
<input type="checkbox" id="checkbox" name="checkbox" value="" />
<script type="text/javascript">
var checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', function()
{
if (this.checked) {
document.getElementById('src').value = '1'
document.getElementById('cmd').value = '_xclick-subscriptions'
}
else
{
document.getElementById('src').value = ''
document.getElementById('cmd').value = '_donations'
}
}, false)
</script>
<!-- Specify URLs -->
<input type='hidden' name='cancel_return' value='http://localhost/wordpress1/wordpress/cancel.php'>
<input type='hidden' name='return' value='http://localhost/wordpress1/wordpress/success.php'>
<!-- Display the payment button. -->
<p><input type="image" name="submit" border="0"
src="images/PayPal-Donate-Button-PNG-Clipart.png" width="80" hight="50" alt="Donate Now"> </p>
<img alt="" border="0" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form>
It works, you just didn't add id="cmd" to hidden <input>
Your version:
<input type="hidden" name="cmd" value="_donations">
Correct varsion:
<input type="hidden" id="cmd" name="cmd" value="_donations">
Regards, KJ
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.
I have a hidden div I am loading on click of submit button. I also have .notShouldBeBlank on the script for the form. What is the right method so that the php sends results and the hidden div will not load until all required fields are complete? It's currently loading the hidden div and sending results as soon as I click submit. What am I doing wrong?
<?php
$name = $_POST['name'];
$address = $_POST['address'];
$city = $_POST['city'];
$state = $_POST['state'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$name = stripslashes($name);
$address = stripslashes($address);
$city = stripslashes($city);
$state = stripslashes($state);
$phone = stripslashes($phone);
$email = stripslashes($email);
$to = 'myemail#thisismywebsite.com ' . ', ';
$to .= $Email;
$from = "$Email ";
$subject = 'Look and Learn: Applicant';
$message = <<<EOF
<html>
<body bgcolor="#FFFFFF">
<b>Look and Learn: Applicant</b><br /><br />
<b>Name:</b> $name<br />
<b>Address:</b> $address / $city, $state<br />
<b>Phone:</b> $phone<br />
<b>Email:</b> $email<br />
</body>
</html>
EOF;
//end of message
// Additional headers
$headers .= 'From: Razor Chic of Atlanta <info#thebrlab.com>' . "\r\n";
$headers .= "Content-type: text/html\r\n";
$to = "$to";
mail($to, $subject, $message, $headers);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sign Up</title>
<link rel="stylesheet" href="css/sign-up.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#thankyou').show();
$("#hidden1").html($("#thankyou").html());
});
});
</script>
<script>
$('#myContact').submit(function () {
$.each($('#myContact .notShouldBeBlank'), function()
{
if($(this).val() == ''){
$(this).after('<span class="error">This field is required.</span>');
}
});
// Other groups validated here
}
</script>
</head>
<body style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;">
<div id="wrap">
<div id="hidden1"></div>
<div style="font-size: 18px; font-weight: bold; font-family: Verdana, Geneva, sans-serif;">
Sign-Up: Look And Learn Class
</div>
<br>
<form id="form" action="" name="myContact" onSubmit="return validateForm()" method="post" enctype="multipart/form-data">
<div>
<label>
<span>Name: *</span><br>
<input name="name" type="text" size="64" placeholder="Name">
</label>
</div>
<div>
<table width="100%" >
<tr>
<td width="230">
<label>
<span>Address: *</span><br>
<input placeholder="Address" size="100" type="text" name="address" maxlength="100">
</label>
</td>
<td width="160">
<label>
<span>City *</span><br>
<input placeholder="City" name="city" type="text" id="city" maxlength="100" />
</label>
</td>
<td width="189">
<label>
<span>State *</span><br>
<input placeholder="State" name="city" type="text" id="city" maxlength="3" />
</label>
</td>
</tr>
</table>
</div>
<div>
<label>
<span>Phone: *</span><br>
<input placeholder="Phone" size="64" type="text" name="phone">
</label>
</div>
<div>
<label>
<span>Email: *</span><br>
<input placeholder="Email address" size="64" type="email" name="email">
</label>
</div>
<div>
<button name="submit" type="submit" id="submit">S I G N U P</button>
</div>
</form>
<p>Note: * Fields are required</p>
</div>
<!---- THANK YOU---->
<?php
if($sent){
echo '<div id="thankyou" style="display:block;">';
}
else{
echo '<div id="thankyou" style="display:none;">';
}
?>
<!---- PAY BEGINS ---->
<div id="paynow1-wrapper">
<div id="paynow1">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta#gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Deposit">
<input type="hidden" name="amount" value="100.00">
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">
<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">
</form>
</div>
</div>
<!---- PAY ENDS ---->
<!---- PAY BEGINS ---->
<div id="paynow2-wrapper">
<div id="paynow2">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta#gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Balance">
<input type="hidden" name="amount" value="99.00">
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">
<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">
</form>
</div>
</div>
<!---- PAY ENDS ---->
<!---- PAY BEGINS ---->
<div id="paynow3-wrapper">
<div id="paynow3">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta#gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Full Payment">
<input type="hidden" name="amount" value="199.00">
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">
<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">
</form>
</div>
</div>
<!---- PAY ENDS ---->
<img src="images/thank-you/look-and-learn1.png" />
</div>
<!---- THANK YOU---->
</body>
</html>
Your form ID is "form", not "myContact". Change form id to myContact.
Then you have 2 "onsubmit" events, one in jQuery and the other inline (onSubmit). Try to merge them into one to avoid unexpected behaviors.
Also, make sure you return false on your submit event function if the validation fails, so the submit is halted.
Update 1
JavaScript:
$('#myContact').submit(function () {
$.each($('#myContact .notShouldBeBlank'), function()
{
if($(this).val() == ''){
$(this).after('<span class="error">This field is required.</span>');
return false;
}
});
/* Uncomment the line below if you really have a validateForm() function */
// return validateForm()
}
HTML:
<form id="myContact" action="" name="myContact" method="post" enctype="multipart/form-data">
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 :)