doudu9094
2017-06-11 12:52 阅读 527

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

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 !

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    dtutlamjasblef7982 dtutlamjasblef7982 2017-06-11 13:11

    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>
    
    点赞 评论 复制链接分享
  • douzhechi2435 douzhechi2435 2017-06-11 13:01

    In jQuery, You can get the value attribute by using attr() method.

    Reference : http://api.jquery.com/attr/

    Example:

    $(document).ready(function() {
    
        $('.btn-danger').click(function() {
            var sId = $(this).attr('value');
    
            // Use confirm() to show a certain confirm alert message
            var bConfirmMsg = confirm('Are you sure you want to delete this?');
    
            if (bConfirmMsg === true) {
                // delete client using ID taken
                deleteClient(sId);
            }
        });
    
        function deleteClient(sId) {
           // rest of code...
        }
    
    });
    
    点赞 评论 复制链接分享

相关推荐