We Keep Coding

form input select returned as number, not string, with javascript

I have one html form which contain about 5 select inputs. Each input has as a value a number. When selection is made, i want to return the value as number, and not as a string. Example below:
<p>Cop <select name="c_palat" id="c_palat">
<option value=0>0</option>
<option value=30>1</option>
<option value=60>2</option>
</select></p>
<p>Adult <select name="a_palat" id="a_palat">
<option value=45>1</option>
<option value=90>2</option>
<option value=135>3</option>
</select></p></div>
<script>
var c_palat = document.getElementById("c_palat");
var c_pal = c_palat.options[c_palat.selectedIndex].value;
var a_palat = document.getElementById("a_palat");
var a_pal = a_palat.options[a_palat.selectedIndex].value;
var x =c_pal + a_pal
document.getElementById("result").innerHTML = x;
</script>
So, for a selection of option 1 from first input, (value 0), and option 1 from second input (value 45), the result is 045(string), not 45(number).
Thank you for any help provided. Have a nice day.

Try using Number
This convert the string into a number.
<script>
var c_palat = document.getElementById("c_palat");
var c_pal = Number(c_palat.options[c_palat.selectedIndex].value);
var a_palat = document.getElementById("a_palat");
var a_pal = Number(a_palat.options[a_palat.selectedIndex].value);
var x =c_pal + a_pal
document.getElementById("result").innerHTML = x;
</script>

You can parse value as integer.
var a = parseInt("10") + "<br>";
var b = parseInt("10.00") + "<br>";
var c = parseInt("10.33") + "<br>";
var d = parseInt("34 45 66") + "<br>";
var e = parseInt(" 60 ") + "<br>";
var f = parseInt("40 years") + "<br>";
var g = parseInt("He was 40") + "<br>";
var h = parseInt("10", 10)+ "<br>";
var i = parseInt("010")+ "<br>";
var j = parseInt("10", 8)+ "<br>";
var k = parseInt("0x10")+ "<br>";
var l = parseInt("10", 16)+ "<br>";
var n = a + b + c + d + e + f + g + "<br>" + h + i + j + k +l;
Output :
10 10 10 34 60 40 NaN 10 10 8 16 16
Source.

You could to with parseFloat().It convert string to number.And get the selected value with direct method c_palat.value instead of options[c_palat.selectedIndex]
var c_palat = document.getElementById("c_palat");
var c_pal = parseFloat(c_palat.value);
var a_palat = document.getElementById("a_palat");
var a_pal = parseFloat(a_palat.value);
var x = c_pal + a_pal
console.log(x)
//document.getElementById("result").innerHTML = x;
<p>Cop <select name="c_palat" id="c_palat">
<option value=0>0</option>
<option value=30>1</option>
<option value=60>2</option>
</select></p>
<p>Adult <select name="a_palat" id="a_palat">
<option value=45>1</option>
<option value=90>2</option>
<option value=135>3</option>
</select></p>

You can use ~~(double-bitwise not) to convert string to integers only
var c_palat = ~~(document.getElementById("c_palat").value);
var a_palat = ~~(document.getElementById("a_palat").value);
var x = c_palat + a_palat;
console.log(x);
<p>Cop <select name="c_palat" id="c_palat">
<option value=0>0</option>
<option value=30>1</option>
<option value=60>2</option>
</select></p>
<p>Adult <select name="a_palat" id="a_palat">
<option value=45>1</option>
<option value=90>2</option>
<option value=135>3</option>
</select></p>

Loop through years in a dropdown

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)
});

angular js input date on firefox

I've got these inputs and this model:
<input name="date" type="date" ng-model="model.date" />
<input name="time" type="time" ng-model="model.time" />
model{
date: "yyyy-mm-dd",
time: "hh24:mi"
}
I need the date and the time as a string and that format is ok for what I have to do. The problem is the input date and input time only work properly with Chrome. If I use Firefox these inputs become two simple input text.
What can I do?

