I have a drop down for Number of guests and then need to show another drop down which will have age for each guest. Lets say if some one select 2 from number of guests then 2 other drop down will show to select their age from. This far I have done using following code but the problem is if some body first selects 2 by mistake and goes back to one, the displayed drop down remains there, instead one drop down should hide. Please refer to the code below:
CSS:
#kidsage40, #kidsage41, #kidsage42
{
display:none;
}
HTML:
<select name="kids4" onChange="showroom4kidsage(this.value);">
<option value="0">Kids</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="kidsage40" id="kidsage40">
<option value="0">Kids Age</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>
</select>
<select name="kidsage41" id="kidsage41">
<option value="0">Kids Age</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>
</select>
<select name="kidsage42" id="kidsage42">
<option value="0">Kids Age</option>
<option value="1">1</option>
<option value="3">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>
</select>
JAVASCRIPT:
function showroom4kidsage(value)
{
for(i=0;i<value;i++)
{
kidsage = 'kidsage1'+i;
document.getElementById(kidsage).style.display = "block";
}
}
The easiest way is to just hide them all first, then your loop will show the correct number of drowns after.
function showroom4kidsage(value){
for(i=0;i<3;i++){
document.getElementById('kidsage4' + i).style.display = "none";
}
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
Or adding a classname to make accessing these inputs easier:
<select class="foo" id="kidsage41>...</select>
<select class="foo" id="kidsage42>...</select>
and then you can:
function showroom4kidsage(value){
document.getElementByClassName('foo').style.display = "none";
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
Simply add a class onto the selectboxes, say "kidsageselect" and then have your javascript do this:
function showroom4kidsage(value) {
var elems = document.getElementsByClassName('kidsageselect');
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = 'none';
}
for(var i = 0; i < value; i++) {
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
you have to set all SELECTS to display:none before
Give all those select ONE class="randomclass" and set all elements in that class display:none
or set em one by one via loop or ony by one to display:none like
document.getElementById('kidsage42').style.display = "none";
that would hide the last select f.E.
Related
I need to disable the options in the Aspired drop-down menu.
E.g User chose 3 for "Current" and the option 1 and 2 will be disabled for Aspired. If the user chose 4 in "Current" then option 1, 2 and 3 will be disabled and so on and so forth. I need help in creating logic using JavaScript.
<label>Current:</label>
<select name="Current">
<option value="select">Select</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>
</select>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</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>
</select>
This might help you with your logic. Remember it's an ES6 way.
Pure Js ES6 Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
const listArray = Array.from(options);
listArray.forEach(item => {
if (item.value < document.getElementById("current").value) {
item.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
</select>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
</select>
The backward compatible version (IE9+) Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
Array.prototype.forEach.call(options, function(child, index) {
if (child.value < document.getElementById("current").value) {
child.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
</select>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
</select>
Jquery Version
function onCurrentChange() {
$("#aspired option").each(function() {
if ($(this).val() < $("#current").val()) {
$(this).attr("disabled", true);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
</select>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
</select>
Not ready to write any code now, but you can use JavaScript to get the value of the "current" select after it has been selected, to do that you can add a click event listener for the options.
To get the value, check out this thread Get selected value in dropdown list using JavaScript?
From there, use it to automatically populate the options for the aspired select element, using conditions based on the first value...
This might help for the last step Adding options to select with javascript
function disFun(){
var Aspired = document.getElementById("Aspired").options;
var Current = document.getElementById("Current").value;
for (var i=1; i < +Current; i++) {
Aspired[i].disabled = true;
}
}
<label>Current:</label>
<select id="Current" name="Current" onchange="disFun()">
<option value="select">Select</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>
</select>
<label>Aspired:</label>
<select id="Aspired" name="Aspired">
<option value="select">Select</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>
</select>
If you can use Jquery. You need to select the value chosen say n from Current select. Then loop until that value from 1 to n in the Aspired select and add 'disabled attribute' as true
<label>Current:</label>
<select name="Current">
<option value="select">Select</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>
</select>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</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>
</select>
$(document).ready(function(){
$("select[name='Current']").change(function(){
$("select[name='Aspired']").children("option").attr('disabled', false) // makes all options to selectable in case of new selection in Current select
for (i = 0; i < $(this).children("option:selected").val(); i++) {
$("select[name='Aspired']").children('option[value='+ i +']').attr('disabled', true) // disabling all the values uptil the select value
}
});
});
I ask for your help to improve the form I created, keeping in mind that I am not a great expert in javascript programming.
I need to create a hotel search engine, with the possibility to choose the total number of rooms. Depending on the number of rooms selected, as many hidden form fields will be displayed, containing additional selection fields.
To make the idea of what I have created better, I attach a screen.
To view the hidden fields in relation to the number of rooms chosen, I used this javascript code, repeated 5 times (maximum number of rooms).
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("room1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("pax_room_1").style.display = "block";
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
To realize the options for choosing each room, I used this javascript code repetition in proportion to the room number. That is: 1 room -> entered code 1 once; 2 rooms -> entered the code 2 times; etc.
function childSelect(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("child1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild1").style.display = "block";
}
else{
document.getElementById("agechild1").style.display = "none";
}
}
else{
document.getElementById("agechild1").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child2").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild2").style.display = "block";
}
else{
document.getElementById("agechild2").style.display = "none";
}
}
else{
document.getElementById("agechild2").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child3").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild3").style.display = "block";
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
$(function(){
$(':submit').click(function(){
$('select').each(function(){
if ( $(this).val() == '' )
{
$(this).remove(); // or
$(this).attr('disabled','disabled');
}
});
});
});
While, I used this html code repeated the same way.
<div class="container_hidden">
<div id="pax_room_1" style="display:none;" class="row_hidden">
<div class="nrRoom" style="width: 100px;background: #f5a445;font-size: 15px;text-align: center;height: 30px; padding-top: 5px; border-radius: 10px 10px 0px 0px;"><font color="#000"><img src="images/family-room.png" alt="Icon Family Room" style="width: 19px;" /> Room 1</font></div>
<div class="column"><font color="#000">Adult (18+)</font>
<select id="adulti" name="nrAdult">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000">Children (0-17)</font>
<select id="nrchild" name="nrChild" onchange="childSelect(this);">
<option value="">-</option>
<option id="child1" value="1">1</option>
<option id="child2" value="2">2</option>
<option id="child3" value="3">3</option>
</select>
</div>
<!-- Select Bambino 1 -->
<div id="agechild1" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
</select>
</div>
</div>
<!-- Select Bambino 1-2 -->
<div id="agechild2" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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>
</select>
</div>
</div>
<!-- Select Bambino 1-2-3 -->
<div id="agechild3" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 3 </font>
<select id="child3" name="ageChild3">
<option value="">-</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>
</select>
</div>
</div>
</div>
I realize that it is too laborious, even if it works. This is why I ask you if there is a way to lighten the code.
You can use the data-* attribute to dynamically choose the relations in the html.
e.g.
(function() {
const hiders = document.getElementsByClassName('hider');
// const is ES6 syntax, you can use var, although you might want to read up on that
for (let i = 0; i < hiders.length; ++i) {
const hider = hiders[i];
hider.onchange = function() {
const hideTarget = hider.dataset.hideTarget; // this reads the value of data-hide-target
if (hideTarget == null)
return; // no target set (else we would potentially get an TypeError, when data-hide-target wasn't set. Still happens with an invalid value though, but there you want an error
if (hider.value !== '')
document.getElementById(hideTarget).style.display = "block";
else
document.getElementById(hideTarget).style.display = "none";
// you might also want to take a look at .setAttribute("aria-hidden", "true") and .style.visibility = "hidden"
};
}
})()
<select id="adulti" name="nrAdult" class="hider" data-hide-target="hideme1">
<option value="">-</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>
</select>
<div id="hideme1" style="display: none;">
Hide me 1
</div>
<select id="adulti2" name="nrAdult" class="hider" data-hide-target="hideme2">
<option value="">-</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>
</select>
<div id="hideme2" style="display: none;">
Hide me 2
</div>
I think this snippet is rather easy to understand, but if you want me to elaborate a bit further, feel free to ask.
FYI, this can also be used for convenience in this example:
(function(){
function makeOption(val) {
const option = document.createElement('option');
option.value = val;
option.innerText = val;
return option;
}
const simpleSelects = document.getElementsByClassName('simpleSelect');
for(let i = 0; i < simpleSelects.length; ++i){
const simpleSelect = simpleSelects[i];
const min = simpleSelect.dataset.from;
const max = simpleSelect.dataset.to;
if(min == null || max == null)
return;
simpleSelect.appendChild(makeOption('-'));
for (let j = min; j <= max; ++j) {
simpleSelect.appendChild(makeOption(j));
}
}
})()
<select name="nrAdult" class="simpleSelect" data-from="0" data-to="5"></select>
<select name="nrChildren" class="simpleSelect" data-from="0" data-to="10"></select>
And I also just realised that you were using the same id multiple times, which is not only not allowed, but also doesn't work.
(And yes I am aware that what this does is quite different from what you want, but it is the same principle and I didn't want to give you an out-of-the-box solution.)
I have a situation where I have been stuck. Actually i have to share the room avalability among condition shown in dropdownlist and after selection in any of dropdownlist the actual room avalability should be maintained.
consider the following scenario in javascript
suppose i have 10 rooms available and there are 3 conditions so we have 3 drop-down for each condition and each drop-down have value from 1-10 initially.
User can select value from any of condition so if user selected 5 from one drop-down then other drop-down should have value 1-5 only. if user select value 2 from second condition then final drop-down should have max selectable value 3. User can play in 10 availability of room but any time max value slected from all condition should not go away than 10.
Can any one give me hint how to do this?
When you select an option from one of the drop-downs, subtract the value from the available total and disable those options from the remaining drop-downs.
$("select").change(function() {
$("option").prop('disabled', false);
var select1 = parseInt($("#select1").val(), 10);
var select2 = parseInt($("#select2").val(), 10);
if (!isNaN(select1)) {
var select2_max = 10 - select1;
$("#select2 option").slice(select2_max + 1).prop('disabled', true);
$("#select3 option").slice(select2_max + 1).prop('disabled', true);
if (!isNaN(select2)) {
var select3_max = select2_max - select2;
$("#select3 option").slice(select3_max + 1).prop('disabled', true);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">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>
</select>
<select id="select2">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">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>
</select>
<select id="select3">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">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>
</select>
I've six fields on a form for showing the start time and end time in Hour: Minutes AM/PM format as follows :
<div class="block-time-term" style="padding-bottom:10px;">
<label>Starts at :</label>
<select name="hours_start" id="hours_start">
<option value="">hh</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>
</select>
<select name="minutes_start" id="minutes_start">
<option value="">mm</option>
<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>
<select name="am_pm_start" id="am_pm_start">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<br><br>
<label>Ends at :</label>
<select name="hours_end" id="hours_end">
<option value="">hh</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>
</select>
<select name="minutes_end" id="minutes_end">
<option value="">mm</option>
<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>
<select name="am_pm_end" id="am_pm_end">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
Now there are two hidden fields present on the form as follows :
<input type="hidden" name="val[start_time]" id="start_time" value=""/>
<input type="hidden" name="val[end_time]" id="end_time" value=""/>
Now what I want to do is when user selects all the values from the respective drop downs only then the selected values should get combined and should be stored in respecive hidden fields.
For example if user selects Start Time as follows 2 from Hour, 30 from Minutes and PM then the string to be formed and to be stored should be 02:35 PM. Same should be applicable to end date.
If anything is missing proper alert message should appear. How should I achieve this using jQuery/Javascript?
Thanks.
I have created a JSFiddle for you. I made the hidden text boxes visible for you to check the output. It's better to replace the alert messages with a DIV in production. Hope this helps.
http://jsfiddle.net/su8898/m5r140cy/4/
I am having a problem in javascript. I have two select boxes, one for hours and one for minutes. When the user selects the time then the AM/PM should automatically be set.
Can anyone help me??? I have tried this code:
CODE:
<select class="cust_ddd3" id="phr" onchange="hors(this.value)">
<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>
</select>
<select class="cust_ddd2" id="pmns" onchange="mns(this.value);">
<option value="00">00</option>
<option value="05">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>
Pickup Time: <span id="hrs">08</span>:<span id="mns">00</span><span id="ap">AM</span>
Javascript
<script type="text/javascript">
function hors(str)
{
document.getElementById('hrs').innerHTML=+str;
}
function mns(str)
{
alert(str);
if(document.getElementById('phr').value<=11)
{
var pm="AM";
document.getElementById('ap').innerHTML=pm;
}
else
{
var am="PM";
document.getElementById('ap').innerHTML=am;
}
document.getElementById('mns').innerHTML=+str;
}
</script>
When you convert the minutes to number in
document.getElementById('mns').innerHTML=+str;
The first zero is discarded (normal numbers don't have leading zeroes).
The error is here document.getElementById('mns').innerHTML=+str;. You are using the +=, while you should be using +=, or =:
document.getElementById('mns').innerHTML = str;
The =+ converts the string to a number (and therefore, ignoring the zeros on the left) and then adding the result to the original value