[英]How to get the value “value” of a button that called a function
I'm currently into a place where I call an Api with Ajax to delete a Client from a table I've. 我目前正在使用Ajax调用Api来从已拥有的表中删除客户端的地方。 The thing is, that I've previously tried to make a check before ajax is executed, but it doesn't seem to work.
事实是,我以前曾尝试在执行ajax之前进行检查,但似乎没有用。
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: 关键是,我将id插入按钮,如下所示:
<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: 然后在.js文件中我想要的是:
// 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. 使用“(event.target)”时,我可以看到所有带有属性的按钮,但是像这样放置“(event.target).val”,则无法获取所需的ID。
Any suggestion? 有什么建议吗?
Thanks ! 谢谢 !
First of: 首先:
value=('+value.id+')
in HTML is wrong for several reasons HTML中的
value=('+value.id+')
错误是由于多种原因
value
is not a valid <a>
Element attribute. value
不是有效的<a>
元素属性。 use data-value
instead. data-value
代替。 You need that data-value
beforehand, say from back-end, already embedded into your HTML 您需要预先从后端插入已经嵌入到HTML中的
data-value
Anchor's type
cannot be "button"
it's used to specify the media type in the form of a MIME type ( MDN <a> ) 锚点的
type
不能为"button"
它用于以MIME类型( MDN <a> )的形式指定媒体类型
If
should be if
If
应该if
this
into your onclick="sureAboutDelete(this)"
this
传递到您的onclick="sureAboutDelete(this)"
The result should look like: (pure JS) 结果应类似于:(纯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) 或使用jQuery: (PS:无需
onclick=
东西)
$(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>
In jQuery, You can get the value
attribute by using attr()
method. 在jQuery中,您可以使用
attr()
方法获取value
属性。
Reference : http://api.jquery.com/attr/ 参考: 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...
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.