How to get attribut value id_user use post Jquery

Question

I want to get the id_user data based on the desired row table using onclick jquery, so the already obtained id_user data can be passed to the controller and direct the page to edit_user.

How do I get the id_user data with onclick using the jquery function? I tried it but what I got 'undefined'.

Sorry for my bad English.

This is my function

function edit(){
    var id_user = $(this).attr("id_user");
    alert(id_user);


    $.ajax({
        type:"POST",
        url : "<?php echo BASE_URL ?>app.php/usermanagement/edit_user",
        data :{id_user:id_user},
        success:function(data){
            alert(data)
            console.log(data)
        },
        error:function(err){
            alert(err)
        }
    });
}

This my a tag

  <a onclick="edit()" id_user="<? echo $row ['idx']; ?>" href="#" >Edit</a>

This is my code for edit_user form

<form method="POST">
<fieldset>
    <legend> Edit User Management </legend>
    <table border="0" width="700" id="usermanagement">
    <tbody>
        <tr>
            <td width="160"><strong>Company</strong></td>
            <td width="10">:</td>
            <td width="193" colspan="2" class="company"><span class ="id_company"><?php echo Session::get('pyrCode'); ?></span> <?php echo $data_from_ctr['account']['desc']['desc'];?></td>
        </tr>
        <tr class="odd">
            <td width="150"><strong>Username</strong></td>
            <td width="10">:</td>
            <td colspan="2">
            <input type="text" name="username" id="username" value="<?php echo $data_from_ctr['user']['_user']; ?>" />
            <input type="hidden" name="existing_username" value="<?php echo $data_from_ctr['user']['_user']; ?>"/>
            </td>
        </tr>
        <tr>
            <td width="150"><strong>Email</strong></td>
            <td width="10">:</td>
            <td colspan="2">
                <input type="text" name="email" id="email" value="<?php echo $data_from_ctr['user']['email']; ?>" />
            </td>
        </tr>
        <tr class="odd">
            <td width="150"><strong>Status User</strong></td>
            <td width="10">:</td>
            <td colspan="2">
            <input type="radio" name="status_active" value="1" <?php if ($data_from_ctr['user']['active'] == 1) { ?>  checked="" <? } ?> id="aktif"/>
                    &nbsp;Active
            <input type="radio" name="status_active" value="0" <?php if ($data_from_ctr['user']['active'] == 0) {  ?> checked="" <? } ?> id="nonaktif" />
                    &nbsp;Non Active
            </td>
        </tr>
        <!--<tr class="odd">
            <td width="150"><strong>Status User</strong></td>
            <td width="10">:</td>
            <td colspan="2">
           <input type="radio" name="status_active" value="<?php //echo $data_from_ctr['user']['active']; ?>"  checked="" id="aktif"/>
                    &nbsp;Active
            <input type="radio" name="status_active" value="<?php //echo $data_from_ctr['user']['active'];?>" id="nonaktif" />
                    &nbsp;Non Active
            </td>
            </tr>-->
        <tr>
            <td width="150"><strong>Name</strong></td>
            <td width="10">:</td>
            <td colspan="2">
                <input type="text" name="name" id="name" value="<?php echo $data_from_ctr['user']['_fullName']; ?>" />
            </td>
        </tr>
        <tr class="odd">
            <td width="150"><strong>Phone Number</strong></td>
            <td width="10">:</td>
            <td colspan="2">
                <input type="text" name="phone" id="phone" value="<?php echo $data_from_ctr['user']['_noHP']; ?>" />
            </td>
        </tr>
          <tr>
            <td width="150"><strong>Access Control</strong></td>
            <td width="10">:</td>
            <td colspan="2">
            <select id="access" name="access">
                <option <?php if ($data_from_ctr['user']['group_user'] == 'user'){ ?> selected="" <? } ?> value="user">User </option>
                <option <?php if ($data_from_ctr['user']['group_user'] == 'admin_bank'){ ?> selected="" <? } ?> value="admin_bank">Admin Bank</option>
                <option <?php if ($data_from_ctr['user']['group_user'] == 'admin_client'){ ?> selected="" <? } ?> value="admin_client">Admin Client</option>
            </select>

            </td>
        </tr>
        <tr  <?php if ($data_from_ctr['user']['group_user'] != 'user'){ ?> style= "display: none" <? }  ?> class="odd level">
            <td width="150"><strong>Level</strong></td>
            <td width="10">:</td>
            <td colspan="2">
            <select id="level" name="level">
                <option <?php if($data_from_ctr['user']['_status'] == '01'){ ?> selected="" <? } ?> value="01">Inputer</option>
                <option <?php if($data_from_ctr['user']['_status'] == '02'){ ?> selected="" <? } ?> value="02">Verificator</option>
                <option <?php if($data_from_ctr['user']['_status'] == '03'){  ?> selected="" <? }?> value="03">Authorize 1</option>
                <option <?php if($data_from_ctr['user']['_status'] == '04'){ ?>  selected="" <? } ?> value="04">Authorize 2</option>
                <option <?php if($data_from_ctr['user']['_status'] == '05'){ ?> selected="" <? } ?> value="05">COPS</option>
            </select>
            </td>
        </tr>
        <tr style="display: none" class="limit">
            <td width="150"><strong>Limit Transaction</strong></td>
            <td width="10">:</td>
            <td colspan="2">
            <input type="text" name="limit" id="limit value="<?php echo $data_from_ctr['user']['limit']; ?>" />
            </td>
        </tr>
          <tr class="odd">
            <td width="150"><strong>Account Access</strong></td>
            <td width="10">:</td>
            <td colspan="2">
            <select id="acctAccessed" name="acctAccessed[]" multiple="multiple" class="chosen-select" style="width:350px;" data-placeholder="Select account">
            <?php foreach ($data_from_ctr['account']['account'] as $data) :?>    
            <option <?php if($data['selected'] == "1"){ ?> selected="" <? } ?>value="<?php echo $data['id'] ?>"><?php echo $data['_giro_OB']; ?></option>
            <?php endforeach; ?>
            </select>
            <input id="chkall" type="checkbox" >Select All</input>
        </td>
        </tr>
        <tr>
            <td width="150">&nbsp;</td>
            <td width="10">&nbsp;</td>
            <td colspan="2"><input class="btnsubmitdis" type="submit" value="Save" /></td>
        </tr>


    </tbody>
    </table>
