Updating multiple hidden fields - javascript

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

Related

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.

Checkout Is not working properly in Html webpage

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'];
}
?>

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.

Load Div after Submit Required Fields on PHP Form

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">

Categories

Resources