HTML and JavaScript form for converting units -
i'm trying make form, using html , javascript , using dropdown list. have searched on , over, found similar problems, coun't resolve answers. so, want form selected via dropdown menu, can "kilometers" , convert them "miles" or "feet", depends on chose. got working temparature form, convertion celsius farenhait, other way around not work , don't know why. here html code:
<body onload="starttime()"> <p>temparature</p> <br /> <form> <input id="c" name="c" onkeyup="preveri()"> <select id="chose1"> <option></option> <option value="c">celzija</option> <option value="f">farenhait</option> </select> <br />equals <br /> <input id="f" name="f" onkeyup="preveri()"> <select id="chose2"> <option></option> <option value="c">celzija</option> <option value="f">farenhait</option> </select> </form> <br /> <p>lenght</p> <form> <input id="k" name="k" onkeyup="preveri1()"> <select id="chose2"> <option></option> <option value="k">kilometer</option> <option value="m">miles</option> </select> <br />equals <br /> <input id="m" name="m" onkeyup="preveri1()"> <select id="chose2"> <option></option> <option value="k">kilometer</option> <option value="m">miles</option> </select> </form> <option value="k">kilometer</option> <option value="m">miles</option> <div id="txt"></div> </body> and here javascript code:
function preveri(neke) { neke=document.getelementbyid("chose1").value; if(neke=="c") { fahr=document.getelementbyid("c").value * 9 / 5 + 32; document.getelementbyid("f").value=math.round(fahr); }else { cels=(document.getelementbyid("f").value -32) * 5 / 9; document.getelementbyid("c").value=math.round(cels); } } function preveri1(neke1) { neke1=document.getelementbyid("chose2").value; if(neke1=="k") { kilo=document.getelementbyid("k").value * 0.621371; document.getelementbyid("m").value=math.round(kilo); }else { mile=(document.getelementbyid("m").value) / 0.621371; document.getelementbyid("k").value=math.round(mile); } } function starttime() { var today=new date(); var h=today.gethours(); var m=today.getminutes(); var s=today.getseconds(); // doda 0 pred števila<10 m=checktime(m); s=checktime(s); document.getelementbyid('txt').innerhtml=h+":"+m+":"+s; t=settimeout('starttime()',500); } function checktime(i) { if (i<10) { i="0" + i; } return i; } something wrong, don't know what, if kind enough me, i'm beginger in javascript.
i've updated code , 2 text-fields , lots of different units choose in drop-down boxes. there different options depending on #chose1 drop-down box value. i've added input validation, number required in text-box. anyway, here's new code:
html
<h1>what want convert?</h1> <input id="c" name="c" onkeyup="preveri()" onkeydown="validate(event)"> <!-- new function make sure user enters number --> <select id="chose1" > <option></option> <option value="c">celsius</option> <option value="f">farenhait</option> <option value="km">kilometers</option> </select><br /> equals<br /> <input id="f" name="f" disabled> <select id="chose2"> <option></option> </select> <div id="txt"></div> javascript
$( "#chose1" ).change(function(){ // when value of #chose1 changes var choseval = $("#chose1").val(); // value of #chose1 if(choseval == "c"){ changeoption("#chose2", ["farenhait", "kelvin"], ["f1", "k1"]); // new custom function, changeoption(element, options [must list], values [must list] } if(choseval == "f"){ changeoption("#chose2", ["celsius", "kelvin"], ["c2", "k2"]); } if(choseval == "km"){ changeoption("#chose2", ["miles", "feet"], ["m1", "fe1"]); } }); function changeoption(element, options, values){ $(element).empty(); //clear options var = 0; while(i<options.length){ //moves selected term in list $(element).append($("<option>").val(values[i]).html(options[i])); // add our option , values i++; // move onto next list item }} function preveri() { var convert=document.getelementbyid("chose2").value; // want convert to? works because there's 1 possible value each unit of measurement if(convert=="f1"){ // farenhait celsius cels=number(document.getelementbyid("c").value *1.8) + 32; document.getelementbyid("f").value=math.round(cels); } if(convert=="k1"){ // kelvin celsius cels=number(document.getelementbyid("c").value) + 273.15; document.getelementbyid("f").value=math.round(cels); } if(convert=="c2"){ // celsius farenhait cels=number(document.getelementbyid("c").value - 32) * (5/9); document.getelementbyid("f").value=math.round(cels); } if(convert=="k2"){ // kelvin farenhait cels=number(document.getelementbyid("c").value - 32) * (5/9) + 273.15; document.getelementbyid("f").value=math.round(cels); } if(convert=="m1"){ // miles kilometer cels=number(document.getelementbyid("c").value) * 0.62137; document.getelementbyid("f").value=math.round(cels); } if(convert=="fe1"){ // feet kilometer cels=number(document.getelementbyid("c").value) * 3280.8399; document.getelementbyid("f").value=math.round(cels); } } function validate(e){ // our validate function x = e.keycode; if((x<60&&x>47)||x==8||(x<106&&x>95)||x==110||x==190||x==16||x==17||x==18){ // ignore numbers , other important keys, such shift , control return; } else{window.settimeout("remove()",1);} // trigger remove } function remove(){ // remove invalid character y = document.getelementsbyname("c")[0]; q = y.value; q = q.slice(0, - 1); // remove end character value y.value = q; } function checktime(i) { if (i<10) { i="0" + i; } return i; } function starttime(){ var today=new date(); var h=today.gethours(); var m=today.getminutes(); var s=today.getseconds(); // doda 0 pred števila<10 m=checktime(m); s=checktime(s); document.getelementbyid('txt').innerhtml=h+":"+m+":"+s; t=settimeout('starttime()',500); } $("docuemnt").ready(function(){ // i've moved starttime function couldn't work in jsfiddle being in onload body tag attribute starttime(); }); css - style disabled text-box:
#f{ -webkit-appearance: textfield; background-color: white; border: 2px inset; color: black; } i've used jquery, you'll have import it, here's html - it's important import before script otherwise jquery functions won't work:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> here's jsfiddle: http://jsfiddle.net/hzfyl/2/
if need more help, don't hesitate leave comment
Comments
Post a Comment