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.
Related
Fellow developers,
I've been creating an app for a while and it has been relatively useful. However, there is only one limitation that I haven't found how to fix and yes, I have read multiple similar issues:
jquery select option click handler
click option in select by jquery?
simulating mouse click on select option with jquery
jQuery simulate click event on select option
jQuery click event not working on option element
Including, even other non-StackOverFlow forums and I have read thousands of times that I need to use the change event from jQuery and I knew it since I used it before. This is my code:
HTML:
<select id="selectTimes">
<option disabled="disabled">Select Speech</option>
<option value="0">Question of the Day (30s)</option>
<option value="1">4 to 6 min (Ice-breaker)</option>
<option value="2">5 to 7 min (Project 2-9)</option>
<option value="3">8 to 10 min (Project 10)</option>
<option value="4">1 to 1:30 min (Evaluator's intro)</option>
<option value="5">2 to 3 min (Evaluation)</option>
<option value="6">5 to 6 min (General Evaluator)</option>
<option value="7">1 to 2 min (Table Topics)</option>
<option value="8">10 to 12 min</option>
<option value="9">13 to 15 min</option>
<option value="10">18 to 20 min</option>
<option value="11">Custom</option>
</select>
jQuery:
$("#selectTimes").on("change", function () {
setLocalStorage("selected", $(this).val());
if ($(this).val() === "11")
$("#divCustomTime").modal();
else {
isCustom = false;
setLocalStorage("isCustom", isCustom);
}
});
However, my main challenge is that anyone can select more than once the last option and it's a bit tricky since at this point, they need to choose first another option and one more time the last one, which I'm sure it will unconformable to anyone. You can see the steps in the following images:
First view without option:
Choose the Custom Time:
Smartphone:
Tablet (<10 in):
Table (10+ in) with Select2:
Change times:
Selected option:
Any advice or workaround of how someone can someone choose multiple times the same option without doing click somewhere else? Thanks for your ideas.
P.S.:
I know that the click event only works in Firefox and since this is a mobile app for Android, it won't work.
I tested custom selects like the select2 without any success.
This might help you out.
The options can be given as input options based on you UI. so you can use the input tags itself which on click of the selected option it triggers event as well
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<style>
.box
{
border:1px solid whitesmoke;
padding:10px 0px;
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="radio" name="selectest" value="name1" checked> Name1 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name2"> Name2 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name3"> Name3 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name4"> Name4 </input>
</div>
</body>
<script>
$("input").click(function(){
alert($(this).val());
});
</script>
</html>
So ive been spending the last week trying to figure out what im doing wrong.. i have tried to use several other scripts posted to other stack overflow users but can not seem to get anything to do what i need it to do, im still learning html, php and java script so everything is taking me a little while, so any help, advice or input is greatly appreciated.
So in my form i have several input fields that are selection fields, here is some for example:
</div>
<div class="form-field">
<label class="frm">*Approx Property Value</label>
<select name="fldAPV" title="Approx_Property_Value" id="fldAPV" class="form-action select-details">
<option value="100" selected="selected">Select value</option>
<option value="100">£0 - £100,000</option>
<option value="200">£100,001 - £200,000</option>
<option value="300">£200,001 - £300,000</option>
<option value="400">£300,001 - £400,000</option>
<option value="500">£400,001 - £500,000</option>
<option value="600">£500,001 - £600,000</option>
<option value="700">£600,001 - £700,000</option>
<option value="800">£700,001 - £800,000</option>
<option value="9000">£800,001 - £900,000</option>
<option value="1Million">£900,001 - £1,000,000</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Number of Bedrooms</label>
<select name="fldNOBEDS2" title="Number_Of_Bedrooms" id="fldNOBEDS2" class="form-action select-details">
<option value="Not_Sure" selected="selected">I'm Not Sure</option>
<option value="1">1 Bedroom</option>
<option value="2">2 Bedrooms</option>
<option value="3">3 Bedrooms</option>
<option value="4">4 Bedrooms</option>
<option value="5">5 Bedrooms</option>
<option value="6">6 Bedrooms</option>
<option value="7">7 Bedrooms</option>
<option value="8+">8 Bedrooms +</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Reason for Survey</label>
<select name="fldRFS" title="Reason for Survey" id="fldRFS" class="form-action select-details">
<option value="Not-Sure" selected="selected">Not Sure</option>
<option value="Selling">Selling</option>
<option value="Buying">Buying</option>
<option value="Other-Reason">Other Reason</option>
</select>
Now what i am trying to achieve is to have a javascript that will calculate the input value on each field the user selects his/hers answer.. My initial thoughts was to do it with each value="" having a default price value so for example the reason for survey fields, instead of saying "Not-Sure" or "Buying" they will say "50" or "100" to represent the cost of the service.
Is it possible to have a script that would understand code like this for example:
Buying
The reason i say this is i am hoping the value's don't make things confusing, if not then i am happy to use the value="50" for example to determine what the overall cost of the service will be. I guess its the client basically putting together their own package.
The most important part of the script is to make the calculation hidden, so when clicking (View Quote) the form will submit the data either by $_GET or $_POST to page2.php where the client can view their quoted price.
I really hope i have not confused everyone! i see people post very small posts and they seem to get it on the head in one, i can not stress enough i am still learning and we all started somewhere :) This is for my own personal website and one hopes some kind experienced member can help me out, anything is much appreciated as i have spent 6 days trying to figure this out, Thanks!
King Regards
PHP on page2.php:
<?php
If(isset($_POST['submit'])){
$Quote = $_POST['fldST'] + $_POST['fldAPV'] //... For all nummeric Fields
Switch ($_POST['fldPropertyType']){
/* Use the Switch Statement if you want to compare the same variable
(or expression) with many different values, and execute a different piece of code
depending on which value it equals to. */
case 'Semi':
$Quote = $Quote + 20; //Replace 20 wit you're Value
case 'Terraced':
$Quote = $Quote + 50;
//... For all cases
}
//Other Code and Page Content
echo $Quote;
}
else{
//ERROR Page was accessed without filling the form in.
}
?>
I hope this gives you an good Idea how to do it. Not every Client has Javascript enabeld and you don't know about their Maschine Performance. ist the better way to calculate via PHP.
Importend: NEVER echo/print/use POST/GET Variables direktly! Thats a big leck of Security. Always Filter your User Inputs to prevent Cross-Site-Scripting (XSS)
http://phpsec.org/projects/guide/2.html
http://resources.infosecinstitute.com/website-hacking-part-vi-input-validation-filtering-php/
http://phpsec.org/projects/guide/1.html#1.4.3
<---------------------------------------------- Update ----------------------------------->
When using the code above, Dreamweaver is saying that
Switch ($_POST['fldPropertyType']){
has a syntax error. Would this affect the script running before I add all the values or is it something simple to rectify?
Thanks
HTML:
<form>
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
<button type="submit">continue</button>
</form>
Javascript:
$('button').on('click', function(e) {
e.preventDefault();
var total = 0;
$('select').each(function(){
total += Number($(this).val());
});
$.ajax({
type: 'POST',
url: 'page2.php',
data: { total: total },
dataType: 'json',
success: function(result){
console.log(result);
}
});
});
PHP:
header('Content-Type: application/json');
echo JSON_encode($_POST['total']);
Imagine that I have a fictional website where a user can sign for some courses. Let's say that there are 3 different kinds of courses: mathematics, languages and biology. User can choose multiple courses in one form.
I would like to have a form where a user chooses if he wants a course from mathematics or languages or biology and then he can choose the one he wants.
User will select what kind of course he wants,
<select type="text" name="course">
<option value="0">mathematics</option>
<option value="1">languages</option>
<option value="2">biology</option>
</select>
and according to what user selected there would be another select with specific courses of that kind. So if user chooses mathematics, next select would be filled with courses from mathematics
<select type="text" name="topic">
<option value="0">algebra</option>
<option value="0">calculus</option>
...
</select>
In the end there would be a button which will recreate this so the user can add as many courses to his application as he wants.
Can you give me any hints how to do this? Or is there some better way, how to do this?
Thanks
Some pseudo-code / diagram which might help
// Display Main Options (Math, Lang, Bio)
<select type="text" name="course">
<option value="math">mathematics</option>
<option value="lang">languages</option>
<option value="bio">biology</option>
</select>
// OnChange of the Main Options, check which option is checked
// Display Secundairy Options menu according to the chosen Main Option
// Note the IDs of these selects and the values of the Main Options
<select type="text" name="subCourse" id="math">
<option value="SimpleAlg">Simple Algebra</option>
<option value="AdvAlg">Advanced Algebra</option>
<option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="lang">
<option value="BasEng">Basic English</option>
<option value="AdvEng">Advanced English</option>
<option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="bio">
<option value="xx">...</option>
</select>
// Display button which adds the selected course to a list
// OnClick on the button, update a shown list of selected courses
<ul id="selectedCourses">
<li id="BasEng">Basic English [<a onclick="removeCourse()">X</a>]</li>
</ul>
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.
I find the new <datalist> generally very useful, but I think that the suggestions are not visible enough. Is there a way to trigger the display of datalist suggestions using javascript?
As an example, I have a datalist on an <input type="number"> (jsFiddle).
<label>
Enter a Fibonacci number:
<input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="5">
<option value="8">
<option value="13">
<option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>
<script>
$('#show-suggestions').click(function() {
// .showSuggestions() does not exist.
// I'd like it to display the suggested values for the input field.
$('#myinput').showSuggestions();
});
</script>
In Chrome, the full list of suggestions is shown only when the input is empty, already has focus, and the user then clicks on the input. The down arrow does not show the suggestions - it simply decrements the value.
I'd like to make the suggestions more visible. As an example I've added a button that's supposed to open the list of suggestions. What do I put in the onClick-handler?
I've used Chrome, jQuery and a number-input in this example, but I'd prefer a generic solution independent of all of those.
If you remove the type="number" your users can get the dropdownlist using the basic alt+downarrow keyboard shortcut.
If that doesn't work for you. I suggest using a hybrid approach such as https://github.com/mmurph211/Autocomplete
Picking your country from a list containing more than 200 options is an ideal candidate for an autocomplete control. Define a with child elements for every country directly in an HTML page:
<datalist id="countrydata">
<option>Afghanistan</option>
<option>Åland Islands</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
...etc...
</datalist>