I'm trying to calculate the number of nights between two selected days of the week using jQuery for a booking system, to specify which days of the week people can arrive and depart on. I have two dropdowns, one for arrival day and one for departure day:
<select required="required" class="daypicker" id="arrivalday" name="arrivalday">
<option></option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
<select required="required" class="daypicker" id="departureday" name="departureday">
<option></option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
If either of the dropdowns change, it should calculate the number of nights as follows:
arrival = Monday
departure = Friday
number of nights = 4
arrival = Monday
departure = Monday
number of nights = 7
arrival = Friday
departure = Monday
number of nights = 3
This is what I have so far, but nothing is happening:
$(document).ready(function(){
$(".daypicker").change(function(){
var arrivalday = $("#arrivalday").val();
var departureday = $('#departureday').val();
if (arrivalday == departureday){
$('#numnights').html('7');
} else if (arrivalday < departureday) {
$('#numnights').html(departureday - arrivalday);
} else {
$('#numnights').html(arrivalday- departureday - 1);
}
}).change();
});
Found the issue, the selects are displayed after a user selects an option, so I moved the code into the change function of that option and everything worked as expected.
You already got it, you just needed to create the container for the output (the numnights element).
Anyway the code is a little bit cleaner in this way:
$(document).ready(function(){
$(".daypicker").on('change', function(){calculateNights();});
});
function calculateNights() {
var arrivalday = $("#arrivalday").val();
var departureday = $('#departureday').val();
var numberNights = departureday - arrivalday;
numberNights = (numberNights < 1) ? numberNights + 7 : numberNights;
$("#numNights").html(numberNights);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required="required" class="daypicker" id="arrivalday" name="arrivalday">
<option></option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
<select required="required" class="daypicker" id="departureday" name="departureday">
<option></option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
<hr>
<div id="numNights"></div>
Hope it helps!
Related
A very interesting thing hapens to my code.I have 3 different selects,one for years, the second for months and the third for days.I created options for the years and days via JS. My problem is my years list starts from the start point but dosn't end in the finish point I give,but when I'm changing the start point of j to 300 for instance, everything works perfectly.What is the reason or maybe my code is not correct? https://jsfiddle.net/arminemash/f9gy1p4L/15/
select{float:left}
#month,#days,input{display:none}
<body onload='addOptions()'>
<form action=''>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select required id='days' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
</select>
<input type="submit" class='selectOption' onclick='getDate()'>
</form>
</body>
function addOptions(){
var x= document.getElementById('year');
var y = document.getElementById('days');
for(var i=1900,j=1;i<3000,j<=31;i++,j++){
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.text =i;
x.add(option1);
option2.text =j;
y.add(option2);
}
}
var i=0;
function select(par){
var x=document.getElementsByClassName('selectOption');
if( par.selectedIndex !== "0"){
x[i+1].style.display='block';
i++;
collectData.push(par.value);
}
}
The problem is your for loop. for(var i=1900,j=1;i<3000,j<=31;i++,j++) this will stop when j reaches 31. What you need is two for loops one for days and one for years. I edited your fiddle here.
I have a Product Selection, anyone can selection any product rate is in select value, then customer can choose no of year limit to 3 and then no of computer limit to 3.
Now if user select product 1 (Price 9.99) for 1 year and 1 pc then code is workinf fine, but I want to give 20% discount on any other changes like anyone select 2 year and 2 pc then (9.99*2*2) then a flat (assume) 20% discount.
<select name="dproduct" id="dproduct" required="required">
<option value="9.99">Product 1</option>
<option value="14.99">Product 2</option>
<option value="19.99">Product 3</option>
<option value="24.99">Product 4</option>
<option value="39.99">Product 5</option>
<option value="59.99">Product 6</option>
<option value="99.99">Product 7</option>
<option value="149.99">Product 8</option>
<option value="199.99">Product 9</option>
</select>
<select name="noofyear" id="noofyear" required="required">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="noofpc" id="noofpc" required="required">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
My jQuery Code:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#dproduct,#noofpc,#noofyear").blur(function () {
$('#price').val($('#noofpc').val() * $('#dproduct').val() * $('#noofyear').val());
});
});
</script>
$(document).ready(function(){
$("#dproduct,#noofpc,#noofyear").change(function() {
var product = parseFloat($('#dproduct').val());
var pc_count = parseInt($('#noofpc').val());
var year_count = parseInt($('#noofyear').val());
var price = product * pc_count * year_count;
if (pc_count > 1 || year_count > 1) {
price = price * 0.8;
}
$('#price').val(price);
});
});
I have a bunch of select menu's with incrementing id's (table1 thorugh table 10)
I am intrested in making a function in js/jquery which will allow me hiding some of the options in all the select menu's lets say by a class I give them: some are from class idi and some from class idc
i get the amount of select menu's the user wants (between 1 to 10 ) and then i run throught all of them and want to screen the options available in each select menu:
<select name="dd" id="table1" class="form-control" style="display: none;">
<option value="">Select the Table</option>
<option class="idc" value="Areas_of_Interest.Area_of_Interest_Number">Areas of interest - Number</option>
<option class="idc" value="Coupons.Coupon_Number">Coupons - Coupon Number</option>
<option class="idc" value="Coupons.Description">Coupons - Description</option>
<option class="idc" value="Coupons.Start_Date">Coupons - Start Date</option>
<option class="idc" value="Coupons.End_Date">Coupons - End Date</option>
<option class="idc" value="Coupons.Number_of_Pings_Sent">Coupons - Number of Pings Sent</option>
<option class="idc" value="Coupons.Number_of_Coupons_Realized">Coupons - Number of Coupons Realized</option>
<option class="idc" value="Coupons.Limit_Type">Coupons - Limit Type</option>
<option class="idc" value="Coupons.Validity">Coupons - Validity</option>
<option class="idc" value="Coupons_Statuses.Status">Coupons Statuses - Status</option>
<option class="idc" value="Coupons_Statuses.Status_Description">Coupons Statuses - Status Description</option>
<option class="idc" value="Customers.Customer_Name">Customer - CustomerNumber</option>
<option class="idi" value="Groups.Group_Number">Groups - Group Number</option>
<option class="idi" value="Groups.Group_Name">Groups - Group Name</option>
<option class="idi" value="Locations.Location">Locations - Location</option>
<option class="idi" value="Payment_Methods.Payment_Method">Payment_Methods - Payment_Method</option>
<option class="idi" value="Payment_Methods.Description">Payment_Methods - Description</option>
<option class="idi" value="Users.Phone_Number">Users - Phone Number</option>
<option class="idi" value="Users.First_Name">Users - First Name</option>
<option class="idi" value="Users.Surname">Users - Last Name</option>
<option class="idi" value="Users.Address">Users - Address</option>
<option class="idi" value="Users.Birth_Year">Users - Birth Year</option>
<option class="idi" value="Users.Is_Group_Administrator">Users - Is Group Administrator</option>
<option class="idi" value="Users.Pings_Counter">Users - Pings Counter</option>
<option class="idi" value="Users.Group_Allowed_Size">Users - Group_Allowed_Size</option>
</select>
and here is part of my js code:
$(document).ready(function(){
$("#ShowTables_rd").click(function(){
/*var conceptName = $('#column-select').find(":selected").text();*/
$("#HideTables_rd").click();
var conceptName = $('#column-select').val();
for(i=1; i<=conceptName; i++)
{
$("#table"+i).show();
}
});
$("#HideTables_rd").click(function(){
$("select[id^=table]").val('');
$("select[id^=table]").hide();
});
$('#Users_data').click(function(){
var temp;
var conceptName = $('#column-select').val();
for (i=1 ; i<=conceptName ; i++)
{
$("#table"+i).option
}
});
});
column select is the amount of select menu's the user wants to use, as said, each with its own unique id
user_data is the id of a button with which the filtering of the options in all the menu's is done.
thanks for everyone who help :)
So I have a set of numbers such as this:
<select name="amount" id="amount" class="form-control">
<option selected="selected" disabled="disabled">Donation Amount</option>
<option value="500">$5.00</option>
<option value="1000">$10.00</option>
<option value="1500">$15.00</option>
<option value="2000">$20.00</option>
<option value="2500">$25.00</option>
<option value="3000">$30.00</option>
<option value="3500">$35.00</option>
<option value="4000">$40.00</option>
<option value="4500">$45.00</option>
<option value="5000">$50.00</option>
<option value="5500">$55.00</option>
<option value="6000">$60.00</option>
<option value="6500">$65.00</option>
<option value="7000">$70.00</option>
<option value="7500">$75.00</option>
<option value="8000">$80.00</option>
<option value="8500">$85.00</option>
<option value="9000">$90.00</option>
<option value="9500">$95.00</option>
<option value="10000">$100.00</option>
</select>
Every time this is changed I have some javascript that runs:
<script type="text/javascript">
$("#amount").change(function(){
var amount = parseInt($("#amount option:selected").val());
var amount = amount.toFixed(2);
$(".amountShow").text('$'+amount);
});
</script>
Now it almost works. Except for the toFixed(2) part of everything. Let's say we select 10.00. The value is 1000 and I am wanting to display 10.00. It instead displays like: 1000.00.
What more do I need to do? I converted the text to a integer and then fixed it two decimal places.
You have to divide by 100 the value of the option like : http://jsfiddle.net/csdtesting/14rh32ou/
$("#amount").change(function () {
var amount = parseInt($("#amount option:selected").val()) / 100;
var amount = amount.toFixed(2)
$(".amountShow").text('$' + amount);
});
Once the user chooses which flavour they want, I want to be able to display a message on the webpage with the choices they have made from the drop-downs after the submit button is clicked. Here is what I have so far:
<select name="flavour1" required>
<option value="">Please select a Flavour!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<select name="flavour2" required>
<option value="">Please select a Flavour!</option>
<option value="noflavour">No More Flavours!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<input type="submit" value="Get your Flavour!!" onclick="getFlavour()">
JavaScript to attempt to display message into element with id: "postFlavour"
function getFlavour(){
var flavour1 = getElementById("flavour1").value;
var flavour2 = getElementById("flavour1").value;
document.getElementById("postFlavour").innerHTML = "Congratulations, here are your chosen flavours: "+flavour1+", "+flavour2;
}
function getFlavour(){
var sel1 = getElementById("flavour1");
var sel2 = getElementById("flavour2");
var flavour1 = sel1.options[sel1.selectedIndex];
var flavour2 = sel2.options[sel2.selectedIndex];
document.getElementById("postFlavour").innerHTML = "Congratulation, here are your chosen flavours: "+flavour1+", "+flavour2;
return false;
}