So far everything is lined up except the last search box. I'm kinda new and it's taking me way to long to figure this out. I need to align all of my search boxes, drop downs, and radio buttons on the same line and centered. The search buttons and radio buttons keep moving to the line below. I added float left to the form and it brought the radio button up but it seems out of alignment. Ill be adding a calendar option and need it all on the same line. what's the best way to do this?
.table
{
float:left;
}
<div class="table">
<select>
<option value="Last Name">Last Name</option>
<option value="First Name">First Name</option>
<option value="Employee ID">Employee ID</option>
<option value="Job ID">Job ID</option>
<option value="Phone">Phone</option>
<option value="Ipad Number">Ipad Number</option>
</select>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
<select>
<option value="Phones">Phones</option>
<option value="Tablets">Tablets</option>
<option value="Computers">Computers</option>
<option value="Cellphone">Cellphone</option>
<option value="Docks">Docks</option>
<option value="Monitors">Monitors</option>
<option value="Gloves">Gloves</option>
<option value="Sleeves">Sleeves</option>
</select>
</div>
<form>
<input type="radio" name="Before" value="male"> Before<br>
<input type="radio" name="After" value="female"> After<br>
</form>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
This will put everything in one line.
.table {
display: inline-block
}
.Search {
width: 10%
}
<div class="table">
<select>
<option value="Last Name">Last Name</option>
<option value="First Name">First Name</option>
<option value="Employee ID">Employee ID</option>
<option value="Job ID">Job ID</option>
<option value="Phone">Phone</option>
<option value="Ipad Number">Ipad Number</option>
</select>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
<select>
<option value="Phones">Phones</option>
<option value="Tablets">Tablets</option>
<option value="Computers">Computers</option>
<option value="Cellphone">Cellphone</option>
<option value="Docks">Docks</option>
<option value="Monitors">Monitors</option>
<option value="Gloves">Gloves</option>
<option value="Sleeves">Sleeves</option>
</select>
<input type="radio" name="Before" value="male"> Before
<input type="radio" name="After" value="female"> After
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
</div>
Forms are block elements. You can change this via CSS:
form { display: inline }
or
form {display: inline-block }
In the following snippet, I'd like it to change prices, depending on which style is selected by the user.
So for style 1, prices are: 1$, 2$ and 3$.
For style 2, price are: 4$, 5$ and 6$.
And for style 3, prices are: 7$, 8$ and 9$.
How can I modify that code to make it change prices, depending on which style is chosen?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="testtest#hotmail.com">
<input type="hidden" name="lc" value="BM">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<table>
<tr>
<td>
<input type="hidden" name="on1" value="Which style?">Which style?</td>
</tr>
<tr>
<td>
<select name="os1">
<option value="Style 1">Style 1</option>
<option value="Style 2">Style 2</option>
<option value="Style 2">Style 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="on0" value="How many?">How many?</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="10 -">10 - $1.00 USD</option>
<option value="100 -">100 - $2.00 USD</option>
<option value="1000 -">1000 - $3.00 USD</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="10 -">
<input type="hidden" name="option_amount0" value="1.00">
<input type="hidden" name="option_select1" value="100 -">
<input type="hidden" name="option_amount1" value="2.00">
<input type="hidden" name="option_select2" value="1000 -">
<input type="hidden" name="option_amount2" value="3.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" 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">
</form>
You can hook the Change event in jQuery and update the values accordingly.
The script included below updates your hidden field values and changes the text of the second dropdown.
You'll need to include the following line and the script either in the <head> section of your website or before the closing body tag </body>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Script:
$('select[name=os1]').change(function() {
var style = $( this ).val();
var price1, price2, price3;
if(style == "Style 1"){
price1 = "1.00";
price2 = "2.00";
price3 = "3.00";
} else if(style == "Style 2"){
price1 = "4.00";
price2 = "5.00";
price3 = "6.00";
} else if (style == "Style 3"){
price1 = "7.00";
price2 = "8.00";
price3 = "9.00";
}
$('select[name=os0] option[value=10]').text("10 - $" + price1 + " USD");
$('select[name=os0] option[value=100]').text("100 - $" + price2 + " USD");
$('select[name=os0] option[value=1000]').text("1000 - $" + price3 + " USD");
$("input[name=option_amount0]").val(price1);
$("input[name=option_amount1]").val(price2);
$("input[name=option_amount2]").val(price3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="testtest#hotmail.com">
<input type="hidden" name="lc" value="BM">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<table>
<tr>
<td>
<input type="hidden" name="on1" value="Which style?">Which style?</td>
</tr>
<tr>
<td>
<select name="os1">
<option value="Style 1">Style 1</option>
<option value="Style 2">Style 2</option>
<option value="Style 3">Style 3</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="on0" value="How many?">How many?</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="10">10 - $1.00 USD</option>
<option value="100">100 - $2.00 USD</option>
<option value="1000">1000 - $3.00 USD</option>
</select>
</td>
</tr>
</table>
<label id="output"></label>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="10">
<input type="hidden" name="option_amount0" value="1.00">
<input type="hidden" name="option_select1" value="100">
<input type="hidden" name="option_amount1" value="2.00">
<input type="hidden" name="option_select2" value="1000">
<input type="hidden" name="option_amount2" value="3.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" 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">
</form>
Note - I changed the option values of os0 from 100 - to 100 and so on.
I'm having some trouble with a form I'm trying to create in PayPal for a WordPress website. It's a form that allows for different types of registrations and quantities - both of these work. At the end, my client also wants an option to donate any amount - this is not working.
The code at the bottom is only adding the amount entered as a 'note' to paypal, not as an actual monetary value to the amount being paid. I've tried 'name="amount"' as well.
<table>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="business" type="hidden" value="EMAIL" />
<input name="cmd" type="hidden" value="_xclick" />
<input name="item_name" type="hidden" value="Camper Registration" />
<input name="currency_code" type="hidden" value="USD" />
<!-- Provide a dropdown menu option field with quantity. -->
<tr>
<td><input type="hidden" value="Quantity" />How Many Campers?</td>
<td><select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td></tr>
<!-- Provide a dropdown menu option field with prices. -->
<tr>
<td><input name="on1" type="hidden" value="Payment Type" />Payment Amount</td>
<td><select name="os1">
<option value="deposit">Nonrefundable Deposit $100</option>
<option value="Before1/1">(Before 1/1/15) $210</option>
<option value="Before4/1">(Before 4/1/15) $225</option>
<option value="After4/1">(After 4/1/15) $250</option>
</select></td></tr>
<!-- Specify the price that PayPal uses for each option. -->
<input name="option_index" type="hidden" value="1" />
<input name="option_select0" type="hidden" value="deposit" />
<input name="option_amount0" type="hidden" value="100" />
<input name="option_select1" type="hidden" value="Before1/1" />
<input name="option_amount1" type="hidden" value="210" />
<input name="option_select2" type="hidden" value="Before4/1" />
<input name="option_amount2" type="hidden" value="225" />
<input name="option_select3" type="hidden" value="After4/1" />
<input name="option_amount3" type="hidden" value="250" />
<!-- Provide place for other donations. -->
<tr>
<td>Other Amount:</td>
<input type="hidden" name="on0" value="Other Amount">
<td><input name="os0" type="text" value="0"></td></tr>
<!-- Provide place for notes. -->
<tr>
<td>Child's Name(s) and Comments:</td>
<input type="hidden" name="on3" value="Notes">
<td><textarea name="os3" rows="4" cols="50" wrap></textarea></td></tr>
</table>
<!-- Display the payment button. -->
<input alt="PayPal - The safer, easier way to pay online" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" type="image" />
<img src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" />
</form>
this is the code in question:
<tr>
<td>Other Amount:</td>
<input type="hidden" name="on0" value="Other Amount">
<td><input name="os0" type="text" value="0"></td></tr>
Ok, the code below works. But the thing is that it doesn't allow the user to alter the amount purchased.
I'm trying to figure out how to have the user, once they've purchased a ticket and get to paypal page, to be able to alter the amount of tickets they would like to have.
As it is, once you land on the paypal page, it shows what you purchased, and that's it, pretty much.
Any advice?
EDIT
If anyone needs an example of what I'm talking about, here's one: Paying for multiple items (at once) via paypal
Look at the image at bottom. Do you see the quantity column? That's what I meant. But when I tried what they did in that one, it doesn't work. I think it's because in that one, it uses _cart, wheres mine is _donation?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_donations">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Name Of Business">
<input type="hidden" name="item_number" value="Tickets">
<select name="amount">
<optgroup label="Sponsorship">
<option value="15000" name="platinum">$15,000 - Platinum Sponsorship</option>
<option value="10000">$10,000 - Gold Sponsorship</option>
<option value="5000">$5000 - Silver Sponsorship</option>
<option value="2500">$2,500 - Bronze Sponsorship</option>
</optgroup>
<optgroup label="Individual Seating">
<option value="500">$500 per seat</option>
</optgroup>
<optgroup label="Program Book Tribute Journal Ad">
<option value="600">$600 - Half Page</option>
<option value="1000">$1000 - Full Page</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<br /><br />
<!-- Display the payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
EDIT TWO
Ok, kinda confused about how to get the item increments to show up.
Advice would be appreciated.
These are the changes I've added to the post above:
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
Then to have the increment ability added ... I'm really confused by these lines and how to make it work for mine.
<input type="hidden" name="item_name_1" value="Item Name 1">
<input type="hidden" name="amount_1" value="1.00">
So, for the first item in my drop-down box (ie, the platinum ticket), I've modified it slightly, adding the name value:
<option value="15000" name="platinum">$15,000 - Platinum Sponsorship</option>
And then,
<input type="hidden" name="item_name_1" value="platinum">
<input type="hidden" name="amount_1" value="15000.00">
But as far as I can tell, that doesn't allow the user to change the quantity to what they want.
End of EDIT TWO
EDIT THREE Based on Jared's code beneath but posting a full version of it.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="BLAHBLAH">
<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Corporation">
<input type="hidden" name="item_number" value="Ticket Purchase">
<select name="amount">
<optgroup label="Sponsorship">
<option value="Platinum Sponsorship">$15,000 - Platinum Sponsorship</option>
<option value="Gold Sponsorship">$10,000 - Gold Sponsorship</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Platinum Sponsorship">
<input type="hidden" name="option_amount0" value="15000.00">
<input type="hidden" name="option_select1" value="Gold Sponsorship">
<input type="hidden" name="option_amount1" value="10000.00">
<input type="hidden" name="option_index" value="0">
<br /><br />
<!-- Display the payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
All I get from this form is Your shopping cart is empty.
END OF EDIT THREE
EDIT FOUR
1. <input type="hidden" name="item_name" value="Donation">
2. <input type="hidden" name="button_subtype" value="products">
3. <input type="hidden" name="no_note" value="1">
4. <input type="hidden" name="no_shipping" value="2">
5. <input type="hidden" name="currency_code" value="USD">
6. <input type="hidden" name="weight_unit" value="lbs">
7. <input type="hidden" name="add" value="1">
8. <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
Do we need 2, 3, 4, & 6?
I get one, it's a way to label it, right?
2, what is button_subtype?
3, that's to say that there is no more additional info included, right?
4, is that needed? it's just purchase of a ticket online.
5, obviously needed.
6, is weight_unit really needed? as mentioned previously, it's just an online ticket.
7, is? I'm guessing a way for the incrementation to happen?
8, is to denote that the button is not hosted from paypal, right?
You don't have to answer any of those questions, and your answer has been accepted. Just wondering, is all.
Thank you again, Jared.
END OF EDIT FOUR
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="Your Email Here">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="weight_unit" value="lbs">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<table>
<tr><td><input type="hidden" name="on0" value="Sponsorship"></td></tr><tr><td><select name="os0">
<optgroup label="Sponsorship">
<option value="Platinum Sponsorship">Platinum Sponsorship $15,00.00 USD</option>
<option value="Gold Sponsorship">Gold Sponsorship $10,000.00 USD</option>
</optgroup>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Platinum Sponsorship">
<input type="hidden" name="option_amount0" value="15000.00">
<input type="hidden" name="option_select1" value="Gold Sponsorship">
<input type="hidden" name="option_amount1" value="10000.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" 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">
</form>
This is how your button should look, this is from paypal.
The donation button does not allow you to use a quanity because its intended for a donation, not a purchase. You can, however have the function of the add to cart button but appear as a donation button. Simply:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Specify a Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Name Of Business">
<input type="hidden" name="item_number" value="Tickets">
<select name="amount">
<optgroup label="Sponsorship">
<option value="15000" name="platinum">$15,000 - Platinum Sponsorship</option>
<option value="10000">$10,000 - Gold Sponsorship</option>
<option value="5000">$5000 - Silver Sponsorship</option>
<option value="2500">$2,500 - Bronze Sponsorship</option>
</optgroup>
<optgroup label="Individual Seating">
<option value="500">$500 per seat</option>
</optgroup>
<optgroup label="Program Book Tribute Journal Ad">
<option value="600">$600 - Half Page</option>
<option value="1000">$1000 - Full Page</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<br /><br />
<!-- Display the Donation payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
<input type="hidden" name="Ticket"><select name="os0">
<optgroup label="Sponsorship">
<option value="Platinum Sponsorship">$15,000 - Platinum Sponsorship</option>
<option value="Gold Sponsorship">$10,000 - Gold Sponsorship</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Platinum Sponsorship">
<input type="hidden" name="option_amount0" value="15000.00">
<input type="hidden" name="option_select1" value="Gold Sponsorship">
<input type="hidden" name="option_amount1" value="10000.00">
<input type="hidden" name="option_index" value="0">
So I have used the PayPal button generator to create a button that when I test in a vanilla html page works fine like here:
http://www.global-travelpics.com/test/testpaypal.html
However, when embedded in a modal popup in this BootStrap site, it does not behave properly:
http://www.global-travelpics.com/test/ (click Shop then ANTIGUA #1) The Add to cart button is there but only the first of the drop down items appears and I'm at a loss as to why.
Here is the chunk of code making up the form:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="email#aol.com">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Antigua #1">
<input type="hidden" name="item_number" value="A1">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest">
<table>
<tr><td><input type="hidden" name="on0" value="Available sizes">Available sizes</td></tr><tr><td><select name="os0">
<option value="A4 Framed Gloss">A4 Framed Gloss £25.00 GBP</option>
<option value="A4 Framed Canvas">A4 Framed Canvas £35.00 GBP</option>
<option value="A4 Framed Stretched Pine">A4 Framed Stretched Pine £45.00 GBP</option>
<option value="A3 Framed Gloss">A3 Framed Gloss £45.00 GBP</option>
<option value="A3 Framed Canvas">A3 Framed Canvas £50.00 GBP</option>
<option value="A3 Framed Stretched">A3 Framed Stretched £65.00 GBP</option>
<option value="A2 Framed Gloss">A2 Framed Gloss £65.00 GBP</option>
<option value="A2 Framed Canvas">A2 Framed Canvas £70.00 GBP</option>
<option value="A2 Framed Stretched Pine">A2 Framed Stretched Pine £75.00 GBP</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="option_select0" value="A4 Framed Gloss">
<input type="hidden" name="option_amount0" value="25.00">
<input type="hidden" name="option_select1" value="A4 Framed Canvas">
<input type="hidden" name="option_amount1" value="35.00">
<input type="hidden" name="option_select2" value="A4 Framed Stretched Pine">
<input type="hidden" name="option_amount2" value="45.00">
<input type="hidden" name="option_select3" value="A3 Framed Gloss">
<input type="hidden" name="option_amount3" value="45.00">
<input type="hidden" name="option_select4" value="A3 Framed Canvas">
<input type="hidden" name="option_amount4" value="50.00">
<input type="hidden" name="option_select5" value="A3 Framed Stretched">
<input type="hidden" name="option_amount5" value="65.00">
<input type="hidden" name="option_select6" value="A2 Framed Gloss">
<input type="hidden" name="option_amount6" value="65.00">
<input type="hidden" name="option_select7" value="A2 Framed Canvas">
<input type="hidden" name="option_amount7" value="70.00">
<input type="hidden" name="option_select8" value="A2 Framed Stretched Pine">
<input type="hidden" name="option_amount8" value="75.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" 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">
</form>
Any ideas appreciated