We Keep Coding

I am creating a mockup cinema website for my school project. I've got some issues related to "select" forms and JavaScript codes

So I'm now creating a dropdown list to select a set of date, time and house for a show. I have three options in the list, namely, "--Choose date, time and house--","20 Aug 2019, 11:30 am, House 1" and "22 Aug 2019, 4:30 pm, House 2". However, the expected outcome for each of the options when submitted is not realised. (For context, EP is the initials of a movie title.)
I've tried using separate if statements and not if else statements, but that's not helping either.
<form onsubmit= recordEPDateTime()>
<select id="EPDateTime" style="width: 550px;">
<option name="choose">--Choose date, time and house--</option>
//Default option that tells users to choose a show
<option name="20Aug201911:30amh1">20 Aug 2019, 11:30 am, House 1</option>
//Details of first show
<option name="22Aug20194:30pmh2">22 Aug 2019, 4:30 pm, House 2</option>
//Details of second show
</select>
<input type="submit" value="Choose Seats">
</form>
<br>
<script language="javascript">
var details="";
function recordEPDateTime (){
details = document.getElementById(EPDateTime);
if(details="20Aug201911:30amh1"){
window.open("EP20AugHouse1.html");
}
//Opens a web page to the house layout of first show
else if(details="22Aug20194:30pmh2"){
window.open("EP22AugHouse2.html");
}
//Opens a web page to the house layout of second show
else{
window.alert("Select a show first.");
}
//Displays a window alert that they must choose a show first.
;}
</script>
When I click the submit button, I expected to have the first option to display an alert message, the second option to open a window to EP20AugHouse1.html, and the third option to open a window and go to EP22AugHouse2.html
But it seems that no matter which option I choose, when I pressed the submit button it would always open a window to EP20AugHouse1.html, which is the expected result for the second option (20 Aug 2019, 11:30 am, House 1), but not the other two.
Can anyone help and tell me what is wrong in my code?

You didn't compare details and its value, you assigned the new value. In this case, if statement always returns true. For comparison use == or ===: if(details === "20Aug201911:30amh1") {...}.
Also, id should be in quotes: document.getElementById('EPDateTime') or you need to create EPDateTime variable with id as a string.
But I rewrote the code in a bit different way:
<form>
<select id="EPDateTime" style="width: 550px;">
<option name="choose">--Choose date, time and house--</option>
//Default option that tells users to choose a show
<option name="20Aug201911:30amh1">20 Aug 2019, 11:30 am, House 1</option>
//Details of first show
<option name="22Aug20194:30pmh2">22 Aug 2019, 4:30 pm, House 2</option>
//Details of second show
</select>
<input type="submit" value="Choose Seats">
</form>
<script type="text/javascript">
document.querySelector('input').addEventListener('click', event => {
const select = document.querySelector('select');
[...select].map(el => {
if (el.selected) {
const name = el.getAttribute('name');
if (name === '20Aug201911:30amh1') {
window.open('EP20AugHouse1.html');
} else if (name === '22Aug20194:30pmh2') {
window.open('EP22AugHouse2.html');
} else if (name === 'choose') {
window.alert('Select a show first.');
}
}
});
});
</script>

For HTML, you must wrap comments within <!-- comment -->.
Option has no "name" attribute.
and the rest is as #undef_user mentioned before.
const recordEPDateTime = () => {
event.preventDefault();
const s = event.target.elements['select'];
const ov = s.options[s.selectedIndex].value;
if (!!ov) {
window.alert('Will open /' + ov + '.html');
} else {
window.alert('Select an option first.');
}
};
<form onsubmit="recordEPDateTime()">
<select id="EPDateTime" name="select">
<option value>-Select-</option><!-- Default option that tells users to choose a show -->
<option value="EP20AugHouse1">20 Aug 2019, 11:30 am, House 1</option><!-- Details of first show -->
<option value="EP22AugHouse2">22 Aug 2019, 4:30 pm, House 2</option><!-- Details of second show -->
</select>
<input type="submit" value="Choose Seats">
</form>

Joined / Connected Dynamic Dropdowns