As mentioned in W3Schools, the HTML5 input date is not supported in Firefox. Therefore, all input date will become simple input text in Firefox, as well as IE.
So if you only use IE and Firefox, you could use a jQuery datepicker. Use this for your timepicker.
Also, another way but not as nice, is using <select> tags.
Below I used JS (no jQuery) and HTML to create the datepicker and timepicker. Also, I have also created a "Validate" button to validate the values of the date, which means that "31 Feb 2012" and "29 Feb 2014" will be considered invalid.
HTML:
<table><tr><td>Event Date: </td><td> <select id="startday"></select><select id="startmonth">
<option value="01">Jan</option>
<option value="02">Feb</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 id="startyear"></select></td></tr>
<tr><td>Event Time:</td><td> <select id="starthrs"></select><select id="startmins"></select> [24 hrs clock]</td></tr>
</table><br><br>
<input type="button" id="validate" value="Validate"> <a style="color: Red;" id="error"></a>
JS:
for(var i = 0; i < 24; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("starthrs").innerHTML += ("<option value='" + i + "'>" + s + " </option>");
}
for(var i = 0; i < 60; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("startmins").innerHTML += ("<option value='" + i + "'>" + s + " </option>");
}
for(var i = 1; i < 32; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("startday").innerHTML += ("<option value='" + s + "'>" + i + " </option>");
}
for(var i = new Date().getFullYear(); i < (new Date().getFullYear() + 11); i++) {
document.getElementById("startyear").innerHTML += ("<option value='" + i + "'>" + i + " </option>");
}
function ddlValue(id) {
var e = document.getElementById(id);
var strUser = e.options[e.selectedIndex].value;
return strUser;
}
// Validate date
function isDate(ExpiryDate) { // MM/DD/YYYY format
var objDate, // date object initialized from the ExpiryDate string
mSeconds, // ExpiryDate in milliseconds
day, // day
month, // month
year; // year
// date length should be 10 characters (no more no less)
if (ExpiryDate.length !== 10) {
return false;
}
// third and sixth character should be '/'
if (ExpiryDate.substring(2, 3) !== '/' || ExpiryDate.substring(5, 6) !== '/') {
return false;
}
// extract month, day and year from the ExpiryDate (expected format is mm/dd/yyyy)
// subtraction will cast variables to integer implicitly (needed
// for !== comparing)
month = ExpiryDate.substring(0, 2) - 1; // because months in JS start from 0
day = ExpiryDate.substring(3, 5) - 0;
year = ExpiryDate.substring(6, 10) - 0;
// test year range
if (year < 1000 || year > 3000) {
return false;
}
// convert ExpiryDate to milliseconds
mSeconds = (new Date(year, month, day)).getTime();
// initialize Date() object from calculated milliseconds
objDate = new Date();
objDate.setTime(mSeconds);
// compare input date and parts from Date() object
// if difference exists then date isn't valid
if (objDate.getFullYear() !== year ||
objDate.getMonth() !== month ||
objDate.getDate() !== day) {
return false;
}
// otherwise return true
return true;
}
document.getElementById("validate").onclick = function() {
var startday = parseInt(ddlValue("startday"));
var startmonth = parseInt(ddlValue("startmonth"));
var startyear = parseInt(ddlValue("startyear"));
var starthrs = parseInt(ddlValue("starthrs"));
var startmins = parseInt(ddlValue("startmins"));
// Invalid date
if(!isDate(ddlValue("startmonth") + "/" + ddlValue("startday") + "/" + ddlValue("startyear"))) {
document.getElementById("error").innerHTML = "Invalid date";
return;
}
document.getElementById("error").innerHTML = "";
}
Fiddle. Hope that helped.

AFAIK, 'date' input type is supported only by chrome at the moment. May be this answer will help with your need.

js for loop sort numbers

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.

Opening a dynamically built Google URL in new window

