I am using the following code to set a drop-down value to the current month, it is working in Chrome and Edge but in IE 11 the value is empty.
month = currentDate.toLocaleString(locale, {month:"short"})
document.getElementById("month").value = month
month contains the value "Jul" and is of type string, and I can set it as the value of a text box.
If I manually assign month = "Jul", it does set the value on the drop-down.
IEs toLocalString() adds some invisible Unicode characters to the string so the value of the dropdown-option and the value of month are not actually the same.
If it won't cause cross-locale compatibility issues then you can trim these characters with replace.
Alternatively, if you know the order of your dropdown list then get the month as a number and use selectedIndex
currentDate = new Date()
locale = 'en-US'
month = currentDate.toLocaleString(locale, {month:"short"})
document.getElementById("month").value = month.replace(/[^A-z]/g,'')
// Alternatively
//document.getElementById("month").selectedIndex = currentDate.getMonth();
<select name="dates" id="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
Related
I want to achieve:
If I select "16" in first select box and bigger value in second, for example "17", then in second select automatically changing to "16".
Just if value in first select box is lower than second, always change to same values, for example 16 to 16, 18 to 18.
<select id="from_age_js" name="from_age" class="select-advertise-style">
<option value="f13">13</option>
<option value="f14">14</option>
<option value="f15">15</option>
<option value="f16">16</option>
<option value="f17">17</option>
<option value="f18" selected>18</option>
<option value="f19">19</option>
<option value="f20">20</option>
</select>
—
<select id="to_age_js" name="to_age" class="select-advertise-style">
<option value="t13">13</option>
<option value="t14">14</option>
<option value="t15">15</option>
<option value="t16">16</option>
<option value="t17">17</option>
<option value="t18">18</option>
<option value="t20" selected>20+</option>
</select>
That's an easy one, in your case, with pure javascript, I would do something like this:
function checkit()
{
//Store the two dropdowns for easy reference
var fromAge = document.getElementById('from_age_js');
var toAge = document.getElementById('to_age_js');
//Verify if the toAge value is minor, to see if the conditional code will be executed
if( fromAge.options[fromAge.selectedIndex].value >
toAge.options[toAge.selectedIndex].value)
{
//In that case, match the values to be the same...
document.getElementById('to_age_js').value =
fromAge.options[fromAge.selectedIndex].value;
}
}
And you just have to add that function to where you want it to be called. I would choose to add the onchange event from Javascript within the select dropdowns. Like this:
<select id="from_age_js" name="from_age" class="select-advertise-style" onchange="checkit();">
You can see a working example here:
https://jsfiddle.net/8cmad3tz/19/
I'm creating a form for a credit card payment.
As part of the form, I also collect the expiration date details of the client's card.
The month and year fields are both of a Select element type within the HTML.
What I want to do, using jQuery or JavaScript, is, in case the client chooses current year from the list of available years, previous months will be removed from the list of options, and if a past month was already selected, the value in the month field should reset by default to be current month selected.
In case he changes the year value again to a future year, all months should be shown again.
Basically what I'm trying to achieve here is, making sure the client can't choose a past date for a CC expiry date, instead of using validations and showing alerts in case he does.
EDIT
Well, I haven't tried anything yet as I'm not experienced much with front-end, but I assume I will have to use something like:
$(document).ready(function () {
$("#year").change(function () {
var date = new Date();
var currentmonth = date.getMonth();
var currentyear = date.getFullYear();
var year = $(this).val();
if (year == currentyear) {
$("#month").html('add a loop here to add options from currentMonth to 12');
} else {
$("#month").html('same as above but from 1 to 12');
}
});
});
I'm just not sure if it's the right way to do it and if so, how to write the loop properly. Also, I don't know if I'm missing something in order for it to work.
This is what I did eventually:
PHP (using Laravel framework), HTML and jQuery *
First of all I created an array of all month names starting from index 1 and on. ([1]=>January, [2]=>February, ...) => $months
I also saved the int value of the current as $currentMonth
HTML:
<select id="year" name="..." class="...">
<option value="">Choose...</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
<select id="month" name="..." class="...">
<option value="">Choose</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
jQuery:
$("#year").change(function () {
var date = new Date();
var currentyear = date.getFullYear();
var year = $(this).val();
if (year == currentyear) {
$("#month").html("#for($i=(int)$currentMonth;$i<=12;$i++)<option value='{{$i}}'>$months[$i]</option>#endfor");
} else {
$("#month").html("#for($i=1;$i<=12;$i++)<option value='{{$i}}'>$months[$i]</option>#endfor");
}
});
I'm not sure what you were having trouble with, but here's an example of what you could do: (Untested)
// get current date
var now = new Date();
var day = now.getDate(); // day of the month
var month = now.getMonth()+1; // this is normally 0-based, added 1 for 1-based months
var year = now.getFullYear(); // four digit year
// compare user date to current date
if(year === userYear){
if(userMonth<=month){
userMonth = month;
if(userDay<day){
userDay = day;
}
}
for(var i=0;i<month;i++){ // remove all months before current month
monthArray.remove(i);
}
} else {
// reset the array
for(var i in monthArray){
monthArray.remove(i); // remove all the elements
}
for(var i=1;i<13;i++){
var option = document.createElement("option");
option.text = i;
x.add(option); // add all the months
}
}
I have requirement to validate timezone format. I am getting timezone in string format like the following way.
It should be like this way. I need to throw an error if anything else comes like +05:30
Valid timezone formats
0, 1, 2, 3.5, 5.75 .. 12
-1, -2, -4.5, -11 ... -12
Example timezone format
<option value="-12">(GMT -12:00)</option>
<option value="-11">(GMT -11:00) </option>
<option value="-10">(GMT -10:00)</option>
<option value="-9">(GMT -9:00) Alaska</option>
<option value="-8">(GMT -8:00)</option>
<option value="-7">(GMT -7:00)</option>
<option value="-6">(GMT -6:00)</option>
<option value="-5">(GMT -5:00)</option>
<option value="-4.5">(GMT -4:30)</option>
<option value="-4">(GMT -4:00)</option>
<option value="-3.5">(GMT -3:30) </option>
<option value="-3">(GMT -3:00)</option>
<option value="-2">(GMT -2:00)</option>
<option value="-1">(GMT -1:00 hour)</option>
<option value="0">(GMT)</option>
<option value="1">(GMT +1:00 hour)</option>
<option value="2">(GMT +2:00)</option>
<option value="3">(GMT +3:00)</option>
<option value="3.5">(GMT +3:30)</option>
<option value="4">(GMT +4:00)</option>
<option value="4.5">(GMT +4:30)</option>
<option value="5">(GMT +5:00) </option>
<option value="5.5">(GMT +5:30) </option>
<option value="5.75">(GMT +5:45)</option>
<option value="6">(GMT +6:00)</option>
<option value="6.5">(GMT +6:30)</option>
<option value="7">(GMT +7:00) </option>
<option value="8">(GMT +8:00) </option>
<option value="9">(GMT +9:00) </option>
<option value="9.5">(GMT +9:30) </option>
<option value="10">(GMT +10:00) </option>
<option value="11">(GMT +11:00) </option>
<option value="12">(GMT +12:00)</option>
Could you help me to solve this, i dont have much expertise in using regular expression to show what i had tried. Thanks
^-?\d{1,2}(?:\.\d{1,2})?$
This should do it for you.See demo.
https://regex101.com/r/rU8yP6/8
or
^(?:-?(?:1[01]|[0-9])(?:\.\d{1,2})?|12)$
https://regex101.com/r/rU8yP6/10
Here's one way. Note that it test against .5 and .75 but can't tell the difference between 6.5 and 7.5. Both those numbers would pass, but only one is a valid timezone. This will however test against the right format at least.
/^-?\d{1,2}(\.5|\.75)?$/
Here are some tests:
/^-?\d{1,2}(\.5|\.75)?$/.test("5.5"); // returns true
/^-?\d{1,2}(\.5|\.75)?$/.test("5.7"); // returns false
/^-?\d{1,2}(\.5|\.75)?$/.test("-3.75"); // returns true
/^-?\d{1,2}(\.5|\.75)?$/.test("+05:30"); // returns false
Edit: oops! forgot to make sure it tested for 1 or 2 numbers for the integer value.
valid_timezones = [0, 1, 2, 3.5, 5.75] # Use your array here
regexp = Regexp.new "\\A(#{valid_timezones.join('|')})\\z"
# => /\A(0|1|2|3.5|5.75)\z/
I'm assuming that the numeric values are submitted (e.g. "5.75") rather than the timezone strings (e.g. "(GMT +5:45)") so that is what you want to match with the regexp.
This regex accepts all formats: +12, -12 and 12
/^[-\+]?(?:(?:1[012]|[0-9])(?:\.\d{1,2})?)$/
https://regex101.com/r/tM8sW0/3
I'm looking to make a series of select boxes in html which show different options depending on what has already been selected. I can get the first two to work but can't work out why it's not injecting into the last box here, the #FCadultseats select box.
I basically want the FCadultseats box to be available only when the movie is in the big cinema (at 9pm).
Thanks a lot for any and all help. I've been trying for ages and dont know why this wont work.
Here's my code:
<form id = "booking" method = "POST" action = "testserver">
Day:
<select id = "dayselector" name = "day">
<option disabled selected> -- Select a Day -- </option>
<option value= "Monday">Monday </option>
<option value = "Tuesday">Tuesday</option>
<option value = "Wednesday">Wednesday</option>
<option value = "Thursday">Thursday</option>
<option value = "Friday">Friday</option>
<option value = "Saturday">Saturday</option>
<option value = "Sunday">Sunday</option>
</select>
<br>
Time and Cinema:
<select id ="timeselector" name ="time">
<option disabled selected> -- Select a Time -- </option>
</select>
First Class Adults: <select id ="FCadultseats">
<option disabled selected> -- Not Available -- </option>
</select>
</form>
$(document).ready(function(){
$("#dayselector").change(function(){
var sel_day = $('option:selected').val();
if (sel_day == "Saturday" || sel_day == "Sunday"){
$("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option><option value ="4">4pm - Small Cinema</option>');
} else {
$("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option>');
}
});
$("#timeselector").change(function(){
var sel_time = $('option:selected').val();
if (sel_time == 9){
$("#FCadultseats").html('<option value ="0">0</option><option value ="1"></option><option value ="2">2</option><option value ="3">3</option><option value ="4">4</option><option value ="5">5</option><option value ="6">6</option><option value ="7">7</option><option value ="8">8</option><option value ="9">9</option><option value ="10">10</option><option value ="11">11</option><option value ="12">12</option>');
}
});
});
Try changing
var sel_day = $('option:selected').val();
to
var sel_day = this.value;
and do that in both places.
$('option:selected') selects ALL the selected options on the page, for every select.
Currently working on a site where I use moment.js. I want to use jquery only.
I get the current minute using:
var minute = moment().minute();
but I want to set an alarm starting at the nearest next 5 minute mark.
So say it's 8:38pm now, var minute would be 38. I'd want to set the input to a value of 40 (that is, 40 minutes)
So where my options are:
<select id="minuteID">
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value=55>55</option>
</select>
And I can input the item like so:
var minute = moment().minute();
$("#minuteID option[value=" + minute + "]").prop("selected", "selected");
How do I make it so that instead of finding the exact option minute, it finds it at intervals of 5 (to the nearest 5 marker).
minute = 5 * Math.round( minute / 5 );
will do as you want.
var minute = roundToFive(moment().minute());
$("#minuteID option[value=" + minute + "]").prop("selected", "selected");
function roundToFive(num) {
var temp = num%5;
if (temp<3)
return num-temp;
else
return num+5-temp;
}