CODEWITHSUNDEEP
javascripthtml
Mouni
Mouni

Reputation: 233

Issue in adding dropdown list for feets and inches and calculation?

I had created a code for BMR calculator and it is working without adding the dropdown but when I add a dropdown list for feet and inches and other tables like kg,cm blocks click on the caluclate button it is not working.

Please any one help me.

My code :

   <!DOCTYPE html><html><head><meta http-equiv="content-type"  content="text/html;charset=utf-8"/><link rel="stylesheet" type="text/css"  href="easyui.css"><link rel="stylesheet" type="text/css" href="demo.css">   <script type="text/javascript" src="jquery.min.js"></script><script  type="text/javascript" src="jquery.easyui.min.js"></script><style   type="text/css">
 .panel-body {
   background-color: #ffffff;
   color: #000000;
  font-size: 17px;
   }
  .tabs-title {
   font-size: 15px;
  }
   </style>

 <div class="easyui-tabs" style="width:450px;height:250px">
   <div id="rechner" style="box-shadow: 2px 2px 5px 2px #444444; padding:15px; margin:10px; width:310px; border-radius:15px; font-family: Verdana,Arial,'sans-serif'; font-size: 11px;">
<p style="margin-top:0;padding-top:0;text-align:center;font-size:12px;font-weight:bold">Calculate your BMR in US metrics</p>
    <table>
        <tr><td>Gender:</td><td>

        <input type="radio" name="sex1" value="male" checked>Male<input type="radio" name="sex1" value="female">Female</td></tr>
        <tr><td>Age:</td><td>
        <input type="text" size="5" name="age1" id="age1" value="0" onBlur=checkPositiveInteger(this) onChange=checkPositiveInteger(this)></td></tr>
        <tr><td>Height:</td><td><input type="text" size="5" name="height1" id="height1" value="0" onBlur=checkNotNegative(this) onChange=checkNotNegative(this)> feet <input type="text" size="5" id="height2" value="0"  onBlur=checkNotNegative(this) onChange=checkNotNegative(this)> inches</td></tr>
        <tr><td>Weight:</td><td><input type="text" size="5" name="weight1" id="weight1" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> pounds</td></tr>
        <tr><td colspan="2"><a href="#" class="easyui-linkbutton"  onclick="calculate1()"><button type="button">Calculate</button></a></td></tr>
        <tr><td>Your BMR:</td><td><input type="text" size="10" id="bmr1"> calories/day</td></tr>
    </table>
</div>
<div id="rechner" style="box-shadow: 2px 2px 5px 2px #444444; padding:15px; margin:10px;width:310px;border-radius:15px; font-family:Verdana,Arial,'sans-serif';font-size:11px;background: url(http://www.bmi-rechner.net/images/box_bg.png);">
    <p style="margin-top:0;padding-top:0;text-align:center;font-size:12px;font-weight:bold">Calculate your BMR in EU metrics</p>
    <table>
        <tr><td>Gender:</td><td><input type="radio" name="sex" value="male" checked>Male<input type="radio" name="sex" value="female">Female</td></tr>
        <tr><td>Age:</td><td><input type="text" size="5" name="age" id="age" value="0" onBlur=checkPositiveInteger(this) onChange=checkPositiveInteger(this)></td></tr>
        <tr><td>Height:</td><td><input type="text" size="5" name="height" id="height" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> centimeters</td></tr>
        <tr><td>Weight:</td><td><input type="text" size="5" name="weight" id="weight" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> kilograms</td></tr>
        <tr><td colspan="2"><a href="#" class="easyui-linkbutton" onclick="calculate()"><button type="button">Calculate</button></a></td></tr>
        <tr><td>Your BMR:</td><td><input type="text" size="10" id="bmr"> calories/day</td></tr>
    </table>