I'm using modified code originally supplied by Google to make a transit trip planner form that uses Google Maps. I'd like the results to open in a new window/tab so the user doesn't have to leave the site (I realize this is a somewhat controversial usability issue, but this is at my client's behest, so...).
The code below uses target="_blank" in the tag - which seemed like the simplest solution - but that doesn't work in this instance - not sure why, but thought it may have something to do with the dynamically-built URL.
I tried several methods gleaned from previous similar questions on this site, the method below being one of them, as well as something along the lines of
myForm.setAttribute("target", "_blank");
but so far nothing has been successful.
Here's the code I'm using. Any suggestions would be greatly appreciated.
<script language="JavaScript" type="text/javascript">
// Edit the strings below this line
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
// End edit block
// Get and parse the user's current date/time
var date = new Date();
var isPM = false;
var currentTime = date.getHours();
var currentDate = "";
var amOption = '<option value="am">AM';
var pmOption = '<option value="pm">PM';
if(currentTime > 11)
isPM = true;
currentTime %= 12;
if(currentTime == 0)
currentTime = 12;
currentTime += ':';
if(date.getMinutes() < 10)
currentTime += '0';
currentTime += date.getMinutes();
if(isPM)
pmOption = '<option selected="true" value="pm">PM';
else
amOption = '<option selected="true" value="am">AM';
if(date.getMonth() < 9)
currentDate = '0';
currentDate += (date.getMonth() + 1) + '/';
if(date.getDate() < 10)
currentDate += '0';
currentDate += date.getDate() + '/' + date.getFullYear();
// Builds the destination URL
function buildURL() {
var loc = 'http://www.google.com/maps?ie=UTF8&f=d&';
for (var i = 0; (i < document.myForm.length - 1); i++) {
if(document.myForm[i].name == 'ampm')
continue;
if(document.myForm[i].name == 'time')
loc += document.myForm[i].name + '=' + document.myForm[i].value + document.myForm.ampm.value + '&';
else {
if(document.myForm[i].name == 'saddr')
loc += document.myForm[i].name + '=' + document.myForm[i].value + '+near+' + zip + '&';
else
loc += document.myForm[i].name + '=' + document.myForm[i].value + '&';
}
}
loc+='dirflg=r';
location.href=loc;
return true;
}
</script>
<form name="myForm" id="myForm" action="#" target="_blank">
<p>Powered by Google Maps</p>
<label for="saddr"><strong>Start</strong> e.g.
<script language="JavaScript" type="text/javascript">
document.write(startExample)
</script>
</label>
<input type="text" name="saddr" maxlength="2048" title="Enter the Origin Address" class="startend" />
<label for="daddr"><strong>End</strong> e.g.
<script language="JavaScript" type="text/javascript">document.write(endExample)</script></label>
<input type="text" name="daddr" maxlength="2048" title="Enter the Destination Address" class="startend" />
<div class="gadgetform-row">
<script language="JavaScript" type="text/javascript">
document.write('<div class="datewrapper">');
document.write('<label for="date"><strong>Date</strong></label><br />');
document.write('<input class="date" type="text" id="fdate" name="date" value="' + currentDate + '" maxlength="10" title="Enter the Date in MM/DD/YY format">');
document.write('</div>');
document.write('<div class="timewrapper">');
document.write('<label for="time"><strong>Time</strong></label><br />');
document.write('<input class="time" type="text" id="ftime" name="time" value="' + currentTime + '" maxlength="8" title="Enter the Time in HH:MM AM or PM format">');
document.write('</div>');
document.write('<div class="ampmwrapper">');
document.write(' <br />');
document.write('<select name="ampm" class="ampm">' + amOption + pmOption + '</select>');
document.write('</div>');
document.write('<div class="clear"></div>');
</script>
</div>
<div class="planby">
<label for="ttype"><strong>Plan by:</strong> </label
><select name="ttype">
<option value="dep">Departure Time </option>
<option value="arr">Arrival Time</option>
</select>
</div>
<a class="button" href="javascript:void();" onclick='return buildURL();'><span class="plan">Plan My Trip</span></a>
</form>

You can try using window.open instead. Here's a function that I created for opening child windows:
openChildWindowWithDimensions = function(url, width, height, showMenu, canResize, showScrollbars) {
var childWindow = window.open(url, "", "\"width=" + width + ",height=" + height + ",menubar=" + (showMenu ? "1" : "0") + ",scrollbars=" + (showScrollbars ? "1" : "0") + ",resizable=" + (canResize ? "1" : "0") + "\"");
if (childWindow){
childWindow.resizeTo(width, height); //IE9 dimensions bug
}
}
Add this function to your page, and at the end of your function that builds the URL, call it like this:
openChildWindowWithDimensions(loc, 800, 600, true, true, true);