</fieldset>

This is my Controller

public function edit(){

        Template::setTitle('Edit User Management');

        $id_user =(int)Request::post('id_user');

        //$id_user = (int)$_POST['id_user'];

        echo $id_user; die;

        //$id_user = (int)Session::get('idx');

        $result = $this->getUserbyId($id_user);      

        $dataresult = json_decode($result, true);
        if($dataresult === NULL) {
            echo "<script language = \"javascript\">window.alert(\No Have Data\");";
            echo "javascript:history.back();</script>";
            return false;
        }
        $data = $dataresult;
        return $data;

Answer 1

Here is some method to do it :

1) Change id_user in your a tag by data-id-user and try var id_user = $(this).data("id-user");, remove the onclick event on your html tag and add an id so you can do the same in jQuery :

$("#edit_id_user").on("click", function() {
     console.log($(this).data('id-user'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="edit_id_user" data-id-user="test" href="#" >Edit</a>

2) Now if you want to keep your edit function, just add a this inside so you can get the current element inside your function:

function edit(elt) {
    console.log($(elt).data('id-user'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a onclick="edit(this)" data-id-user="test" href="#" >Edit</a>

3) Look Jai answer : just add the id as param in your function so you get it easily

Here is an other question about adding custom attribute to HTML tag that might be interesting for you : Can I add a custom attribute to an HTML tag?

Answer 2

I would suggest you to do this way:

<a onclick="edit(<? echo $row ['idx']; ?>)" 
   id_user="<? echo $row ['idx']; ?>" href="#" >Edit</a>
 // if it gets the id then pass it to the calling function here.

then in the function:

function edit(idUser){ // get the id here
    var id_user = idUser; // and process it here.
    alert(id_user);
    ...

or you can pass this to the calling function:

onclick="edit(this)"

and inside your edit function:

function edit(currEl){ // get the this ref here
    var id_user = $(currEl).attr('id_user'); // and extract the attr here.
    alert(id_user);
    ...

Answer 3

Since you are using jquery. I would recommend to use jquery onclick method rather than javascript native method.

So your html should look like this

<a data-id-user="<? echo $row ['idx']; ?>" href="#" class="banner_content">Edit</a>

Below is the jquery script

$(document).ready(function() {
  $('.banner_content').click(function() {
    var id_user = $(this).data('id-user');
    alert(id_user);
    //your ajax call goes here
  });
});

for custom attribute refer to this : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

Answer 4

We can pass this in edit function after getting value of id_user

<a onclick="edit($(this))" id_user="123" href="#" >Edit</a>

  function edit(obj){
    var id_user = obj.attr("id_user");
    alert(  obj.attr("id_user"));
  }

Answer 5

You can pass the anchor-element to the edit function like this:

function edit(el) {
  var id_user = $(el).attr('id_user');
  console.log(id_user);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a onclick="edit(this)" id_user="test" href="#">TEST</a>

Answer 6

Hi welcome to StackOverflow.

The question you have asked says that you want to use jQuery as the click event, but the code you have written is in pure JavaScript. Please try to go through and understand jQuery Click event from their documentation and implement it according to that. I will put both jQuery example and javascript example below.

if it's written using jQuery only

jQuery

button.on("click", function(){
    alert($(this).attr('id_user'));
})

jQuery HTML component

<button id_user="testing">Change color</button>

if it's written using pure javascript

JavaScript

function edit(user) {
    alert(user);
}

JavaScript HTML component

<button onclick="edit('testing')">Change color</button>

Read More about jQuery Click

Answer 7

I you are willing to add your custom attribute to any HTML element, please use HTML data-* attributes. The data-* attribute is used to store custom data private to the page or application.

Example :

<ul>
  <li id='user' data-id_user="your-cutom-id">Something</li>
</ul> 

And you will get data like this :

$("#user").data( "id_user" ); // you will get your-cutom-id

for more reference https://api.jquery.com/data/

Answer 8

try to get the attrid through initiating a class its easier that way. first initiate a class:

<a class="some-class" onclick="edit()" id_user="<? echo $row ['idx']; ?>" href="#" >Edit</a>

then call it:

Function edit(){
    var id_user = $(".some-class").attr("id_user");
    alert(id_user);


    $.ajax({
        type:"POST",
        url : "<?php echo BASE_URL ?>app.php/usermanagement/edit_user",
        data :{id_user:id_user},
        success:function(data){
            alert(data)
            console.log(data)
        },
        error:function(err){
            alert(err)
        }
    });
}