Greetings Stackoverflow Veterans,
I've been struggling for a little while with a small Input Safety Feature. Essentially, for my website users will get to pick a time they wish to start and end their morning shift.
I have two Select inputs which are populated by a date within a loop. Basically, what I've been trying (In vain) to achieve is that when someone picks a start date from the "Start Time" Dropdown, the "End Time" dropdown then has all values less than the "Start Time", disabled.
I've provided an image below to help explain a little better, and the current code I have as well in relation to how my select is working.
As for any progress on Javascript, there basically is none. Everything I have tried in no way works, and I'm starting to struggle to think of new ideas. I've spent plenty of time trying to find solutions here on StackOverflow but I might be searching with the wrong Keywords.
The start time has been selected on the Left Dropdown, at 07:00, but on the Right Dropdown, anything before 07:00 should now be removed / disabled.
<select id="mondayWorking_MorningStart" class="workInput" >
<?php
$tStart = strtotime($start);
$tEnd = strtotime($end);
$tNow = $tStart;
while($tNow <= $tEnd)
{
echo "<option id='monday_MorningStart' name='mondayMorningStart'>" . date("H:i",$tNow) . "</option>";
$tNow = strtotime('+30 minutes',$tNow);
}
?>
</select>
Thank you for your help,
If you need anything else to offer your help, please let me know!

