doudu9094
2017-06-11 12:52
浏览 683

如何获取调用函数的按钮的值“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 !

图片转代码服务由CSDN问答提供 功能建议

我目前正在进入一个用Ajax调用Api的地方从表中删除客户端我是 。 问题是,我之前曾尝试在执行ajax之前进行检查,但它似乎不起作用。

所以这一次,当点击删除按钮时我想要 首先检查用户是否确定要删除客户端,如果为true,则执行该功能将其删除。

事情是,我将id放入按钮中 这个:

 &lt; td class =“text-center”&gt; 
&lt; a type =“button”class =“btn btn-danger”value =('  + value.id +')onclick =“sureAboutDelete()”&gt;删除客户端&lt; / a&gt; 
&lt; / td&gt; 
   
 
 

然后在.js文件中 我正在尝试:

  //检查用户是否要删除Client 
function sureAboutDelete(){
 console.log((event.target)); 
  // var id =获取value属性的值
 //询问用户他/她是否确定要删除
如果(true){
 //删除使用ID的客户端
 deleteClient($ id)  ; 
} else {
 //关闭提示
返回; 
} 
} 
   
 
 

当使用“(event.target)”时,我可以看到所有具有属性的按钮,但是放入“(event.target).val”或者像这样,我不能接受我想要的id。 \ n

有任何建议吗?

谢谢!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 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 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...
        }
    
    });
    
    打赏 评论

相关推荐 更多相似问题