I have wrote a code to split the input into two variables i.e. year and month. But, I am unable to make it work. It does not return the total number of months into the respective text field. Please help me debug my code.
$(function() {
$("#duration").keyup(function() {
var input = document.getElementById('duration').value;
var fields = input.split('.');
var years = fields[0];
var months = fields[1];
var result = years.val() * 12 + months.val();
document.getElementById("totalNumMonths").innerHTML = result;
});
});<html>
<body>
<table>
<tr>
<td>Calculate Months</td>
<td>
<label>Input Years in the format (year.month e.g. 11.6)</label>
<input class="form-control" name="duration" id="duration" value="" type="number" />
<br/>
<label>Total Months</label>
<input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" />
</td>
</tr>
</table>
</body>
</html>Issues with code that I identified and fixed.
years.val() and months.val() because years and months holds string value.months will be undefined, so you can define years and months as fields[0] || "0" and fields[1] || "0" respectiveley.totalNumMonths is an input. You should set the value and not innerHTMLyears and months value produces a string, I have added a + symbol infront of them while setting the value for #totalNumMonths to convert them to number, since we are performing numiric action. Else + symbol on string will perform string concatenation.Working Fiddle
$(function () {
$("#duration").keyup(function () {
var input = document.getElementById('duration').value;
var fields = input.split('.');
var years = fields[0] || "0";
var months = fields[1] || "0";
var result = +years * 12 + +months;
document.getElementById("totalNumMonths").value = result;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
<tr>
<td>Calculate Months</td>
<td>
<label>Input Years in the format (year.month e.g. 11.6)</label>
<input class="form-control" name="duration" id="duration" value="" type="number" />
<br />
<label>Total Months</label>
<input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" />
</td>
</tr>
</table>You were calling val on string elements, which caused errors. And the result was adding months as a string value.
$(function () {
$("#duration").keyup(function () {
var input = document.getElementById('duration').value;
var fields = input.split('.');
var years = parseInt(fields[0]);
var months = parseInt(fields[1]);
var result = (years * 12) + months;
document.getElementById("totalNumMonths").value = result;
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>Calculate Months</td>
<td>
<label>Input Years in the format (year.month e.g. 11.6)</label>
<input class="form-control" name="duration" id="duration" value="" type="number"/>
<br/>
<label>Total Months</label>
<input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number"/>
</td>
</tr>
</table>
</body>
</html>In the code snippet, you are having the value of years & months in the respective variables, so you don't need to use years.val() to get that value.
Check this out!!
$(function() {
$("#duration").keyup(function() {
var input = document.getElementById('duration').value;
var fields = input.split('.');
var years = fields[0];
var months = fields[1] || 0;
var result = years * 12 + months;
document.getElementById("totalNumMonths").innerHTML = result;
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Calculate Months</td>
<td>
<label>Input Years in the format (year.month e.g. 11.6)</label>
<input class="form-control" name="duration" id="duration" value="" type="number" />
<br/>
<label>Total Months :</label>
<!-- <input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" /> -->
<span id="totalNumMonths">0</span>
</td>
</tr>
</table>