setting values of textfields using jquery

Question

I am trying to create a simple html file containing the monthly salary of employees and must calculate the tax payable for each salary! I use an "add" button to add more employee textfield which creates a new class of div containing the similar div! On onchange event of the salary textfield I can not set the tax value of the appropriate employee!

Unfortunately I can not upload the screenshot so I put all code to make my question as clear as possible!

This is the jquery code for adding employee area:

$(document).ready(function(){

var counter = 2;

$("#add_emp").click(function () {


var newTextBoxDiv = $(document.createElement('div'))
     .attr("class", 'em_area' + counter);

newTextBoxDiv.after().html('<br><label>Employee '+counter+' </label> <input id=em_name name=em_name type=text required  /> <label>Position</label> <input id=em_post name=em_post type=text required  /> <label>Monthly Salary</label> <input id=em_sal name=em_sal size=10 type=text required  /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input id=em_taxds type=text size=10 required />  ' );

newTextBoxDiv.appendTo("#all_emps");


counter++;
 });

 $("#del_emp").click(function () {


counter--;

    $(".em_area" + counter).remove();

 });
 });

This is the html code:

<div id="all_emps">
    <div class="em_area">
        <label>Employee 1</label>
        <input type=text required  />
        <label>Position</label>
        <input type=text required  />
        <label>Monthly Salary</label>
        <input id=em_sal type=text required size=10 onchange="calculateTax(this.value);" />
        &nbsp &nbsp &nbsp 
        <label>Salary Tax</label>
        <input id=em_tax name=em_tax type=text required size=10 readonly />
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="add_emp"><img src="add.jpg" width="30" height="30"></img></a>
        &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="del_emp"><img src="minus.jpg" width="30" height="30"></a>
    </div>  
</div>

This is the tax calculation code in which I have problem:(??????)

function calculateTax(sal)
{
    int salary = parseInt(sal);
    if(salary < 5000)
    {
        document.getElementById("em_tax").value = '0' ;
    }
    else if(salary>5000 || salary=5000)
    {
        var due_tax ;
        due_tax= salary/100;
        due_tax=salary - due_tax;

        document.getElementById("????????").value = due_tax;
    }
}

Your second if-block is completely redundant. If if(salary < 5000) is false, then automatically if(salary>5000 || salary=5000) will always be true. — Flater
– Flater, Commented Oct 22, 2012 at 7:31

Sushanth -- · Accepted Answer · 2012-10-22 07:24:23Z

3

The first thing I observed is that you have duplicate Id's in your HTML.. Make sure the id is unique on the page.. Try Giving them class Names instead..

<input class=em_sal type=text required size=10 onchange="calculateTax(this.value);" />
 &nbsp &nbsp &nbsp 
<label>Salary Tax</label>
<input class=em_tax name=em_tax type=text required size=10 readonly />

Writing Up the change event in JQuery

$('#all_emps').on('change' , '.em_sal', function() { // Fire the change event

    var salary = parseInt(this.value);
    var dueTax = 0;
    if(salary < 5000){  
        // Do Nothing
    }
    else if(salary >= 5000)
    {
        due_tax= salary/100;
        due_tax= salary - due_tax;
    }
    // This will get the corresponding tax input for the employee..
    $(this).closest('div').find('.em_tax').val(due_tax) ;
});

Check FIDDLE

edited Oct 22, 2012 at 7:24

answered Oct 22, 2012 at 6:31

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sayan Over a year ago

Can't have answered it better myself!

deviloper Over a year ago

It seems like there is no change event detected Sushanth! it didnt work and nothing ever really happnes!

Sushanth -- Over a year ago

remove the onchange event from HTML.. Replace the id's of input with class Names and then try

deviloper Over a year ago

I tested the "if(salary < 5000)" with entering a number smaller than 5000 and put an alert if it was smaller than 5000 but still no alert is shown!

deviloper Over a year ago

Sounds like I have to use jquery 1.8.2 to make it work on my computer!Thank you Sushanth!

|

Collectives™ on Stack Overflow

setting values of textfields using jquery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related