I have a form where I want people to put in their year of birth. You can only apply if you are over 18 so in the year of birth field I want the min age to be 18. I have done this as shown below however I want to sort the numbers from latest year at the top and oldest year at the bottom. currently I show 1913 first, but I want to show 1994 first. Here is my code
<div id="my-container"></div>
<script>
var d = new Date();
var y = d.getFullYear();
var selectList = "<select>";
for (var x = (y-100); x < (y - 18); x++) {
selectList += "<option>" + x + "</option>";
}
selectList += "</select>";
$('#my-container').html(selectList);
</script>
As Nile mentioned,
var d = new Date();
var y = d.getFullYear();
var selectList = "<select>";
for (var x = y-18; x >= y-100; x--) {
selectList += "<option>" + x + "</option>";
}
selectList += "</select>";
$('#my-container').html(selectList);
http://jsfiddle.net/samliew/WzwKw/
try this
<script>
var d = new Date();
var y = d.getFullYear();
var selectList = "<select>";
for (var x = y-18; x > y - 100; x--) {
selectList += "<option>" + x + "</option>";
}
selectList += "</select>";
$('#my-container').html(selectList);
</script>
<script>
$( document ).ready( function() {
var d = new Date();
var y = d.getFullYear();
var selectList = "<select>";
for (var x = (y-18); x >= (y - 100); x--) {
selectList += "<option>" + x + "</option>";
}
selectList += "</select>";
$('#my-container').html(selectList);
});
</script>
Please try with this.
Related
I have a date texbox to select a date and by using that selected month, I need to loop through the months. For example, if I select today's date I need to showing March as starting month and loop through the months for n number of times. But the problem I am facing here is, after the month of December, I am getting undefined error.
Any idea how to resolve it ?
Fiddle: https://jsfiddle.net/anoopcr/fyaeyg7r/
HTML:
<div class="inputQL">
<div class="InputQuest">Loan start date</div>
<div>
<input type="date" id="date" class="date"></input>
</div>
<div id="hiddendate" class="hiddendate"></div>
</div>
<div id="table_header" class="table_header">
<table cellpadding="15" border="1">
<tr>
<td width="100" align="center"><b>SI No</b></td>
<td width="100" align="center"><b>month</b></td>
<td width="100" align="center"><b>balance</b></td>
</tr>
</table>
</div>
<div id="table" class="table"> </div>
Javascript :
date.onchange = function() {
table();
}
$(document).ready(function() {
document.getElementById("date").valueAsDate = new Date();
table();
})
function table() {
var mo = new Array(12);
mo[0] = "January";
mo[1] = "February";
mo[2] = "March";
mo[3] = "April";
mo[4] = "May";
mo[5] = "June";
mo[6] = "July";
mo[7] = "August";
mo[8] = "September";
mo[9] = "October";
mo[10] = "November";
mo[11] = "December";
var date = new Date(document.getElementById("date").value);
var day = date.getUTCDate();
var month = mo[date.getUTCMonth()];
var year = date.getFullYear();
document.getElementById("hiddendate").innerHTML = month;
var loanstart = month;
var amnttext = 1;
var payment_counter = 1;
var table = "";
table += "<table cellpadding='15' border='1'>";
var n = 0;
while (amnttext < 24) {
var loanstart = mo[date.getUTCMonth() + n];
//display rows
table += "<table cellpadding='15' border='1'>";
table += "<tr>";
table += "<td width='100'>" + payment_counter + "</td>";
table += "<td width='100'>" + loanstart + "</td>";
table += "<td width='100'>" + amnttext + "</td>";
if (n < 12) {
n++;
} else {
n = 0;
}
amnttext++;
payment_counter++;
table += "</table>";
document.getElementById("table").innerHTML = table;
}
One issue is that you access the array mo out of it's limits in
var loanstart = mo[date.getUTCMonth()+n];
Take the modulo by 12 and that Access Violation should be fixed:
var loanstart = mo[(date.getUTCMonth()+n) % 12];
P.S.: As #Vimarsh oberserved, the condition if (n < 12) can be removed completely when using the modulo.
In your code, when n = 11 you increment it rather than making it 0.
Now n = 12 and you get the error as mo[12] is out of bounds.
You can just change the snippet to
if (n<11) {
n++;
} else {
n=0;
}
Although, I agree #milbrandt's answer is a cleaner way to handle this use case.
I need to display a date from an array and it needs to be incremented for each input by 1 day. The date should display as mm/dd/yyyy. I was able to get the date to display correctly with the code that is in the message but after each input the all the dates would increment. I need just the last input to increment a day and I thought putting it in an array would work but now nothing displays. Thanks for helping.
var lowTempArray = [];
var highTempArray = [];
var nowArray = [];
function process() {
'use strict';
//declare variables
var lowTemp = document.getElementById('lowTemp');
var highTemp = document.getElementById('highTemp');
var output = document.getElementById('output');
var date = new Date();
var message = ' ';
if (lowTemp.value) {
lowTempArray.push(lowTemp.value);
if (highTemp.value) {
highTempArray.push(highTemp.value);
message = '<table><th>Date </th><th> Low Temperatures</th><th> High Temperatures</th>';
for (var i = 0, count = lowTempArray.length; i < count; i++) {
for (var i = 0, count = highTempArray.length; i < count; i++) {
for (var i = 0, count = nowArray.length; i < count; i++) {
nowArray.push(new Date(date.getTime()));
date.setDate(date.getDate() + count);
message += '<tr><td>' + ((nowArray.getMonth() + 1) + '/' + (nowArray.getDate() + count) + '/' + nowArray.getFullYear()) + '</td><td> ' + lowTempArray[i] + '</td><td> ' + highTempArray[i] + '</td></tr>';
}
message += '</table>';
output.innerHTML = message;
}
}
}
}
return false;
}
function init() {
'use strict';
document.getElementById('theForm').onsubmit = process;
} // End of init() function.
window.onload = init;
I would like to display the current year and 10 years before that year.
Is it any way to do that through JavaScript or jQuery?
Currently, I am manually inputting values.
HTML:
<span>Year:</span>
<select name="year">
<option value="2014">2014</option>
<option value="2013">2013</option>
And so on....
</select>
I know how to get the current year in JavaScript
Here's what I have currently
var d = new Date();
var y = d.getFullYear();
$(function() {
var start_year = new Date().getFullYear();
for (var i = start_year; i > start_year - 10; i--) {
$('select').append('<option value="' + i + '">' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Year:</span>
<select name="year"></select>
But a templating engine like mustache.js would be better suited for that job, so you can avoid having markup code in your javascript.
html
<select name="example" id="select" ></select>
Javascript version
(function(){
var start_year = new Date().getFullYear();
var html ='';
for (var i = start_year; i > start_year - 10; i--) {
html += '<option value="'+i+'">'+i+'</option>';
}
document.getElementById("select").innerHTML = html;
})()
Jquery version
$(function() {
var start_year = new Date().getFullYear();
var html = ''
for (var i = start_year; i > start_year - 10; i--) {
html += '<option value="'+i+'">'+i+'</option>';
}
$("#select").html(html)
});
This is my demo.jsp page.for this code i'm getting result in single row but i need to print 5 tables per row,remaining 5 multiplication table in second row,vice-versa.where can i change the code to get expected result.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Tables</title>
<script>
function getResult() {
var output;
var tableStart = "<table>";
var tableEnd = "</table>";
var trStart = "<tr>";
var trEnd = "</tr>";
var tdStart = "<td>";
var tdEnd = "</td>";
var firstValue = document.getElementById("first").value;
//alert(firstValue);
var secondValue = document.getElementById("second").value;
//alert(secondValue);
if (firstValue < secondValue) {
//alert(secondValue);
document.write(tableStart);
document.write(trStart);
for (var k = firstValue; k <= secondValue; k++) {
document.write(tdStart);
document.write(tableStart);
document.write(trStart);
document.write(tdStart);
document.write(k + ":table");
document.write(tdEnd);
document.write(trEnd);
for (var i = 1; i <= 10; i++) {
output = k * i;
document.write(trStart);
document.write(tdStart);
document.write(k + "*" + i + "=" + output);
document.write(tdEnd);
document.write(trEnd);
}
document.write(tableEnd);
document.write(tdEnd);
}
document.write(trEnd);
document.write(tableEnd);
document.close();
}
else {
//alert(secondValue);
alert("Ending table should be higher number");
}
}
</script>
</head>
<body>
<%
out.println("<table>");
out.println("<tr><td>Starting Number");
out.println("</td><td>Ending Number</td></tr>");
out.println("<tr><td>");
out.println("<input type='text' id='first'>");
out.println("</td><td>");
out.println("<input type='text' id='second'>");
out.println("</td></tr>");
out.println("<tr><td align='right'>");
out.println("<input type='button' value='Get Tables' onclick='getResult()'");
out.println("</td></tr>");
out.println("</table>");
%>
</body>
</html>
You need to nest your loops one more level. There's a new, outer loop that increments j from start to end in steps of 5. Then the k loop goes from j to the end of the current row or the ending value, whichever comes first.
DEMO
function getResult() {
var output;
var tableStart = "<table>";
var tableEnd = "</table>";
var trStart = "<tr>";
var trEnd = "</tr>";
var tdStart = "<td>";
var tdEnd = "</td>";
var firstValue = parseInt(document.getElementById("first").value, 10);
//alert(firstValue);
var secondValue = parseInt(document.getElementById("second").value, 10);
//alert(secondValue);
if (firstValue < secondValue) {
//alert(secondValue);
document.write(tableStart);
for (var j = firstValue; j <= secondValue; j += 5) {
document.write(trStart);
for (var k = j; k <= Math.min(secondValue, j+4); k++) {
document.write(tdStart);
document.write(tableStart);
document.write(trStart);
document.write(tdStart);
document.write(k + ":table");
document.write(tdEnd);
document.write(trEnd);
for (var i = 1; i <= 10; i++) {
output = k * i;
document.write(trStart);
document.write(tdStart);
document.write(k + "*" + i + "=" + output);
document.write(tdEnd);
document.write(trEnd);
}
document.write(tableEnd);
document.write(tdEnd);
}
document.write(trEnd);
}
document.write(tableEnd);
document.close();
} else {
//alert(secondValue);
alert("Ending table should be higher number");
}
}
I want to have options of this year and next year, but I can't figure out how to integrate the JavaScript variable into the value = "" and the text inside the option tags. This code demonstrates what I mean (obviously it is not valid, but shows what I mean). so today the first option would be 2013 and the next, 2014. Thanks.
var date = new Date(),
y = date.getFullYear();
<html>
<select id = "year">
<option value = "y" >y</option>
<option value = "(y + 1)">(y + 1)</option>
</select>
</html>
With jQuery:
var sel = $("#year"),
date = new Date(),
y = date.getFullYear(),
newOptions = "";
newOptions += "<option value='" + y + "'>" + y + "</option>";
newOptions += "<option value='" + (y + 1) + "'>" + (y + 1) + "</option>";
sel.append(newOptions);
DEMO: http://jsfiddle.net/YxqcT/
Since you mentioned that you're using jQuery, you can use this:
var currentYear = (new Date).getFullYear();
var opts;
$('#year').append(function () {
for (var i = currentYear; i <= currentYear + 1; i++) {
opts += "<option value='" + i + "'>" + i + "</option>";
}
return opts;
})
jsFiddle example
No need for jQuery. Simple HTML DOM can do the work for you.
Sample >> http://jsfiddle.net/47dDu/
<!DOCTYPE html>
<html>
<body>
<select id="MySelectBox">
<option value="1" id="this_year"></option>
<option value="2" id="next_year"></option>
</select>
<script type="text/javascript">
var d = new Date();
var x = document.getElementById("this_year");
x.innerHTML=d.getFullYear(); //get this year
var y = document.getElementById("next_year");
y.innerHTML=d.getFullYear()+1; //get next year
</script>
</body>
</html>