javascript - Passing the value of button to textbox and update the status. (Codeigniter)

Question

How can I pass the value of my "ACTIVE" status attribute to my textbox? My goal is to update the status of my user by pressing ACTIVE button. Knowing that the user status is pending. I can easily pass the userID, but I'm having a problem in regards of passing the status.

I have provided screenshot below.

Views:

<button data-id="<?php echo $rows->transID?>"  ustatus="Active" class="showmodal" class="fundTable btn btn-success btn-sm text-bold user_status">
   <?php echo $rows->transID?> active
</button>  // I can pass the ID to my textbox easily, but the status is not working.

<div id="fundModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="#">
          <div class="form-group">
            <label for="">UserID</label>
            <input type="text" id="usertransferid">
          </div>
          <div class="form-group">
            <label for="">status</label>
            <input type="text" name="status" id="user_status" value="">
          </div>
        </form>
      </div>
   
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Script:

<script>

$('.showmodal').on('click', function(e){
    e.preventDefault();
  
  $('#usertransferid').val(this.dataset.id);
  $('#fundModal').modal('show')
})


$('#fundModal').on('hidden.bs.modal', function () {
  $('#usertransferid').val('')
  $('#ustatus').val('')
})
    </script>
    
<script type="text/javascript">
    $(document).on('click','.user_status',function(){

     
        var status = $(this).attr('ustatus');
        //get attribute value in variable

    
        $('#user_status').val(status);  //I tried passing the user status but it's not working

    

    }); 
</script>

Controller:

public function user_status_changed()
{
    //get hidden values in variables
    $id = $this->input->post('id');
    $status = $this->input->post('status');

        


    $data = array('status' => $status );

    
    $this->db->update('users', $data); //Update status here

    //Create success message
    $this->session->set_flashdata('msg',"User status has been changed successfully.");
    $this->session->set_flashdata('msg_class','alert-success');

    return redirect('welcome/users');
}

Answer 1

You don't get the status updated, because you getting undefined with $(this).attr('ustatus');

That's because $(this) points to the class user_status, which doesn't have an attribute ustatus

What you want is the value of the attribute ustatus of your button, which has a class showmodal, so you need to change your code to:

$(document).on('click','.user_status',function(){
    var status = $('.showmodal').attr('ustatus');   // check the change here
    $('#user_status').val(status); 
});

P.S: in your button definition, you are using class="..." twice, which is faulty. Just do:

<button data-id="<?php echo $rows->transID?>"  ustatus="Active" class="showmodal fundTable btn btn-success btn-sm text-bold user_status">
   <?php echo $rows->transID?> active
</button>