Here is a little html that is supposed to send product information (number of units, size and color of two products) out to Paypal. The units, and size get through to Paypal, but for some reason the drop down menus with the color do not. Can anybody see an error in my code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Order Test Product</title>
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name= "robots" content="index,nofollow" />
</head>
<body>
<h1> Order your footwear here </h1>
<h2> Select your size, colour and quantity desired, then click PAY NOW </h2>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<table width="80%" border="1" align="center">
<tr><th>Product</th><th>Color</th><th>Quantity</th><th width="90">Not Ordeed</th><th>Size Small</th><th>Size Medium</th><th>Size Large</th></tr>
<tr><th> Shoes</th>
<td> <input type="hidden" name="on1" value="color" />
<select name="os1">
<option value="---">Select Color </option>
<option value="brown-shoes">Brown </option>
<option value="black-shoes">Black </option>
<option value="White-shoes">White </option>
</select></td>
<td><input type="text" size="2" maxlength="3" name="quantity_1" /></td>
<td><label>
<input type="radio" name="amount_1" value="0" checked="checked" /></label></td>
<td title="€7"><label>
<input type="radio" name="amount_1" value="7" />
</label></td>
<td title="€10"><label>
<input type="radio" name="amount_1" value="10" /></label></td>
<td title="€13"><label>
<input type="radio" name="amount_1" value="13" /></label></td>
</tr>
<tr>
<th>Boots</th>
<td><input type="hidden" name="on2" value="color" />
<select name="os2">
<option value="---">Select Color </option>
<option value="brown-boots">Brown </option>
<option value="black-boots">Black </option>
<option value="White-boots">White </option>
</select></td>
<td><input type="text" size="2" maxlength="3" name="quantity_2" /><br /></td>
<td><label>
<input type="radio" name="amount_2" value="0" checked="checked" />
</label><br /><br /></td>
<td title="€15"><label>
<input type="radio" name="amount_2" value="15" />
</label></td>
<td title="€20"><label>
<input type="radio" name="amount_2" value="20" />
</label></td>
<td title="€25"><label>
<input type="radio" name="amount_2" value="25" />
</label></td>
</tr>
</table>
<br /><br />
<input type="image" src="../eStore/paynow.jpg" name="submit" alt="PayPal - The safer, easier way to pay online." />
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="upload" value="1" />
<input type="hidden" name="business" value="info#kalikalos.com" />
<input type="hidden" name="currency_code" value="EUR" />
<input type="hidden" name="item_name_1" value="Shoes" />
<input type="hidden" name="item_name_2" value="Boots" />
</form>
</body>
</html>
Refer to Paypal not picking up selection choices, you need to change the code:
<tr><th> Shoes</th>
<td> <input type="hidden" name="on0_1" value="color" />
<select name="os0_1">
<option value="---">Select Color </option>
<option value="brown-shoes">Brown </option>
<option value="black-shoes">Black </option>
<option value="White-shoes">White </option>
</select></td>
.....
<tr>
<th>Boots</th>
<td><input type="hidden" name="on0_2" value="color" />
<select name="os0_2">
<option value="---">Select Color </option>
<option value="brown-boots">Brown </option>
<option value="black-boots">Black </option>
<option value="White-boots">White </option>
</select></td>
Related
I'm trying to implement Auto-fill Paypal checkout in my website, but it is not getting the country I provide. It can only get the quantity after submit. Please see the code below:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<div class="form-group">
<input type="hidden" name="on0" value="Country">
<label class="control-label">Country</label>
<select name="os0" class="form-control">
<option value="US">US</option>
</select>
</div>
<div class="form-group">
<input type="hidden" name="on0" value="Quantity">
<label class="control-label">Quantity</label>
<select name="os0" class="form-control">
<option value="11 units">11 units $3,000.00</option>
<option value="21 units">21 units $6,000.00</option>
<option value="51 units">51 units $12,500.00</option>
</select>
</div>
</form>
Is it possible to encrypt our credit card information entered by user on my website's payment form?
<form method="post" action="/doDirect" enctype="application/x-www-form-urlencoded">
Card Number:<br>
<input type="text" name="card_number" placeholder="CARD NUMBER" id="ccnum" ><br>
First Name:<br>
<input type="text" name="firstName" placeholder="FIRST NAME"><br>
Last Name:<br>
<input type="text" name="lastName" placeholder="LAST NAME"><br>
Card Type:<br>
<select name="ctype" id="ctype" required="required">
<option value="visa">VISA</option>
<option value="master">MASTER</option>
<option value="maestro">MASTERO</option>
<option value="americanexpress">AmericanExpress</option>
</select>
<br>
Expire Date:
<br>
<select name="exmonth" required="required">
<option value="">Month</option>
#for(i<-1 to 12){
#if(i<10){
<option value="0#i">0#i</option>
}else{
<option value="#i">#i</option>
}
}
</select>
/
<select name="exyear" required="required">
<option value="">Year</option>
#for(i<-1990 to 2033){
<option value="#i">#i</option>
}
</select> <br>
CVV2:<br>
<input type="text" name="cvv2" max="999" maxlength="3" required="required">
</div>
}
<input type="submit" value="Checkout" onclick="return isValidCreditCard()">
</form>
If we see, Braintree provides the encryption javascripti so then we won't get the real human readable entry.
Braintree example to do so
<h1>Braintree Credit Card Transaction Form</h1>
<div>
<form action="/create_transaction" method="POST" id="braintree-payment-form">
<p>
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" data-encrypted-name="number" />
</p>
<p>
<label>CVV</label>
<input type="text" size="4" autocomplete="off" data-encrypted-name="cvv" />
</p>
<p>
<label>Expiration (MM/YYYY)</label>
<input type="text" size="2" name="month" /> / <input type="text" size="4" name="year" />
</p>
<input type="submit" id="submit" />
</form>
</div>
And here is the Js
<script src="https://js.braintreegateway.com/v1/braintree.js"></script>
<script>
var braintree = Braintree.create('MIIBCgKCAQEA2ob0KfqpQ2xuy0zlq2a/amOuu0zkVdNHo45xSQVDErJEf2e/8rrAq40eh3C1sjm8DTFt8HLMvPDwi+nmOimuXQwdtkmszmMnJI5HLlvOCPyEgIxPgjKeyE3wzLOtDCMuQ3zKX2yU/v0rhqu4bng5knFoNLjjN6eet00u4Z5Jp84eDeZgevh1+Yb6Ca6P2iLQQherBupxmiKzAtImeyoeUoLDmBO68CFZd0rvxaKbUQ9yW+pHywpQrkSoQs9Z9J9W6HZ+w2YpYWmV0z2tJmYo8RvnKwyplFEC0EPZ+IPXJatcqQlTjQXhboXnCx2WZDQuVdzIRudmxLOM6m+hGetG1wIDAQAB');
braintree.onSubmitEncryptForm('braintree-payment-form');
</script>
Is there any way given by the paypal to encrytp the data using JS or any other tool?
Hope for the positive response
Honest answer.
Don't.
Just ... don't.
PCI compliance is a nasty, hairy beast.
If you handle any Card Holder data, there is LOT that you have to do.
Most folks will "call out" to a credit card server provider who will handle the data then call your website back with a simple "accept/reject" code that you can then respond to.
For a quick overview, see:
http://www.pcicomplianceguide.org/pcifaqs.php
is there anyway at all that i can get the number of lessons chosen to be multiplied by the lesson type and then displayed as a total near the form? It would be far easier for people filling out the form to have an automated calculation rather than having to have to calculate it themselves.
<h4>Lesson Form</h4>
<form action="mailer.php" data-validate="parsley" method="post" >
<p><strong>Full Name<span class="red">*</span></strong></p>
<input name="cf_name" data-required="true" class="send" type="text" />
<p><strong>Email Address<span class="red">*</span></strong></p>
<input name="cf_email" data-required="true" data-type="email" class="send" type="text" />
<p><strong>Cellphone No.<span class="red">*</span></strong></p>
<input name="cf_cell" data-required="true" class="send" type="text" />
<p><strong>Instrument Type<span class="red">*</span></strong></p>
<select name="cf_instrument" size="1" class="option" >
<option value="Piano">Piano</option>
<option value="Vocals">Vocals</option>
<option value="Guitar">Guitar</option>
<option value="Bass">Bass</option>
<option value="Flute">Flute</option></select>
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select name="cf_package_type" size="1" class="option">
<option value="Beginner Lesson - R100">Beginner Lesson - R100</option>
<option value="Advanced Lesson - R130">Advanced Lesson - R130</option>
<option value="Professional Lesson - R160">Professional Lesson - R160</option></select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option" onchange='test()'>
<option value="1" selected="selected">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option></select>
<script src="js/datepair.js"></script>
<p><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-2" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-3" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-4" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
<input id="website" class="using" name="website" type="text" />
<!-- END -->
<input name="Submit" class="submit" value="Book Now" type="submit" /></form>
Would you so great if you could help me with this!
Here's a solution using Javascript.
explanation:
every time the option changes, I'm recalculating the multiplication of the chosen values.
HTML (simplified version of what you have. Notice how I changed the value of your options.)
<select id="lesson-type" onchange='calculate()'>
<option value="100">Beginner Lesson - R100</option>
<option value="130">Advanced Lesson - R130</option>
<option value="160">Professional Lesson - R160</option>
</select>
<select id="number-of-lessons" onchange='calculate()'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label id="result"></label>
JS:
function calculate() {
var l_type = document.getElementById("lesson-type").value;
var num_lessons = document.getElementById("number-of-lessons").value;
document.getElementById("result").innerHTML = l_type * num_lessons;
}
Edit:
in this Example I also call the function once the page loads.
If you want to create simple web calculator with Javascript I would recommend you to take a look at “Appizy”.
It converts instantly a spreadsheet into a standalone web calculation tool in HTML+CSS+JAVASCRIPT. You don’t need to hardcode the whole interface and calculation formulas!
Just create your working calculator with Open- or LibreOffice and then use Appizy.
I hope it can help. Best,
Nicolas
I am trying to have my form change post action dynamically based on a choice made in a dropdown once the user presses submit. i have gotten it to work once the choice is made, but that overrides my validation rules.
the url of the site I am working on is instaloan.glidewebdesign.com
based on a choice from the "Car Title Status" dropdown, I would like it submit a different post action based on the answer.
Thanks in advance for any and all help!!!!!!
function set_form_action()
{
if (page == 'clear_title')
{
window.location = 'https://secure.leads360.com/Import.aspx? Provider=TMXFinance&Client=TMXFinance&CampaignId=1034&Url=http://instaloan.glidewebdesign.com/index.php/thank-you';
}
else if (page == 'lien_on_title')
{
window.location = 'https://secure.leads360.com/Import.aspx?Provider=TMXFinance&Client=TMXFinance&CampaignId=1034&Url=http://instaloan.glidewebdesign.com/index.php/thank-you2';
}
else if (page == 'no_title')
{
window.location = 'https://secure.leads360.com/Import.aspx?Provider=TMXFinance&Client=TMXFinance&CampaignId=1034&Url=http://instaloan.glidewebdesign.com/index.php/thank-you3';
}
}
<form name="homeform" >
<fieldset>
<input name="first" type="text" class="name" placeholder=" First Name" maxlength="10" onkeyup="checkInput2(this)" required="required" />
<input name="last" type="text" class="name" placeholder=" Last Name" maxlength="15" onkeyup="checkInput2(this)" required="required" /></br>
<input name="phone" type='tel' pattern='^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$' title='Phone Number (Format: (999) 999-9999)' class="name" placeholder=" Phone Number" maxlength="10" onkeyup="checkInput(this)" required="required" />
<input name="zip" type="text" name="zipCode" value=""
pattern="[0-9]{5}([-][0-9]{4})?" placeholder=" Zip Code" class="name" maxlength="5" onkeyup="checkInput(this)" required="required" /></br>
<select name="amount" class="dropdown" value="Amount Requested">
<option value="0">Amount</option>
<option value="$100-$499">$100 - $499</option>
<option value="$500-$999">$500 - $999</option>
<option value="$1000-$1999">$1,000 - $1,999</option>
<option value="$2000-$2999">$2,000 - $2,999</option>
<option value="$3000+">$3,000+</option>
</select>
</br>
<select name="status" class="dropdown" value="Car Title Status" >
<option value="smt">Car Title Status</option>
<option value="clear_title">I have a clear car title</option>
<option value="lien_on_title">There′s a lien against my car title</option>
<option value="no_title">I don′t have a car title</option>
</select>
</br>
<input name="submit" type="submit" class="submit" value="Find Out Now" />
</fieldset>
</form>
OK...after pulling out the little hair I have left, I got it figured out...waht I was doing was completely wrong, for what I am trying to accomplish anyway. This is my final working code:
$("#homeform").submit(function(){
if($("#status").val() == "clear_title"){
$(this).attr("action","https://secure.leads360.com/Import.aspx? Provider=TMXFinance&Client=TMXFinance&CampaignId=1034&Url=http://instaloan.glidewebdesign.co m/index.php/thank-you");
}
else if($("#status").val() == "lien_on_title"){
$(this).attr("action","https://secure.leads360.com/Import.aspx? Provider=TMXFinance&Client=TMXFinance&CampaignId=1034&Url=http://instaloan.glidewebdesign.co m/index.php/thank-you2");
}
else if($("#status").val() == "no_title"){
$(this).attr("action","https://secure.leads360.com/Import.aspx? Provider=TMXFinance&Client=TMXFinance&CampaignId=1034&Url=http://instaloan.glidewebdesign.co m/index.php/thank-you3");
}
});
HTML:
<form id="homeform" name="homeform" method="post" action="">
<fieldset>
<input name="first" type="text" class="name" placeholder=" First Name" maxlength="10" onkeyup="checkInput2(this)" required="required" />
<input name="last" type="text" class="name" placeholder=" Last Name" maxlength="15" onkeyup="checkInput2(this)" required="required" /></br>
<input id="phone" name="phone" type='tel' pattern='^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$' title='Phone Number (Format: (999) 999-9999)' class="name" placeholder=" Phone Number" maxlength="10" required="required" />
<input name="zip" type="text" name="zipCode" value=""
pattern="[0-9]{5}([-][0-9]{4})?" placeholder=" Zip Code" class="name" maxlength="5" onkeyup="checkInput(this)" required="required" /></br>
<select name="amount" class="dropdown" value="Amount Requested">
<option value="0">Amount</option>
<option value="$100-$499">$100 - $499</option>
<option value="$500-$999">$500 - $999</option>
<option value="$1000-$1999">$1,000 - $1,999</option>
<option value="$2000-$2999">$2,000 - $2,999</option>
<option value="$3000+">$3,000+</option>
</select>
</br>
<select id="status" name="status" class="dropdown" value="Car Title Status" >
<option value="smt">Car Title Status</option>
<option value="clear_title">I have a clear car title</option>
<option value="lien_on_title">There′s a lien against my car title</option>
<option value="no_title">I don′t have a car title</option>
</select>
</br>
<input name="submit" type="submit" class="submit" value="Find Out Now" />
</fieldset>
</form>
I'm having difficulty passing the same value to two hidden fields. So for example, if I select Product 1, I want both hidden fields to have a value of X.
<select>
<option value="X">Product 1</option>
<option value="Y">Product 2</option>
<option value="Z">Product 3</option>
</select>
<input id="test" name="product_id[]" type="hidden" value="">
<input id="test" name="product_id" type="hidden" value="">
I've tried using onchange methods, but I can only pass a single value only one of the hidden fields, not both.
Here is what I tried, granted I was using the same id for both fields which I realize now won't work.
<form action="../index.php" method="post" >
<div id="Select">
<select id="myselect" onchange="this.form.prodhid.value=this.selectedIndex">
<option>Please Select an Amount</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
<input type="hidden" name="product_id[]" id="prodhid" value="" />
<input type="hidden" name="product_id" id="prodhid" value="" />
<input value="Add to Cart" title="Add to Cart" type="submit">
</form>
You can't access two DOM elements with the same id. So you may change your markup to something like this
<input id="test1" name="product_id[]" type="hidden" value="">
<input id="test2" name="product_id" type="hidden" value="">
Or you can try something like this:
<html>
<head>
<script type="text/javascript">
function change()
{
var list = document.getElementById('test-group')
.getElementsByTagName('INPUT');
for (var i = 0; i < list.length; ++i)
list[i].value = 'X';
}
</script>
</head>
<body>
<select onchange="change()">
<option value="X">Product 1</option>
<option value="Y">Product 2</option>
<option value="Z">Product 3</option>
</select>
<div id="test-group">
<input name="product_id[]" type="hidden" value="">
<input name="product_id" type="hidden" value="">
</div>
</body>
</html>