I have kept three drop down boxes for DATE, MONTH and YEAR. I want a validation function that will return false if the day entered is more than 29 for the month of FEB. If it is a leap year, it should accept 29 for FEB. I used the following JavaScript.
It is prompting even if I enter values 27,28 in the date field. Can you just help me out with this?
Here is the JavaScript code..
var myDayStr = document.UserReg.Date.value;
var myMonthStr = document.UserReg.Month.value;
var myYearStr = document.UserReg.Year.value;
var myMonth = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
var validMonthLength = ['',31,28,31,30,31,30,31,31,30,31,30,31];
var myDateStr = myDayStr + ' ' + myMonthStr + ' ' + myYearStr;
var myDate = new Date();
myDate.setFullYear( myYearStr, myMonthStr, myDayStr );
if ( myDate.getMonth() != myMonthStr ) {
alert( ' sorry, but "' + myDateStr + '" is NOT a valid date of birth.' );
return false;
}
var testDate = new Date(myYearStr,(myMonthStr-1),myDateStr);
if ( (myMonthStr == '02') && (myDateStr != testDate.getDate()) ) {
alert("There is no dates above 28 in February of "+myYearStr);
return false;
}
if (myMonthStr != 2) {
if (myDateStr > validMonthLength[myMonthStr])
{
alert("Invalid date for month chosen");
return false; }
}
setFullYear automatically re-aligns the months if you put in a number of days greater than the number of days allowed in a month. for example:
date = new Date();
date.setFullYear('2012','2','35');
date.getMonth(); //returns 3
date.getDay(); // returns 3
So what you do is set up the date like you do then just do a straight comparison. Keep it simple.
i created manually u can try, its working
function isleap(year) {
var yr = year;
if ((parseInt(yr) % 4) == 0) {
if (parseInt(yr) % 100 == 0) {
if (parseInt(yr) % 400 != 0) {
//alert("Not Leap");
return false;
}
if (parseInt(yr) % 400 == 0) {
//alert("Leap");
return true;
}
}
if (parseInt(yr) % 100 != 0) {
//alert("Leap");
return true;
}
}
if ((parseInt(yr) % 4) != 0) {
//alert("Not Leap");
return false;
}
}
function dayChange() {
var Year = document.getElementById('<%=ddlYear.ClientID %>');
var Month = document.getElementById('<%=ddlMonth.ClientID %>');
var Day = document.getElementById('<%=ddlDay.ClientID %>');
if (Day.options[Day.selectedIndex].value == 0) {
Day.style.border = '1px solid red';
}
else {
Day.style.border = '1px solid green';
}
}
function yearChange() {
var Year = document.getElementById('<%=ddlYear.ClientID %>');
var Month = document.getElementById('<%=ddlMonth.ClientID %>');
var Day = document.getElementById('<%=ddlDay.ClientID %>');
if (Year.options[Year.selectedIndex].value == 0) {
Year.style.border = '1px solid red';
Day.style.border = '1px solid red';
Month.style.border = '1px solid red';
}
else {
Year.style.border = '1px solid green';
Day.style.border = '1px solid red';
Month.style.border = '1px solid red';
}
Day.options[0].selected = true;
Month.options[0].selected = true;
if (Day.options.length == 30) {
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
else if (Day.options.length == 29) {
$('#ddlDay').append("<option >29</option>");
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
}
function monthChange() {
var isLeap;
var Day = document.getElementById('<%=ddlDay.ClientID %>');
var Month = document.getElementById('<%=ddlMonth.ClientID %>');
var Year = document.getElementById('<%=ddlYear.ClientID %>');
Month.style.border = '1px solid red';
Day.options[0].selected = true;
Day.style.border = '1px solid red';
if (Month.options[Month.selectedIndex].value == 0) {
Month.style.border = '1px solid red';
Day.options[0].selected = true;
Day.style.border = '1px solid red';
}
else if (Month.options[Month.selectedIndex].value == 2) {
Month.style.border = '1px solid green';
if (isleap(Year.value) == true) {
isLeap = 'true';
Day.options['31'].remove();
Day.options['30'].remove();
Day.options[0].selected = true;
Day.style.border = '1px solid red';
Month.style.border = '1px solid green';
}
else {
Day.options['31'].remove();
Day.options['30'].remove();
Day.options['29'].remove();
Day.options[0].selected = true;
Day.style.border = '1px solid red';
Month.style.border = '1px solid green';
}
Day.options[0].selected = true;
Day.style.border = '1px solid red';
Month.style.border = '1px solid green';
}
else {
if (Day.options.length == 29) {
$('#ddlDay').append("<option >29</option>");
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
else if (Day.options.length == 30) {
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
Month.style.border = '1px solid green';
}
}
<form id="dob_form">
<select name="Year" id="year">
<option> Year</option>
<option></option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
</select>
<select name="Month" id="month" disabled="disabled">
<option></option>
<option> Month</option>
<option></option>
<option value="January">January</option>
<option value="Febuary">Febuary</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 name="Day" id="day" disabled="disabled">
<option></option>
<option> Day</option>
<option></option>
<option value="1">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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option id="29" value="29">29</option>
<option id="30" value="30">30</option>
<option id="31" value="31">31</option>
</select>
</form>
$(document).ready(function(){
$("#year").change(function(){
var year = $("#year").val();
if(year!="" && year!="Year"){
$("#month").removeAttr('disabled');
$("#month").val('Month');
}
else{
$("#month").attr('disabled', true);
$("#month").val('');
$("#day").attr('disabled', true);
$("#day").val('');
}
});
$("#month").change(function(){
var month = $("#month").val();
var year = $("#year").val();
if(month!="" && month!="Month"){
$("#day").removeAttr('disabled');
$("#day").val('Day');
if(month=="Febuary"){
var lastday = $("#day option").last().val();
$("#31").remove();
$("#30").remove();
if(year % 4 != 0){
$("#29").remove();
}else if(lastday == 28){
$("#day").append("<option id='29' value='29'>29</option>");
}
}
else if(month == "April" ||
month == "June" ||
month == "November" ||
month == "September")
{
var lastday = $("#day option").last().val();
if(lastday == 31){
$("#31").remove();
} else if(lastday == 29){
$("#day").append("<option id='30' value='30'>30</option>");
}
else if(lastday == 28){
$("#day").append("<option id='29' value='29'>29</option><option id='30' value='30'>30</option>");
}
}
else{
var lastday = $("#day option").last().val();
if(lastday == 30){
$("#day").append("<option id='31' value='31'>31</option>");
} else if(lastday == 29){
$("#day").append("<option id='30' value='30'>30</option><option id='31' value='31'>31</option>");
}
else if(lastday == 28){
$("#day").append("<option id='29' value='29'>29</option><option id='30' value='30'>30</option><option id='31' value='31'>31</option>");
}
}
}
else{
$("#day").attr('disabled', true);
$("#day").val('');
}
});
});
Related
This question already has answers here:
How to validate a date?
(11 answers)
Closed 3 years ago.
I need to accept the start date of an event in an HTML form
Created 3 Separate select boxes for date, month, and time as follows
I want to run an onblur function on any of the boxes and should return false
if any other 2 boxes have focus
<script type="text/javascript">
function chkStartDate(str) {
var dd = document.getElementById("startDD");
var mm = document.getElementById("startMM");
var yy = document.getElementById("startYY");
var err = document.getElementById("dateerr");
var focus = document.activeElement;
if (focus == dd || focus == mm || focus == yy) {
err.style.display = "block";
err.innerHTML = "Still in Focus";
return true;
} else {
if (dd.value == "" || mm.value == "" || yy.value == "") {
err.style.display = "block";
err.innerHTML = "Invalid Start Date";
} else {
var d = new date();
d.setDate(dd.value);
d.setMonth(mm.value);
d.setFullYear(yy.value);
err.style.display = "block";
err.innerHTML = !isNaN(d.valueOf());
return true;
}
}
}
</script>
<html>
<body>
<form name=event method=post action=xxx.asp>
<font face=Verdana Style="FONT-SIZE: 12px"><b><i>Start Date</i></b></font>
<Select id=startDD name=startDD style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "dddd")>
<Option value="">DD</option>
<Option value="1">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>
<Option value="13">13</option>
<Option value="14">14</option>
<Option value="15">15</option>
<Option value="16">16</option>
<Option value="17">17</option>
<Option value="18">18</option>
<Option value="19">19</option>
<Option value="20">20</option>
<Option value="21">21</option>
<Option value="22">22</option>
<Option value="23">23</option>
<Option value="24">23</option>
<Option value="25">25</option>
<Option value="26">26</option>
<Option value="27">27</option>
<Option value="28">28</option>
<Option value="29">29</option>
<Option value="30">30</option>
<Option value="31">31</option>
</Select>
<Select id=startMM name=startMM style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "mmmm")>
<Option value="">MM</option>
<Option value="0">Jan</option>
<Option value="1">Feb</option>
<Option value="2">Mar</option>
<Option value="3">Apr</option>
<Option value="4">May</option>
<Option value="5">June</option>
<Option value="6">Jul</option>
<Option value="7">Aug</option>
<Option value="8">Sep</option>
<Option value="9">Oct</option>
<Option value="10">Nov</option>
<Option value="11">Dec</option>
</Select>
<Select id=startYY name=startYY style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "yyyy")>
<Option value="">YYYY</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>
</Select>
<font face=verdana style="font-size:10px"><i>(Start Date in DD/MM/YYYY Format)</i></font>
<font style="font-size:4px"><br><br></font>
<font face=Verdana Style="FONT-SIZE: 11px" color=red><b>
<span id="dateerr" style="display:none"></span></b></font>
</form>
</body>
</html>
I want the onblur event to validate the date only if focus is not on any of the 3 select boxes (not happening)
For your second point to validate the date :
Create a date object by passing the iso string representation of your date
Create an iso string representation of your date
Ensure this two string are identical
new Date("2019-04-31T00:00:00.000Z").toJSON() // "2019-05-01T00:00:00.000Z"
function validateDate(dd, mm, yyyy)
{
dd = (dd < 10) ? "0"+dd : dd;
mm = (mm < 10) ? "0"+mm : mm;
yyyy = (yyyy < 100) ? "20"+yyyy : yyyy;
var d_iso = new Date(yyyy+"-"+mm+"-"+dd+"T00:00:00.000Z").toJSON();
var iso = yyyy+"-"+mm+"-"+dd+"T00:00:00.000Z";
if(d_iso === iso)
return true;
else
return false;
}
console.log(validateDate(4, 2, 19)); // true
console.log(validateDate(31, 2, 19)); // false
console.log(validateDate(31, 4, 2019)); // false
console.log(validateDate(31, 3, 2019)); // true
I'm trying to validate combo box's like the below code, I get few alert messages even one condition is true. I needed to get only one alert even one condition is true and other should bordered in red. thank you
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
if (TrackID == '3' && IssueCF == '157') {
alert("Please select an option!");
$("#issue_custom_field_values_55").css("border", "2px solid red");
return false;
}
});
});
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
alert("Please select an option!");
$("#issue_custom_field_values_52").css("border", "2px solid red");
return false;
}
});
});
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
alert("Please select an option!");
$("#issue_custom_field_values_56").css("border", "2px solid red");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p><label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug </option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
</form>
<input type="submit" name="commit" value="Create">
I needed to get the result like this with an alert message when first other values have been selected with an option. I needed an help from the following javascript code changes. thank you
Use below given code to remove border -
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
}
else{
$("#issue_custom_field_values_55").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
}
else{
$("#issue_custom_field_values_52").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
}else
{
$("#issue_custom_field_values_56").css("border", "none");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p>
<label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug </option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
<input type="submit" name="commit" value="Create">
</form>
</body>
</html>
I analysed your java-script and found that your logic require some changes as given below -
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p>
<label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug </option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
<input type="submit" name="commit" value="Create">
</form>
</body>
</html>
Use below given code in this case. Please like my profile if it works for you.
<script type="text/javascript">
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_55").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_52").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_56").css("border", "none");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
</script>
I have two ranges for month and year.start and end range.
If I select end date june2016 start date it should be from the past 9 months.
If I select wrong I will get error message. I did but it is not working. Please help anyone.
http://jsfiddle.net/GUSN5/84/
Valid Condition:
Examples:
End Date :sep2016.
Start Date :Dec2015
Same month should be accept:
End Date :sep2016.
Start Date :sep2016
Invalid Condition:
Examples:
End Date :sep2016.
Start Date :oct2016
HTMl:
End date:
<select name="monthEnd" id="monthEnd" aria-required="" class="salary fll mr">
<option value="def">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select class="salary" aria-required="" id="yearEnd" name="yearEnd">
<option val="def">Year</option>
<option value="2016" selected="selected">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
Start Date:
<select name="monthStart" id="monthStart" aria-required="" class="salary fll mr">
<option value="def">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select class="salary" aria-required="" id="yearStart" name="yearStart" selected="selected">
<option selected="selected">Year</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
Javascript:
var $monthStart = $('#monthStart'),
$yearStart = $('#yearStart'),
$monthEnd = $('#monthEnd'),
$yearEnd = $('#yearEnd');
$(document).on('change','#monthEnd,#monthStart,#yearEnd,#yearStart', function() {
var startM = parseInt($monthStart.val()),
endM = parseInt($monthEnd.val()),
diffY = $yearEnd.val() - $yearStart.val(),
diffM = $monthEnd.val() - $monthStart.val();
if ((diffY == 0 && diffM < 0) ||(diffY == 0 && diffM >= 9) ||(diffY == 1 && diffM >= 9) || (diffY < 0) || (diffY > 1) || (diffY == 1 && diffM > -10)) {
alert("Selected range is not correct bcoz that range is not within 9 months from back");
} else {
alert("Selected range correct bcoz that range is within 9 months from back");
}
});
Try below code
$(document).ready(function () {
var $monthStart = $('#monthStart'),
$yearStart = $('#yearStart'),
$monthEnd = $('#monthEnd'),
$yearEnd = $('#yearEnd');
$(document).on('change', '#monthEnd,#monthStart,#yearEnd,#yearStart', function () {
if ($monthStart.val() != 'def' && $monthEnd.val() != 'def' && $yearStart.val() != 'def' && $yearEnd.val() != 'def') {
var startM = parseInt($monthStart.val()),
endM = parseInt($monthEnd.val()),
diffY = $yearEnd.val() - $yearStart.val(),
diffM = $monthEnd.val() - $monthStart.val();
if (validate(diffY, startM, endM)) {
alert("Selected range is not correct bcoz that range is not within 9 months from back");
}
else {
alert("Selected range correct bcoz that range is within 9 months from back");
}
}
});
function validate(diffY, startM, endM) {
var diffM = (endM + (diffY * 12)) - startM;
alert(endM + (diffY * 12));
alert(diffY);
alert(diffM);
if (diffM > 9 || diffM < 0)
return true;
else
return false;
}
});
and
set value for start year option like below
<option selected="selected" value="def">Year</option>
To simplify logic you can compare total number of months from AD. Also add validation that all fields set at the start (http://jsfiddle.net/unecL3yz/1/):
var $monthStart = $('#monthStart'),
$yearStart = $('#yearStart'),
$monthEnd = $('#monthEnd'),
$yearEnd = $('#yearEnd');
$(document).on('change','#monthEnd,#monthStart,#yearEnd,#yearStart', function() {
if([$yearStart,$yearEnd,$monthStart,$monthEnd].some(f => isNaN(f.val())))
return;
let diff = ($yearEnd.val()-$yearStart.val())*12 + $monthEnd.val()-$monthStart.val()
if(diff>=0 && diff<=9)
alert(`Selected range correct bcoz that range is within 9 months from back: ${diff}`);
else
alert(`Selected range is not correct bcoz that range is not within 9 months from back: ${diff}`);
});
Issue is need to check if range is correct once all four inputs are filled and need to convert $yearEnd.val() - $yearStart.val() to a int with parseInt().
$(document).on('change', '#monthEnd,#monthStart,#yearEnd,#yearStart', function() {
var $monthStart = $('#monthStart'),
$yearStart = $('#yearStart'),
$monthEnd = $('#monthEnd'),
$yearEnd = $('#yearEnd');
if ($monthEnd.val() && $yearEnd.val() && $monthStart.val() && $yearStart.val()) {
var diffY = parseInt($yearStart.val() - $yearEnd.val()),
diffM = parseInt($monthStart.val() - $monthEnd.val());
if ( (diffY === 0 && diffM >= -9 && diffM <= 0) || (diffY === -1 && diffM >= 3 && diffM <= 11) ) {
console.log('Date range is within 9 months.');
} else {
console.log('Date range is not within 9 months.');
this.value = "";
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
End date:
<select name="monthEnd" id="monthEnd">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="yearEnd" id="yearEnd">
<option value="">Year</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
<br/>
<br/> Start Date:
<select name="monthStart" id="monthStart">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="yearStart" name="yearStart">
<option value="">Year</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
Also I find it best to have the first option <option value="">Month</option> value set to blank (empty).
I am validating a form using jQuery.
It is working perfectly, but I just feel the code is quite "bulky". There is a lot of if statements being used to achieve this logic in the app.sendForm.init() function. I think this could be tidied and any advice here would be greatly appreciated. Perhaps I should be using a switch statement instead?
Is there another approach I should take to tidy up this code, or do I just have to accept it is going to be quite longwinded?
I have also posted the question here where more be a more appropriate forum for this type of question.
"use strict";
var app = app || {};
(function(){
app.initialize = {
init: function() {
app.sendForm.init();
}
};
app.sendForm = {
init: function(){
$("#entry").submit(function( event ) {
var userEmail = $("#email"),
userName = $("#first_name"),
userLastName = $("#last_name"),
date = $("#birth_day"),
month = $("#birth_month"),
year = $("#birth_year"),
countryName = $("#country");
app.validation.dateOfBirth(date, month, year);
if(!app.validation.empty(date) ||!app.validation.empty(month) ||!app.validation.empty(year) || !app.validation.empty(countryName) || !app.validation.email(userEmail) || !app.validation.empty(userName) || !app.validation.empty(userLastName)){
event.preventDefault();
alert("didnt send")
if(!app.validation.email(userEmail)) {
userEmail.addClass('invalid');
} else {
userEmail.removeClass('invalid');
}
if(!app.validation.empty(userName)) {
userName.addClass('invalid');
} else {
userName.removeClass('invalid');
}
if(!app.validation.empty(userLastName)) {
userLastName.addClass('invalid');
} else {
userLastName.removeClass('invalid');
}
if(!app.validation.empty(countryName)) {
countryName.addClass('invalid');
} else {
countryName.removeClass('invalid');
}
if(!app.validation.empty(date)) {
date.addClass('invalid');
} else {
date.removeClass('invalid');
}
if(!app.validation.empty(month)) {
month.addClass('invalid');
} else {
month.removeClass('invalid');
}
if(!app.validation.empty(year)) {
year.addClass('invalid');
} else {
year.removeClass('invalid');
}
if(!$('#privacy_terms').is(':checked')) {
$('.terms-con').addClass('invalid');
} else {
$('.terms-con').removeClass('invalid');
}
} else {
$("#thank-you").css("display", "block");
alert("sent")
}
});
}
};
/*
* Validation
*/
app.validation = {
email: function(id) {
// Regex, use this to validate the Email. It return true or false.
var emailVal = id.val(),
re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(emailVal);
},
empty: function(id) {
// Use this to validate the Password. Checks if value is empty. It return true or false.
var elementVal = $.trim(id.val());
if(elementVal.length > 0)
return true;
},
dateOfBirth: function(date, month, year) {
var forbiddenAge = 14;
var DOB = date + " " + month + " " + year;
var today = new Date();
var birthDate = new Date(DOB);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
if(age < forbiddenAge){
alert("you are under 14");
}
}
};
app.docOnReady = {
init: function() {
app.initialize.init();
}
};
$(document).ready(app.docOnReady.init);
})(jQuery);
body {
background-color: #fff;
color: #000;
font-family: 'Arial', sans-serif;
margin: 0;
}
#entry {
font-family: 'Arial', sans-serif;
max-width: 400px;
margin: 0 auto;
}
#entry input,
#entry select {
display: block;
margin-bottom: 10px;
}
#entry label {
padding-bottom: 5px;
}
#entry #birth_day,
#entry #birth_month,
#entry #birth_year {
display: inline-block;
}
#entry input[type=submit] {
display: block;
border: 1px solid #1e1e1e;
text-transform: uppercase;
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
text-decoration: none;
color: #fff;
line-height: 20px;
letter-spacing: .5px;
max-width: 150px;
height: 40px;
padding: 0 10px;
background: #1e1e1e;
text-shadow: none;
box-shadow: none;
-webkit-box-shadow: none;
font-weight: 400;
margin-top: 15px;
}
#privacy {
font-size: 12px;
}
.invalid {
border-color: #ed0000;
background-color: #ffd8d8;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- JQUERY CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- JAVASCRIPT -->
<script src="script.js"></script>
</head>
<body>
<noscript>
For full functionality of this site it is necessary to enable JavaScript.
Here are the <a href="http://www.enable-javascript.com/" target="_blank">
instructions how to enable JavaScript in your web browser</a>.
</noscript>
<div>
<form id="entry">
<label for="first_name">First name:</label>
<input id="first_name" type="text" name="first_name" />
<label for="last_name">Last name:</label>
<input id="last_name" type="text" name="last_name" />
<label>Country/Region</label>
<select id="country" name="country">
<option value="">Select Your Country/Region</option>
<option value="GB">United Kingdom</option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
</select>
<label for="email">Email:</label>
<input id="email" type="text" name="email" />
<label>Date of Birth</label>
<select id="birth_day" name="birth_day">
<option value="">DD</option>
<option value="1">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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="birth_month" name="birth_month">
<option value="">MM</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<select id="birth_year" name="birth_year">
<option value="">YYYY</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
</select>
<div id="privacy">
<input id="privacy_check" type="checkbox" name="privacy_check" />
<label for="privacy_check">I have read and understood the Terms and Conditions.</label>
</div>
<input type="submit" name="ch_access" value="Submit" />
</form>
</div>
</body>
</html>
You could create a function that performs the if/else statements:
function setInvalidClass(invalidCondition, jQueryObject) {
if(invalidCondition) {
jQueryObject.addClass('invalid');
}
else {
jQueryObject.removeClass('invalid');
}
}
then replace all the if/else statements with a call to the setInvalidClass:
setInvalidClass(!app.validation.email(userEmail), userEmail);
setInvalidClass(!app.validation.empty(userName), userName);
...
You could give a class to the inputs for the type of validation and then just loop through them:
$("#entry").submit(function(event) {
var emptyInputs = $(".empty"), // for empty validation give inputs class of empty
emailInputs = $(".email"), // for email validation give inputs class of email
isValid = app.validation.dateOfBirth($("#birth_day"), $("#birth_month"), $("#birth_year"));
emptyInputs.each(function() {
var input = $(this);
if (!app.validation.empty(input)) {
input.addClass('invalid');
isValid = false;
} else {
input.removeClass('invalid');
}
});
emailInputs.each(function() {
var input = $(this);
if (!app.validation.email(input)) {
input.addClass('invalid');
isValid = false;
} else {
input.removeClass('invalid');
}
});
if (!$('#privacy_terms').is(':checked')) {
$('.terms-con').addClass('invalid');
isValid = false;
} else {
$('.terms-con').removeClass('invalid');
}
if (isValid) {
$("#thank-you").css("display", "block");
alert("sent");
} else {
event.preventDefault();
alert("didnt send");
}
});
or alternatively give all inputs that need validating the same class with a data attribute of what type of validation it is:
$("#entry").submit(function(event) {
var inputs = $(".validation"),
isValid = app.validation.dateOfBirth($("#birth_day"), $("#birth_month"), $("#birth_year"));
inputs.each(function() {
var input = $(this),
validationType = input.data('validation-type'),
inputValid;
switch (validationType) {
case 'email':
inputValid = app.validation.email(input);
break;
case 'empty':
inputValid = app.validation.empty(input);
break;
}
if (!inputValid) {
input.addClass('invalid');
isValid = false;
} else {
input.removeClass('invalid');
}
});
if (!$('#privacy_terms').is(':checked')) { // this could be added to the loop - just wasn't sure what terms-con element is
$('.terms-con').addClass('invalid');
isValid = false;
} else {
$('.terms-con').removeClass('invalid');
}
if (isValid) {
$("#thank-you").css("display", "block");
alert("sent");
} else {
event.preventDefault();
alert("didnt send");
}
});
I've a problem with three selects for birth of date (Day,Month,Year) in IE. This is the HTML.
<li><label for="dobYear">Date of birth*:</label>
<select name="dobDay" id="dobDay">
<option value="1">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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobMonth" id="dobMonth" onchange="getDays();">
<option value="01">Jan</option>
<option value="02">Fev</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="dobYear" id="dobYear" onchange="getDays();">
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
</select>
</li>
and I have a javascript code to count number of days in every month/year
function getDays()
{
var month = document.getElementById("dobMonth").options[document.getElementById("dobMonth").selectedIndex].value;
var year=document.getElementById("dobYear").options[document.getElementById("dobYear").selectedIndex].value;
var daysoutput;
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
var j = 31;
}
else if (month == 4 || month == 6 || month == 9 || month == 11){
var j = 30;
}
else{
if (year%4==0){
j=29;
}
else{
j=28;
}
}
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;
}
with FF, this is okay, but in IE instead after selecting a month/year , the days select becomes empty!
and I don't know why? ,but I doubt the problem is with innerHTML.
thank you
The proper way to add options is using the .add() method of the options collection of the drop down element.
Working example:
window.onload = function WindowLoad() {
var dtNow = new Date();
var year = dtNow.getFullYear();
FillDropDownRange("ddlMonth", 1, 12, dtNow.getMonth() + 1);
FillDropDownRange("ddlYear", year - 5, year, year);
FillDays();
};
function FillDropDownRange(oDDL, rangeStart, rangeEnd, nSelectedValue) {
if (typeof oDDL == "string")
oDDL = document.getElementById(oDDL);
while (oDDL.options.length > 0)
oDDL.removeChild(oDDL.options[0]);
for (var i = rangeStart; i <= rangeEnd; i++) {
var option = new Option();
option.text = i + "";
option.value = i + "";
if (typeof nSelectedValue != "undefined" && i == nSelectedValue)
option.selected = "selected";
oDDL.options.add(option);
}
}
function FillDays() {
var month = parseInt(document.getElementById("ddlMonth").value);
var year = parseInt(document.getElementById("ddlYear").value);
var date = new Date();
date.setDate(1);
date.setMonth(month - 1);
date.setFullYear(year);
var daysCount = 0;
while (date.getMonth() == (month - 1)) {
date.setDate(date.getDate() + 1);
daysCount++;
}
FillDropDownRange("ddlDay", 1, daysCount);
}
<select id="ddlDay"></select> /
<select id="ddlMonth" onchange="FillDays();"></select> /
<select id="ddlYear" onchange="FillDays();"></select>
I also gave "safe" way to get the number of days given specific month and year.
Thank you friends , I've solved the problem and it's now okey with IE:
this is the solution:
I changed this line :
<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay"> in the html code to this
to this ;
<span id="days"><label for="dobYear">Date of birth*:</label>
<select name="dobDay" id="dobDay">
as you can see , I've added a container (parent) span to select
then I changed the js code as follows:
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;
becomes :
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById("days").innerHTML='<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay">'+daysoutput+'</select></label>';
it may appear that IE doesn't apply the innerHTML to a select tag, then I've added a span tag that contains this select , and changed its innerHTML with javascript
thank you
You can not set the innerHTML of a select element with Internet Explorer.
You should be using new Option().
var sel = document.getElementById("mySelect");
sel.options.length = 0; //removes all options
for(var i=0;i<3;i++){
var newOpt = new Option("text" + i, "value" + i);
sel.options[i] = newOpt;
}
You could also use createElement instead of new Option.
I think you should try to case your option value to string or parseInt to compare. It might fixed your problem. For instance:
if(month == 3)
to
if(month == "3")
or
if(parseInt(month) == 3)