Menu
Community /Pin to ProfileBookmark
Have you made a start already? Might be worth coding up a basic html version with the general layout. Uploading would also be beneficial so we can help debug.
I'd also recommend jQuery, although still new to it myself, I'd still recommend it as it'll be quicker and easier.
On a very basic level, I'd expect you'll be mainly using two commands:
and
i already design the html form.. ?
here's the link..http://www.4shared.com/document/4u4HbbIk/kpiform.html
and here's the html sourcecode..
i have no experience about jQuery..kindly anybody plz help me to solve my problem..?
Okay, start by downloading jquery from the website and including it into your page. Then create a new javascript file and include that also. It's important that the jquery javascript is included before your own file.
Here's what I come up with for the first block, just add it into your own javascript file:
Now this code is quite basic but I'm hoping you'll be able to take it with you and mould it to do what you're wanting.
I hope this helps.
here the html code..
and here the javascript code..
the problem is, #newsalary text field cannot display two decimal places. Example, 100.0000.. i want it to be 100.00 only..
plz guide..
This should set the value to 2 decimal places.
Hope this helpstq nyx.. it's works!
1 more things, i need to do some jQuery validation also..for example, every marks is between 1-10 only..could you plz guide me how to do that..?
Need Help for Create Key Performance Index form
Hello everybody..
I am developing a project. to calculate a key performance index (KPI) using javascript and HTML. the calculation should be in client side, and it calculate automatic after user input the value.
i am very new with javascript, and i need help from all frens here.. ?
[URL=http://img828.imageshack.us/i/kpi.png/]
[IMG]http://img828.imageshack.us/img828/6047/kpi.th.png
Uploaded with [URL=http://imageshack.us]ImageShack.us
[img]
anybody plz help me.. ?
Sign in
to post a comment7 Comments(s) ↴
0
@nyxSep 25.2010 — #Doesn't look like it should be that difficult (in theory) ?Have you made a start already? Might be worth coding up a basic html version with the general layout. Uploading would also be beneficial so we can help debug.
I'd also recommend jQuery, although still new to it myself, I'd still recommend it as it'll be quicker and easier.
On a very basic level, I'd expect you'll be mainly using two commands:
[CODE]//basically performs a function while typing into an input field
$('#input1').keyup();[/CODE]and
[CODE]//Updates the html within an HTML element
$('#dev1').html('<p>new content</p>');[/CODE]reply?
0
@skyline2authorSep 27.2010 — #hi nyx..thanks for the reply.. i already design the html form.. ?
here's the link..
and here's the html sourcecode..
[code=html]
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"> <form name="form1" method="post" action="">
<table width="600" border="0" cellspacing="1" cellpadding="1">
<tr>
<td>Catagory A</td>
<td>Marks</td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item1" type="text" id="item1" size="5"></td>
</tr>
<tr>
<td>item 2</td>
<td><input name="item2" type="text" id="item2" size="5"></td>
</tr>
<tr>
<td>item 3</td>
<td><input name="item3" type="text" id="item3" size="5"></td>
</tr>
<tr>
<td>item 4</td>
<td><input name="item4" type="text" id="item4" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totala" type="text" id="totala" size="5"></td>
</tr>
<tr>
<td>percent (total / 40 x 30% )</td>
<td><input name="percenta" type="text" id="percenta" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Catagory B</td>
<td> </td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item5" type="text" id="item8" size="5"></td>
</tr>
<tr>
<td>item 2</td>
<td><input name="item6" type="text" id="item7" size="5"></td>
</tr>
<tr>
<td>item 3</td>
<td><input name="item7" type="text" id="item6" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totalb" type="text" id="totalb" size="5"></td>
</tr>
<tr>
<td>percent (total / 30 x 30% )</td>
<td><input name="percentb" type="text" id="percentb" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Catagory C</td>
<td> </td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item8" type="text" id="item6" size="5"></td>
</tr>
<tr>
<td>item 2</td>
<td><input name="item9" type="text" id="item5" size="5"></td>
</tr>
<tr>
<td>item 3</td>
<td><input name="item10" type="text" id="item6" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totalc" type="text" id="totalc" size="5"></td>
</tr>
<tr>
<td>percent (total / 30 x 30% )</td>
<td><input name="percentc" type="text" id="percentc" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Catagory D</td>
<td> </td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item11" type="text" id="item11" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totald" type="text" id="totald" size="5"></td>
</tr>
<tr>
<td>percent (total / 30 x 30% )</td>
<td><input name="percentd" type="text" id="percentd" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>total (100%)</td>
<td><input name="totalpercent" type="text" id="totalpercent" size="5">
%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table width="399" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="89">Basic Salary</td>
<td width="63"> </td>
<td width="93"> </td>
<td width="58"> </td>
<td width="146"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Grade</td>
<td>Marks</td>
<td>Salary Incement (%)</td>
<td>Incement</td>
<td>New Salary</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>A</td>
<td><label>
<input type="radio" name="mark" value="10" id="mark_0">
90-100</label></td>
<td>10</td>
<td><input name="inc10" type="text" id="inc10" size="5"></td>
<td><input name="newsal1" type="text" id="newsal1" size="7"></td>
</tr>
<tr>
<td>B</td>
<td><label>
<input type="radio" name="mark" value="9" id="mark_1">
85-89</label></td>
<td>9</td>
<td><input name="inc9" type="text" id="inc9" size="5"></td>
<td><input name="newsal2" type="text" id="newsal2" size="7"></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="radio" name="mark" value="8" id="mark_2">
80-84</label></td>
<td>8</td>
<td><input name="inc8" type="text" id="inc8" size="5"></td>
<td><input name="newsal3" type="text" id="newsal3" size="7"></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="radio" name="mark" value="7" id="mark_3">
75-79</label></td>
<td>7</td>
<td><input name="inc7" type="text" id="inc7" size="5"></td>
<td><input name="newsal4" type="text" id="newsal4" size="7"></td>
</tr>
<tr>
<td>C</td>
<td><label>
<input type="radio" name="mark" value="6" id="mark_4">
70-74</label></td>
<td>6</td>
<td><input name="inc6" type="text" id="inc6" size="5"></td>
<td><input name="newsal5" type="text" id="newsal5" size="7"></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="radio" name="mark" value="5" id="mark_5">
65-69</label></td>
<td>5</td>
<td><input name="inc5" type="text" id="inc5" size="5"></td>
<td><input name="newsal6" type="text" id="newsal6" size="7"></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="radio" name="mark" value="4" id="mark_6">
60-64</label></td>
<td>4</td>
<td><input name="inc4" type="text" id="inc4" size="5"></td>
<td><input name="newsal7" type="text" id="newsal7" size="7"></td>
</tr>
<tr>
<td>D</td>
<td><label>
<input type="radio" name="mark" value="3" id="mark_7">
55-59</label></td>
<td>3</td>
<td><input name="inc3" type="text" id="inc3" size="5"></td>
<td><input name="newsal8" type="text" id="newsal8" size="7"></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="radio" name="mark" value="2" id="mark_8">
50-54</label></td>
<td>2</td>
<td><input name="inc2" type="text" id="inc2" size="5"></td>
<td><input name="newsal9" type="text" id="newsal9" size="7"></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="radio" name="mark" value="1" id="mark_9">
45-49</label></td>
<td>1</td>
<td><input name="inc1" type="text" id="inc1" size="5"></td>
<td><input name="newsal10" type="text" id="newsal10" size="7"></td>
</tr>
<tr>
<td>E</td>
<td><label>
<input type="radio" name="mark" value="0" id="mark_10">
0-44</label></td>
<td>0</td>
<td><input name="inc0" type="text" id="inc0" size="5"></td>
<td><input name="newsal11" type="text" id="newsal11" size="7"></td>
</tr>
</table>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
<p> </p>
</form>
<p> </p>
<p> </p></td>
</tr>
</table>[/code][/QUOTE]i have no experience about jQuery..kindly anybody plz help me to solve my problem..?
reply?
0
@nyxSep 27.2010 — #I'll give you a push in the right direction ?Okay, start by downloading jquery from the website and including it into your page. Then create a new javascript file and include that also. It's important that the jquery javascript is included before your own file.
Here's what I come up with for the first block, just add it into your own javascript file:
[CODE]
//Run the code on page load
$(function(){
// Adds listeners to the 4 input fields, UpdateBlock1 is the
// function to be called on the action
$('#item1').keyup(UpdateBlock1);
$('#item2').keyup(UpdateBlock1);
$('#item3').keyup(UpdateBlock1);
$('#item4').keyup(UpdateBlock1);
function UpdateBlock1()
{
// Defines the values as 0
var val1 = 0;
var val2 = 0;
var val3 = 0;
var val4 = 0;
// If the textfields aren't empty, then parse the values as floats
// and assign them to the variables defined above
if ($('#item1').val() != '') {
val1 = parseFloat($('#item1').val());
}
if ($('#item2').val() != '') {
val2 = parseFloat($('#item2').val());
}
if ($('#item3').val() != '') {
val3 = parseFloat($('#item3').val());
}
if ($('#item4').val() != '') {
val4 = parseFloat($('#item4').val());
}
// Update the totala field to be the sum of the four values
$('#totala').val(val1+val2+val3+val4);
}
});
[/CODE]Now this code is quite basic but I'm hoping you'll be able to take it with you and mould it to do what you're wanting.
I hope this helps.
reply?
0
@skyline2authorSep 28.2010 — #thanks bro ? i will update to here if i got any problem.. ? plz assist..reply?
0
@skyline2authorSep 29.2010 — #hello.. i just done my code..here the html code..
[code=html]
<script type="text/javascript" src="_jsscript/jquery-1.4.2.js"></script>
<script type="text/javascript" src="_jsscript/block.js"></script>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"> <form action="" method="post" name="form1">
<table width="600" border="0" cellspacing="1" cellpadding="1">
<tr>
<td>Catagory A</td>
<td>Marks</td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item1" type="text" id="item1" size="5"></td>
</tr>
<tr>
<td>item 2</td>
<td><input name="item2" type="text" id="item2" size="5"></td>
</tr>
<tr>
<td>item 3</td>
<td><input name="item3" type="text" id="item3" size="5"></td>
</tr>
<tr>
<td>item 4</td>
<td><input name="item4" type="text" id="item4" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totala" type="text" id="totala" size="5"></td>
</tr>
<tr>
<td>percent (total / 40 x 30% )</td>
<td><input name="percenta" type="text" id="percenta" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Catagory B</td>
<td> </td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item5" type="text" id="item5" size="5"></td>
</tr>
<tr>
<td>item 2</td>
<td><input name="item6" type="text" id="item6" size="5"></td>
</tr>
<tr>
<td>item 3</td>
<td><input name="item7" type="text" id="item7" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totalb" type="text" id="totalb" size="5"></td>
</tr>
<tr>
<td>percent (total / 30 x 30% )</td>
<td><input name="percentb" type="text" id="percentb" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Catagory C</td>
<td> </td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item8" type="text" id="item8" size="5"></td>
</tr>
<tr>
<td>item 2</td>
<td><input name="item9" type="text" id="item9" size="5"></td>
</tr>
<tr>
<td>item 3</td>
<td><input name="item10" type="text" id="item10" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totalc" type="text" id="totalc" size="5"></td>
</tr>
<tr>
<td>percent (total / 30 x 30% )</td>
<td><input name="percentc" type="text" id="percentc" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Catagory D</td>
<td> </td>
</tr>
<tr>
<td>item 1</td>
<td><input name="item11" type="text" id="item11" size="5"></td>
</tr>
<tr>
<td>total</td>
<td><input name="totald" type="text" id="totald" size="5"></td>
</tr>
<tr>
<td>percent (total / 30 x 30% )</td>
<td><input name="percentd" type="text" id="percentd" size="5">
of 30%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>total (100%)</td>
<td><input name="totalpercent" type="text" id="totalpercent" size="5">
%</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table width="399" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="89">Basic Salary</td>
<td width="63"><input name="basicsalary" type="text" id="basicsalary" size="10" /></td>
<td width="93"> </td>
<td width="58"><input name="incre" type="text" id="incre" size="5" /></td>
<td width="146"><input name="newsalary" type="text" id="newsalary" size="10" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
<p>
<input type="submit" name="button" id="button" value="Submit">
<input type="reset" name="button2" id="button2" value="Reset" />
</p>
<p> </p>
</form>
</td>
</tr>
</table>
[/code][/QUOTE]and here the javascript code..
[code=html]//Run the code on page load
$(function(){
// Adds listeners to the 4 input fields, UpdateBlock1 is the
// function to be called on the action
$('#item1').keyup(UpdateBlock1);
$('#item2').keyup(UpdateBlock1);
$('#item3').keyup(UpdateBlock1);
$('#item4').keyup(UpdateBlock1);
$('#item5').keyup(UpdateBlock1);
$('#item6').keyup(UpdateBlock1);
$('#item7').keyup(UpdateBlock1);
$('#item8').keyup(UpdateBlock1);
$('#item9').keyup(UpdateBlock1);
$('#item10').keyup(UpdateBlock1);
$('#item11').keyup(UpdateBlock1);
$('#basicsalary').keyup(UpdateBlock1);
$('#incre').keyup(UpdateBlock1);
$('#newsalary').keyup(UpdateBlock1);
function UpdateBlock1()
{
// Defines the values as 0
var val1 = 0;
var val2 = 0;
var val3 = 0;
var val4 = 0;
var val5 = 0;
var val6 = 0;
var val7 = 0;
var val8 = 0;
var val9 = 0;
var val10 = 0;
var val11 = 0;
var val12 = 0;
var val13 = 0;
// If the textfields aren't empty, then parse the values as floats
// and assign them to the variables defined above
if ($('#item1').val() != '') {
val1 = parseFloat($('#item1').val());
}
if ($('#item1').val() <0 || $('#item1').val() >10) {
alert('tidak boleh lebih 10');
form1.item1.focus();
}
if ($('#item2').val() != '') {
val2 = parseFloat($('#item2').val());
}
if ($('#item3').val() != '') {
val3 = parseFloat($('#item3').val());
}
if ($('#item4').val() != '') {
val4 = parseFloat($('#item4').val());
}
// 2nd block
// and assign them to the variables defined above
if ($('#item5').val() != '') {
val5 = parseFloat($('#item5').val());
}
if ($('#item6').val() != '') {
val6 = parseFloat($('#item6').val());
}
if ($('#item7').val() != '') {
val7 = parseFloat($('#item7').val());
}
// 3rd block
// and assign them to the variables defined above
if ($('#item8').val() != '') {
val8 = parseFloat($('#item8').val());
}
if ($('#item9').val() != '') {
val9 = parseFloat($('#item9').val());
}
if ($('#item10').val() != '') {
val10 = parseFloat($('#item10').val());
}
// 4th block
// and assign them to the variables defined above
if ($('#item11').val() != '') {
val11 = parseFloat($('#item11').val());
}
// 4th block
// and assign them to the variables defined above
if ($('#basicsalary').val() != '') {
val12 = parseFloat($('#basicsalary').val());
}
// Update the totala field to be the sum of the four values
$('#totala').val(val1+val2+val3+val4);
$('#percenta').val((val1+val2+val3+val4)/40*30);
// Update the totalb field to be the sum of the four values
$('#totalb').val(val5+val6+val7);
$('#percentb').val((val5+val6+val7)/30*30);
// Update the totalc field to be the sum of the four values
$('#totalc').val(val8+val9+val10);
$('#percentc').val((val8+val9+val10)/30*30);
// Update the totald field to be the sum of the four values
$('#totald').val(val11);
$('#percentd').val(val11);
// Update the totald field to be the sum of the four values
// $('#totalpercent').val(val11);
$('#totalpercent').val(((val1+val2+val3+val4)*0.75)+(val5+val6+val7+val8+val9+val10+val11));
//calculate the salary increment base on basic salary and marks condition
if ($('#totalpercent').val() <101 || $('#item1').val() >89) {
$('#incre').val(val12*0.1);
$('#newsalary').val(val12*1.1);
}
if ($('#totalpercent').val() <90 || $('#item1').val() >84) {
$('#incre').val(val12*0.09);
$('#newsalary').val(val12*1.09);
}
if ($('#totalpercent').val() <85 || $('#item1').val() >79) {
$('#incre').val(val12*0.08);
$('#newsalary').val(val12*1.08);
}
if ($('#totalpercent').val() <80 || $('#item1').val() >74) {
$('#incre').val(val12*0.07);
$('#newsalary').val(val12*1.07);
}
if ($('#totalpercent').val() <75 || $('#item1').val() >69) {
$('#incre').val(val12*0.06);
$('#newsalary').val(val12*1.06);
}
if ($('#totalpercent').val() <70 || $('#item1').val() >64) {
$('#incre').val(val12*0.05);
$('#newsalary').val(val12*1.05);
}
if ($('#totalpercent').val() <65 || $('#item1').val() >59) {
$('#incre').val(val12*0.04);
$('#newsalary').val(val12*1.04);
}
if ($('#totalpercent').val() <60 || $('#item1').val() >54) {
$('#incre').val(val12*0.03);
$('#newsalary').val(val12*1.03);
}
if ($('#totalpercent').val() <55 || $('#item1').val() >49) {
$('#incre').val(val12*0.02);
$('#newsalary').val(val12*1.02);
}
if ($('#totalpercent').val() <50 || $('#item1').val() >44) {
$('#incre').val(val12*0.01);
$('#newsalary').val(val12*1.01);
}
if ($('#totalpercent').val() <45) {
$('#incre').val('no increment');
$('#newsalary').val(val12);
}
}
});[/code][/QUOTE]the problem is, #newsalary text field cannot display two decimal places. Example, 100.0000.. i want it to be 100.00 only..
plz guide..
reply?
0
@nyxSep 29.2010 — #You can use the 'toFixed' statement to format a value to a set number of places:[CODE]$('#newsalary').val((val12*1.01).toFixed(2));[/CODE]This should set the value to 2 decimal places.
Hope this helps
reply?
0
@skyline2authorSep 30.2010 — #1 more things, i need to do some jQuery validation also..for example, every marks is between 1-10 only..could you plz guide me how to do that..?
reply?