Получить значение текстового поля с помощью JQuery

Question

У меня есть следующий сценарий:

<script> 
    $(document).ready(function(){ 


    $('#edit').click(function(){ 


     //get 
     employee_id = $('#employee_id').val(); 
     alert(employee_id); 
     html=''; 

     $.ajax({ 
      type:"GET", 
      url:"<?php echo base_url();?>administrator/admin/get_employee_details/"+employee_id, 
      dataType:"json", 
      success:function(response){ 
       console.log(response); 
       $('#fname').val(response[0].f_name); 
       alert(response[0].amount); 
       $('#sname').val(response[0].l_name); 
       $('#lname').val(response[0].other_name); 
       $('#expiry_date').val(response[0].id_no); 
       $('#quantity_available').val(response[0].dob) 
       $('#gender').val(response[0].gender); 
       $('#maritalstatus').val(response[0].marital_status) 
       $('#sex').val(response[0].gender); 

      }, 
      error:function(data){ 

      } 
     }) 

    }); 


    }); 
    </script> 

Сценарий предполагается выбрать значение EMPLOYEE_ID из приведенных ниже таблиц:

<tbody> 
     <?php foreach($employee_details as $employee):?> 
     <tr class="odd gradeX"> 
      <td><?php echo $employee['employee_name'];?></td> 
         <td ><?php echo $employee['id_no'];?></td> 
      <td><?php echo $employee['dob'];?></td> 
      <td><?php echo $employee['gender'];?></td> 
      <td ><?php echo $employee['marital_status'];?></td> 
         <td><?php echo $employee['phone_no'];?></td> 
      <td><?php echo $employee['email'];?></td> 
      <td ><?php echo $employee['date_added'];?></td> 
         <td><?php echo $employee['residence'];?></td> 
      <td ><?php echo $employee['next_of_kin_name'];?></td> 
         <td><?php echo $employee['next_of_kin_relation'];?></td> 
      <td><?php echo $employee['next_of_kin_phone_no'];?></td> 
      <td ><?php echo $employee['is_active'];?></td> 
         <td><?php echo $employee['department_name'];?></td> 
      <td><?php echo $employee['employee_class'];?></td> 
      <td> <a class="edit" href="#edit_details" id="edit">Edit </a></td> 
         <td> <a class="delete" href="#delete_details" id="delete" > Delete Employee</a></td> 
         <input type="text" name="employee_id" id="employee_id" value="<?php echo $employee['employee_id'];?>"/> 


     </tr> 
       <?php endforeach;?> 
    </tbody> 

который является скрытым текстовым полем (employee_id) в таблице, когда я нажимаю кнопку «Изменить». Но когда я нажимаю ссылку, я получаю пустой результат без employee_id, но я могу видеть идентификатор сотрудника в текстовом поле. Как я могу получить идентификатор сотрудника из текстового поля для каждой конкретной строки?

Answer 1

Id элемента должен уникальным, поэтому внутри использование цикла класс вместо идентификатора, а также переместить EMPLOYEE_ID поле в td элемент

<td> 
    <a class="edit" href="#edit_details">Edit </a> 
</td> 
<td> 
    <a class="delete" href="#delete_details" > Delete Employee</a> 
    <input type="text" name="employee_id" value="<?php echo $employee['employee_id'];?>" /> 
</td> 

затем

$(document).ready(function() { 


    $('.edit').click(function() { 


     //get 
     var employee_id = $(this).closest('tr').find('input[name="employee_id"]').val(); 
     alert(employee_id); 
     html = ''; 

     $.ajax({ 
      type: "GET", 
      url: "<?php echo base_url();?>administrator/admin/get_employee_details/" + employee_id, 
      dataType: "json", 
      success: function (response) { 
       console.log(response); 
       $('#fname').val(response[0].f_name); 
       alert(response[0].amount); 
       $('#sname').val(response[0].l_name); 
       $('#lname').val(response[0].other_name); 
       $('#expiry_date').val(response[0].id_no); 
       $('#quantity_available').val(response[0].dob) 
       $('#gender').val(response[0].gender); 
       $('#maritalstatus').val(response[0].marital_status) 
       $('#sex').val(response[0].gender); 

      }, 
      error: function (data) { 

      } 
     }) 

    }); 


}); 

Answer 2

Атрибут id должен быть уникальным на вашей веб-странице. Вы не можете иметь 2 элемента с одинаковыми id.

Итак, для ваших ссылок и ваших входов вы должны генерировать разные идентификаторы для каждой строки. Например, вы можете попробовать id="employee_id-<?php echo $employee['employee_id'];?>". Но вы можете хранить одни и те же классы для каждой ссылки и ввода и использовать его в своем коде сценария javascript.

Тогда вы должны изменить код:

$('.edit').click(function() { 
    var employee_id = this.closest('tr').find('.employee_id').val(); 
}); 

Answer 3

Use class attribute instead of id because id cant be repeated. 

<input type="text" name="employee_id" class="employee_id" value="<?php echo $employee['employee_id'];?>"/> 


$('.edit').click(function() { 
    var id = this.closest('tr').find('input.employee_id').val(); 
}); 

В Идентификаторе вы сможете получить идентификатор сотрудника