</div>
  </div>
  <script>

 function calculate(){

 var age=document.getElementById("age").value;
var height=document.getElementById("height").value;
var weight=document.getElementById("weight").value;

var sex;
var x=document.getElementsByName("sex");
for(var i=0;i<x.length;i++){
    if(x[i].checked==true){
        sex=x[i].value;
        break;
    }
}
var bmr;
if(sex=="female"){
    //bmr=655+(9.6*weight)+(1.7*height)-(4.7*age);
    bmr=10*weight+6.25*height-5*age-161;
    document.getElementById("bmr").value=round(bmr);
}else if(sex=="male"){
    //bmr=66+(13.7*weight)+(5.0*height)-(6.8*age);
    bmr=10*weight+6.25*height-5*age+5;
    document.getElementById("bmr").value=round(bmr);
}else{
    alert("You must select a sex.");
}
}
 function checkPositive(field){
var number=field.value;
if(isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<=0){
    alert("This number must be positive.");
    field.focus();
}else{
 }
 }
function checkPositiveInteger(field){
var number=field.value;
var number1=Math.floor(number);
if(isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<=0){
    alert("This number must be positive.");
    field.focus();
}else if(number-number1!=0){
    alert("This number must be a Integer.");
    field.focus();
}else{
}
}
function checkNotNegative(field){
var number=field.value;
if(isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<0){
    alert("This number must be positive or 0.");
    field.focus();
}else{
 }
 }
 function calculate1(){
var age=document.getElementById("age1").value;
var feet=document.getElementById("height1").value;
var inches=document.getElementById("height2").value;
var weight=document.getElementById("weight1").value;
weight=weight*0.4535924;
var height=30.48*feet+inches*2.54;
var sex;
var x=document.getElementsByName("sex1");
for(var i=0;i<x.length;i++){
    if(x[i].checked==true){
        sex=x[i].value;
        break;
    }
}
var bmr;
if(sex=="female"){
    //bmr=655+(9.6*weight)+(1.7*height)-(4.7*age);
    bmr=10*weight+6.25*height-5*age-161;
    document.getElementById("bmr1").value=round(bmr);
}else if(sex=="male"){
    //bmr=66+(13.7*weight)+(5.0*height)-(6.8*age);
    bmr=10*weight+6.25*height-5*age+5;
    document.getElementById("bmr1").value=round(bmr);
  }else{
    alert("You must select a sex.");
  }
     }
   function round(x){
return Math.round(x*1000)/1000;
     }
      </script></div></body></html>

I need to get the dropdown like below image

enter image description here

Upvotes: 4

Views: 1385

Answers (1)

mautrok
mautrok

Reputation: 961

Ok try this:

<tr><td>Height:</td><td><input type="number" size="5" name="height" id="height" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> centimeters</td></tr>
<tr><td>Weight:</td><td><input type="number" size="5" name="weight" id="weight" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> kilograms</td></tr>

to me this is working in the fiddle.

If there are some problems more, i can save the mods in the fiddle.
UPDATE
I've forked the mod in the fiddle.

UPDATE
i don't know why but i can't save the fiddle anymore so i write here what you have to do at all you if else case

if(number!=""||isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<=0){
    alert("This number must be positive.");
    field.focus();
}else{

you have to count the number!="".
UPDATE
to cancel the onchange or the onblur function you can use the on click on the button "calculate" and call the same function into that, passing to it the same variable.
UPDATE 

function checkPositive(field){
    if (field.value=="")
        return;

write this in all you're methods.
I have try to fork again the fiddle, try if it has take the mods.http://plnkr.co/edit/YS1KQ5BIILXhHdcaVE6G?p=preview


UPDATE

http://plnkr.co/edit/cVK9V88YafVgD4jbqwHd?p=preview


that's the fiddle with the negative number prevented, but i think that this question is now completely answered:)


UPDATE
http://plnkr.co/edit/L4w29rrFMMtCmWaQWKTw?p=preview
this must be work to not make the number not go under 0.

Upvotes: 3

Related Questions