如何获取调用函数的按钮的值“value”

Question

I'm currently into a place where I call an Api with Ajax to delete a Client from a table I've. The thing is, that I've previously tried to make a check before ajax is executed, but it doesn't seem to work.

So this time, when Delete button is clicked I want to check first if the user is sure he wants to delete the client, and if true, execute the function to delete it.

The thing is, I've the id into the button like this:

<td class="text-center">
    <a type="button" class="btn btn-danger" value=('+value.id+') onclick="sureAboutDelete()">Delete Client</a>
</td>

And then in .js file I'm trying that:

// Check if user wants to delete Client
function sureAboutDelete(){
    console.log((event.target));
    // var id = Get the value of value attribute
    // Ask for the user if he/she is sure about deleting
    If (true){
        // delete client using ID taken
        deleteClient($id);
    } else {
        // Just close prompt
        return;
    }
}

When using "(event.target)" I can see all the button with the attributes, but putting "(event.target).val" or like this, I can not take the id I want.

Any suggestion?

Thanks !

Answer 1

First of:

value=('+value.id+') in HTML is wrong for several reasons

• value is not a valid <a> Element attribute. use data-value instead.

• You need that data-value beforehand, say from back-end, already embedded into your HTML

• Anchor's type cannot be "button" it's used to specify the media type in the form of a MIME type (MDN <a>)

• If should be if
• pass this into your onclick="sureAboutDelete(this)"

The result should look like: (pure JS)

function sureAboutDelete(self) {

  event.preventDefault(); // Since it's an anchor, don't scroll the page.
  
  var id = self.dataset.clientid; // Get ID vrom data-clientid attribute
  
  if( id && confirm("Delete client: "+ id) ) deleteClient( id );

}


function deleteClient( id ) {
    console.log("DELETING CLIENT: %s", id);
    // 1. DELTE FROM DATABASE
    // 2. REMOVE ANY .clientId-N element from page
    var elements = document.querySelectorAll(".clientId-"+ id);
    if(!elements[0]) return;
    for(var i=0; i<elements.length; ++i) {
      elements[i].remove();
    }
}

<table>

  <tr class="clientId-2">
    <td class="text-center">
      <a type="button" class="btn btn-danger" data-clientid="2" onclick="sureAboutDelete(this)">Delete Client 2</a>
    </td>
  </tr>

  <tr class="clientId-37">
    <td class="text-center">
      <a type="button" class="btn btn-danger" data-clientid="37" onclick="sureAboutDelete(this)">Delete Client 37</a>
    </td>
  </tr>
  
  <tr class="clientId-56">
    <td class="text-center">
      <a type="button" class="btn btn-danger" data-clientid="56" onclick="sureAboutDelete(this)">Delete Client 56</a>
    </td>
  </tr>

</table>

or using jQuery: (PS: no need to onclick= stuff)

$(document).on("click", "[data-delete-client]", function(evt) {

  evt.preventDefault();

  // 1. retrieve client ID
  var id = $(this).data("delete-client");
  
  // 2. confirm
  if(!confirm("Really delete client: "+ id)) return; //do nothing if no confirmation, else:
  
  // 3. delete from database
  // (TODO)
  
  // 4. remove all .clientId-N elements
  $(".clientId-"+ id).fadeOut(400, function() {
    $(this).remove();
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <tr class="clientId-2">
    <td class="text-center">
      <a class="btn btn-danger" data-delete-client="2">Delete Client 2</a>
    </td>
  </tr>

  <tr class="clientId-37">
    <td class="text-center">
      <a class="btn btn-danger" data-delete-client="37">Delete Client 37</a>
    </td>
  </tr>
  
  <tr class="clientId-56">
    <td class="text-center">
      <a class="btn btn-danger" data-delete-client="56">Delete Client 56</a>
    </td>
  </tr>

</table>

</div>