réglage des valeurs d'entrée en utilisant jquery

Question

J'essaie de créer un fichier html simple contenant le salaire mensuel des employés et doit calculer l'impôt à payer pour chaque salaire! J'utilise un bouton "ajouter" pour ajouter plus de champ de texte employé qui crée une nouvelle classe de div contenant le div similaire! Sur l'événement onchange du champ de texte salaire, je ne peux pas définir la valeur fiscale de l'employé approprié!

Malheureusement, je ne peux pas télécharger la capture d'écran, donc j'ai mis tout le code pour rendre ma question aussi claire que possible!

Voici le code html:

<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 class=em_sal type=text required size=10 /> 
     &nbsp &nbsp &nbsp 
     <label>Salary Tax</label> 
     <input class=em_tax type=text required size=10 readonly /> 
     &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
     <a href="#" id="add_emp">Add</a> 
     &nbsp &nbsp &nbsp &nbsp &nbsp 
     <a href="#" id="del_emp">Remove</a> 
    </div> 
</div> 

Et voici le code jquery:

$(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 class=em_sal name=em_sal size=10 type=text required /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required /> '); 
newTextBoxDiv.appendTo("#all_emps"); 
counter++; 
}); 

$("#del_emp").click(function() { 
if(counter==2) 
{ 
    alert("Can not remove the only employee!"); 
} 
else{ 
    counter--; 
    $(".em_area" + counter).remove(); 
} 
}); 
    $('#em_area').on('change' , '.em_sal', function() { // Fire the change event 

var salary = parseInt(this.value); 
var dueTax = 0; 
if(salary < 5000){ 
    alert('Salary less than 5000!!'); 
} 
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) ; 
}); 
}); 

Answer 1

Refonte un peu. Vous avez maintenant un all_emps div et un div par employé, avec id="em<counter>"

JsFiddle

partie html:

<div id="all_emps"> 
    <div id="em1"> 
     <label>Employee 1</label> 
     <input type=text required /> 
     <label>Position</label> 
     <input type=text required /> 
     <label>Monthly Salary</label> 
     <input class=em_sal type=text required size=10 /> 
     &nbsp &nbsp &nbsp 
     <label>Salary Tax</label> 
     <input class=em_tax type=text required size=10 readonly /> 
     &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 

    </div> 
    <a href="#" id="add_emp">Add</a> 
     &nbsp &nbsp &nbsp &nbsp &nbsp 
    <a href="#" id="del_emp">Remove</a>  
</div>​​​​​​ 

js partie

$(document).ready(function() { 
    var counter = 2; 
    $("#add_emp").click(function() { 
     var newTextBoxDiv = $(document.createElement('div')); 
     newTextBoxDiv.attr("id", 'em' + counter); 

     newTextBoxDiv.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 class=em_sal name=em_sal size=10 type=text required /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required /> '); 

     $("#all_emps div").last().after(newTextBoxDiv); 
     counter++; 
    }); 

    $("#del_emp").click(function() { 
     if (counter == 2) { 
      alert("Can not remove the only employee!"); 
     } else { 
      counter--; 
      $("#em" + counter).remove(); 
     } 
    }); 
    $('#all_emps').on('change', '.em_sal', function() { // Fire the change event 
     var salary = parseInt(this.value); 
     var due_tax= 0; 
     if (salary < 5000) { 
      alert('Salary less than 5000!!'); 
     } else{ 
      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); 
    }); 
});