I am struggling to create a button for my website uses paypal subscriptions to manage users on the site. There are several different subscription options and I want to include them in a dropdown box instead of having seperate buttons for each option. However so far I can't figure it out. Currently the site is working using basically a default paypal button that uses a little javascript to make sure people accept the terms and conditions here is the current working code:
<form action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return confSubmit();" method="post">
<p><span style="font-size: 12pt;"><input name="cmd" value="_s-xclick" type="hidden" />
<input name="hosted_button_id" value="HBP3ZG2KGRHC" type="hidden" /></span>
</p>
<p style="text-align: center;"><span style="font-size: 12pt;"><input src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" border="0" type="image" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" border="0" height="1" width="1" /></span>
</p>
</form>
with the function confsubmit() being used to make user accept the terms and conditions:
function confSubmit() {
if (!document.getElementById("one").checked) {
alert("Please read and accept the terms and conditions in order to sign up.");
return false;
}}
Now I want to add to this a select statment along the lines of:
<select name="sub_types">
<option value="A1">1 Month </option>
<option value="A2">3 Months </option>
<option value="A3">6 Months </option>
<option value="A4">1 Year </option>
</select>
Now it is my understanding that the important part of the code is the button id value "HBP3ZG2KGRHC" from above which is used by paypal to select the proper subscription type. I can add this select statement into the form no problem but I can't figure out how to pass the selected option's value through the button to paypal so that it selects the proper subscription type. I hope that makes sense. Thanks for the help.
If I understand correctly, you want to vary the hosted_button_id value that is posted to PayPal. I haven't tried this, but it sounds like this might work:
Replace the
<input name="hosted_button_id" value="HBP3ZG2KGRHC" type="hidden" />
with
<select name="hosted_button_id">
<option value="HBP3ZG2KGRHC">1 Month</option>
<option value="[different button id for 3 months]">3 Months</option>
<option value="[different button id for 6 months]">6 Months</option>
<option value="[different button id for 1 year]">1 Year</option>
</select>
assuming you have several hosted_button_ids set up for the various subscription types.
Related
I have very little coding experience, but am generally a quick learner and have been looking things up piece by piece to learn how to create a few simple things I need for a webpage. I want to be able to autofill a form using query strings in my URL (i.e. so that example.com?color=blue will automatically load the form with the option "blue" already filled out in the form section named "color").
Here is the part of my html code that makes the form:
<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>
So I thought if I typed the URL for my website, followed by ?Photo=Pelicans or ?Photo=Dolphins, that form would automatically be filled out with the answer Pelicans or Dolphins, respectively. Obviously that didn't work, and my understanding now is that I need some javascript code to make the query string work like that? But I have been trying for a couple weeks now to figure out how to do that, examining every relevant example code I could find line by line to try to understand what they were doing, and none of it has worked. Is there a relatively simple code that would accomplish this function, or am I just completely out of my depth as a noob here?
Assuming you're trying to fetch your parameter from the current URL given to your users and would be selecting the element accordingly.
I've written javascript code for you. check if it works.
In case you want to use your current URL update the URL in javascript with window.location.href.
var url_string = "http://www.mywebsite.com?photo=Rams"; //window.location.href (set for current url)
var url = new URL(url_string);
var c = url.searchParams.get("photo");
document.querySelector('option[value="'+c+'"]').selected = true
console.log(c);
<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm new to PHP coding so I have two questions to ask in the case that...
What if I want to get more input field by clicking the "+" button like the picture below
After click "+" button it will provide the input box like the picture below
So... first question, how can I do like this?
And second question, after I can do like this how can I get these data to store in the same table.
For Example, Education table has ID(Autonumberred), User ID, Degree, Major, University, Year and Honour.
When one user input their data like this
Suppose the User ID is 10000, then in the table should store like this...
(1)ID(Autonumberred), (2)User ID, (3)Degree, (4)Major, (5)University, (6)Year and (7)Honour.
(1)00001, (2)10000, (3)Master Degree, (4)Information Technology, (5)Assumption University, (6)2014, (7)None.
(1)00002, (2)10000, (3)Bachelor Degree, (4)Business Data Analysis, (5)Thammasat University, (6)2012, (7)Magna Cum Laude.
Thank you in advance.
$(document).ready(function() {
$("#more").click(function() {
$("#clone" ).clone().appendTo("#main_wrap");
});
});
input{ width:200px; float:left;}select{ width:200px; float:left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="submit.php" method="post">
<div style="width:250px;" id="main_wrap">
<div id="clone" style="float:left; width:100%;">
<select name="education[]">
<option value="" selected="selected">Education</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
</select>
<input type="text" name="in[]" placeholder='In'>
<input type="text" name="from[]" placeholder='From'>
<select name="year[]">
<option value="" selected="selected"> Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</br>
</div>
</div>
<div style="float:left;">
<input type="button" value="more" id="more" style="float:left;">
</div>
<div style="float:left;">
<input type="submit" value="Submit Form" style="float:left;">
</div>
</form>
And in your submit.php file use $_POST to get all the values and insert into db
<?php
if(isset($_POST))
{
echo "<pre>";
print_r($_POST);
}
?>
For your first question:
When you want to name your input fields, use [], for example <input name="year[]" /> if you put it like this, after submitting the form, you get an array of all the inputs.
put new inputs with a + button is just matter of JS codes to display new inputs.
And for your second question is just a matter of inserting data in to the database.
First you can create your form on html similar this : http://1stwebdesigner.com/php-contact-form-html
Then, you must write a function with php, about press the + button create a new row in table and you can use php POST method for the send your form data a new php file and GET it.
You should use Javascript DOM for the task.
What you are asking for is out of the scope of this site but you can learn Javascript here:http://www.w3schools.com/js/js_htmldom.asp
And for saving these data use multiple in input tag as in this example:Inserting multiple rows from a php form into the database
I want to stop users being able to choose the price they pay on the drop-down menu before paying with Paypal - the JavaScript code I have will select the price based on country chosen on the form.
However whenever I add disabled="disabled" to either the select element, or the options, this generates an error with Paypal.
Does anyone know a way around it?
<select name="os0" disabled="disabled">
<option value="Testing">Testing £0.10 GBP</option>
<option value="UK">UK £10.00 GBP</option>
<option value="European Union">European Union £20.00 GBP</option>
<option value="Rest Of The World">Rest Of The World £30.00 GBP</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="image" id="paypalbutton" src="https://www.paypalobjects.com/en_US/i/btn/x-click-but6.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
You can test it on http://ineedaweatherforecast.co.uk using the Buy Now button at the top.
Thanks
James
Disabled elements are not submitted with the form.
You have a few options:
Use readonly instead of disabled="disabled"
Leave the <select> disabled but put the real value in a <input type="hidden">
Enable the element before submitting
But whatever you do, make sure you're receiving the correct amount of money because it's very easy for a user to hack around this.
I currently have a drop down that has multiple values in it (i.e. 50, 100, 200, etc..) which when selected and a button clicked reloads the page and filters a data table to shows however many results were selected.
<form action="#" method="post" class="form-inline" name="normal" id="SearchResultsForm">
<select name="limitNumberOfResults" id="limitNumberOfResultsPerPage"
class="single">
<option value="10">10</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="submit" class="button" value="Show" name="submitbutton"/>
</form>
I'd like to convert this from a drop down over to a list of links. How would I go about doing this?
I was trying to use something like the following.
<a href="#" onclick="SearchResultsForm.submit();return false;">
10
</a>
<a href="#" onclick="SearchResultsForm.submit();return false;">
20
</a>
However, I'm not sure how to get the results per page value to be recognized.
Thank you!
If you click 10 go to same page with ?limitNumberOfResults=10 then get that value write your code to get result.
10
$per_page = $_REQUEST['limitNumberOfResults'];
Jakir Hossain's answer works (and doesn't require JavaScript) but may require reworking the links to include current state.
Another possibility is for you to use a hidden field and update it when the links are clicked; it does require JavaScript, but you don't have to know about any other parameters that are passed to the server.
<input type="hidden" name="limitNumberOfResults" value="20" />
10
20
var form = document.getElementById('SearchResultsForm');
// Using event delegation to register clicks on the links
form.addEventListener('click', function(e){
if (e.target.tagName === 'A' && e.target.classList.contains('set-result-count') ) {
e.preventDefault();
form.elements.limitNumberOfResults.value = e.target.getAttribute('data-result-count');
}
});
you can use <select onchange='this.form.submit();'></select> in select tag so that when options are changed form gets submitted and you get the results per page value
I am fairly new to HTML & Javascript and I have been assigned a task to create a HTML form for a restaurant which allows the user to input their information for a booking.
So far I have created the form for the website and validated each input field in order to ensure the correct information is entered into the necessary fields.
I have also tried to enable the total cost to be calculated on screen so the user can see how much their booking will cost before they click the submit button. However, the code I have thus far does not seem to be functioning as the total price never increases from 0 if an option is picked.
Here is the relevant html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Select Party Size:</strong>
<br>
<select name="party" id="party" onblur="validateSelect(name)">
<option value="">Please Select</option>
<option value="5">1 Person (£5)</option>
<option value="10">2 People (£10)</option>
<option value="15">3 People (£15)</option>
<option value="20">4 People (£20)</option>
<option value="25">5 People (£25)</option>
<option value="30">6 People (£30)</option>
<option value="35">7 People (£35)</option>
<option value="40">8 People (£40)</option>
<option value="45">9 People (£45)</option>
<option value="50">10+ People (£50)</option>
</select>
...
<strong> VIP Area? </strong>
<br>
Yes (+£5) <input name="hand" id="left" value="5" onblur="validateRadio(id)" type="radio">
No <input name="hand" id="right" value="0" onblur="validateRadio(id)" checked="" type="radio">
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the VIP area.</span>
<strong> Total booking cost based on party size <span id="price">0</span> VIP selection: </strong>
Here is the relevant javascript to perform the calculations:
$(document).ready(function(){
$(document).on('change', '#party', function(e) {
$('#price').html(parseInt($(this).val()) + parseInt($('input[name="hand"]:checked').val()));
});
$(document).on('click', 'input[name="hand"]', function(e) {
$('#price').html(parseInt($('#party').val()) + parseInt($(this).val()));
});
});
For example, if the customer selects that there are 6 people in their party(+£30) and they also wish to be seated in the VIP area(+£5), the total price displayed at the bottom of the page would be £35. If anyone has any suggestions as to why my code isn't functioning I would appreciate the help.
Thank you.