To populate the second dropdown based on first drop down value, first you have to bind onChange event to first dropdown. It means that when you change the first dropdown and select another option, JavaScript(In our case jquery) will fire an event and run a code.
In that function(code) we get the value of the first dropdown, then clear the options of the second dropdown and refill the content of the second dropdown based on the first dropdown value.
I assumed that the second dropdown max value can be 24:00 and the min value should be equal to first dropdown value + 30 minutes...
I've just added a few options to first select for test. you are loading it with your php code and it makes no difference...
So the code will be like this:
$('#selStart').change(function(){
var arrTimeStart = $(this).val().split(":");
var timeStart = parseInt(arrTimeStart[0] * 60) + parseInt(arrTimeStart[1]);
timeStart = timeStart + 30;
var timeEnd = (24 * 60);
$('#selEnd').find('option').remove();
for (iCnt = timeStart; iCnt <= timeEnd; iCnt = iCnt + 30){
vHour = parseInt(iCnt / 60);
vMin = iCnt % 60;
if(vMin == 0)
vMin = '00';
tmpTime = vHour + ':' + vMin;
$('#selEnd').append('<option value='+tmpTime+'>'+tmpTime+'</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Start:
<select id="selStart">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
</select>
<br>
End:
<select id="selEnd"></select>

Disable select option if input is certain day

How can I disable a select option field if day is a Saturday?
I have one input and one select.
<input type="text" name="date">11/15/2016
<select>
<option value="car">Car</option>
<option value="boat">Boat</option>
</select>
Here is my javascript:
if(???) {
$("option[value='boat']").attr("disabled", "disabled");
}
What should i put in the if statement if the input date is a Saturday?

var today = new Date('2016-11-15');
if(today.getDay() == 6) {//6 is saturday
...// disable the option value
}

Convert it to a date object using selected value.
var selectedDate = new Date("11/15/2016");
// Use the get day method that will give you the day of the week.
if(selecteddate.getDay() === 6) {
// your code
}

You can use:
Date.prototype.getUTCDay()
The getUTCDay() method returns the day of the week in the specified
date according to universal time, where 0 represents Sunday.
Date Instance new Date(dateString)
Creates a JavaScript Date instance that represents a single moment
in time. Date objects are based on a time value that is the number of
milliseconds since 1 January, 1970 UTC.
prop() instead of attr() when dealing with boolean properties.
var $dateInput = $("#dateInput"),
$option = $("option[value='boat']");
$dateInput.on("change", function() {
var date = new Date($dateInput.val());
if (date.getUTCDay() === 6) {
$option.prop("disabled", true);
} else {
$option.prop("disabled", false);
}
console.log(date);
console.log(date.getUTCDay());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="date" name="date" id="dateInput">
<select>
<option value="car">Car</option>
<option value="boat">Boat</option>
</select>

selected option from drop down fills another text box/drop down value value

I have been trying to find a solution for this for a couple of days. What I need to happen is when someone selects a "Frequency of Service*" from the form drop down menu, it needs to populate the "Billing Frequency*" automatically. So if the frequency of service selected is "On-Call Service", the "Billing Frequency*" would automatically change to "Per Pickup" and so on. Here is a link http://jsfiddle.net/k4hYE/47/
<label for="00NA00000047Jk8" class="label">Frequency of Service*<select id="00NA00000047Jk8" name="00NA00000047Jk8" title="Frequency of Service" required><option value="">--None--</option>
<option value="On-Call Service">On-Call Service</option>
<option value="Every Six Months (2 Stops Annually)">Every 6 Months (2x Year) </option>
<option value="Every Three Months (4 Stops Annually)">Every 3 Months (4x Year)</option>
<option value="Every Other Month (6 Stops Annually)">Every Other Month (6x Year)</option>
<option value="Monthly (12-13 Stops Annually)">Monthly (12-13x Year)</option>
Every Other Week (26x Year)
Every Week (52x Year)
</label></div>

In order to set the value of another dropdown based on one dropdown selection, you would need to create a key-value array and check the key to dropdown selection.
var objArray = {"On-Call Service": "Per Pickup"};
$("#00NA00000047Jk8").change(function()
{
var ddText = $(this).val();
$.each(objArray,function(key,value)
{
if(ddText == key)
$("#00NA0000005wIiU").val(value);
});
});
Fiddle : http://jsfiddle.net/k4hYE/51/

Updated Fiddle: http://jsfiddle.net/k4hYE/50/
Set a jQuery watcher on the select box, then copy the value to the target id. Also you may want to use a more identifiable ID for the target, unless you are programmatically generating jquery for each select box.
$(document).ready(function($){
$('#00NA00000047Jk8').change(function(){
var val = $(this).val();
if (val == "On-Call Service"){
$('#00NA0000005wIiU').val('Per Pickup');
}
else {
alert('Finish the if/then tree for the rest');
}
});
});

Simple Hotel Booking Form Total Calculation

I wonder if anyone can help me... Unfortunately I do not have any Javascript knowledge and finding it a bit difficult to understand.
I am working on a Hotel Booking form and this is what I need to do. There is an option to choose the hotel as well as the options for how many nights are required.
There is also a Totals field. This is where I am stuck. Can someone help me with a script or what to do get the Total field to show the total of the formula of nights times choice of hotel?
This would also need to be a value that would be posted with the other values to the php form which in turn sends me the email with the values.
Here is the link to the form I made: https://www.alpinemalta.net/libyabuild2013/bookNow.html
Thank you to anyone that can help me and please excuse my lack of knowledge in this area.
Regards
Chris Brown (Malta)

looking at your form,
1) i think the drop down list for total of nights is redundant (the total of nights is clear from arrival and departure dates)
2) the dates (for having it simpler using it in JavaScript) use numeric values instead of: '11/05/2013(A)' or such.
<select name="ArrivalDate" size="1" id="ArrivalDate">
<option>Please select</option>
<option value="1368399600">13-05-2013</option>
<option value="1368486000">14-05-2013</option>
...
</select>
3) i didn't notice anywhere the price per night? Maybe the list of hotels could also contain some ID (such as h1a,h1b, h2a, h3a, h3b, h3c, ...) instead of the textual option description (of hotel and room)
<select name="hotel_choice" id="hotel5">
<option value="nothing" selected="selected">None Selected</option>
<option value='nothing'>.</option>
<option value="h1a">Corinthia Single Room</option>
<option value="h1b">Corinthia Double Room</option>
<option value='nothing'>.</option>
...
</select>
if you do that then the JavaScript may not be that complicated (asuming you do those changes and don't mind having the price for each hotel visible in the page source):
<script type='text/javascript'>
var prices={nothing:0,h1a:357,h1b:280.50,h2a:380}; //here are your hotel prices
function calculate() {
var days = Math.round( (
document.getElementById('datedepart').value -
document.getElementById('ArrivalDate').value
) / 86400 ); //timestamp is in seconds
document.getElementById('total_cost').value =
days *
prices[ document.getElementById('hotel5').value ];
}
</script>
please note that there aren't any niceties in the code and it's based on the assumption, that the dates are changed to their representative integer values (such as are returned by php function time() ) also it is possible that i made an error in the ID names of your elements
Then what remains is to hook up the "calculate();" javascript function to onchange event of all the controls and you are done.
<select name="hotel_choice" id="hotel5" onchange='calculate();'>
...
</select>
and
<select name="ArrivalDate" size="1" id="ArrivalDate" onchange='calculate();'>
...
</select>
and the same in the departure date selector.
EDIT:
You could use dates in your date selectors, but you would have to parste that string into a number client side using something like:
var dt=Date.parse(document.getElementById('ArrivalDate').value);
But make sure to check supported date formats for this function and also note it returns the number of milliseconds since 1970 so you will have to be dividing by 86400000 instead of 86400
EDIT - check for dates are filled in
function calculate() {
var dd=document.getElementById('datedepart');
var da=document.getElementById('ArrivalDate');
var total=document.getElementById('total_cost');
var hotel=document.getElementById('hotel5');
//no hotel room selected or not depart date set or not arrival date set
//or departing before arrival (nonsense) - set total to ZERO and exit the function
if ( !(dd.value*1) || !(da.value*1) || da.value>dd.value ) {
total.value='0';//you can set it to 'not allowed' also if you wish (instead of '0')
return;
}
var days = Math.round( (
dd.value -
da.value
) / 86400 ); //timestamp is in seconds
var cost = days * prices[ hotel.value ];
if (isNaN(cost))
cost = 0; //or set to "invalid input" - but this line should not be needed at this point
total.value = cost;
}