在onchange事件中使用html中的自定义数据属性

Using custom data-attributes in html in onchange event

本文关键字：自定义 数据属性 html onchange 事件      更新时间：2023-09-26

下面的代码在定义数据属性并将它们用作函数中的参数时，给了我一个错误"未定义的Fieldname "。php正在使用输入字段中的属性更新数据库中的一条记录。有办法解决这个问题吗?

<!DOCTYPE html>
<html>
<head>
<script>
function update_person(str,fieldname,key,keyvalue) 
{
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","update_person.php?q="+str+"&f="+fieldname+"&n="+key+"&nv="+keyvalue,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<form>
<input type="text" name="firstname" data-fieldname ="firstname" data-key ="PERSONID" data-keyvalue = "7" onchange = "update_person(this.value,this.data-fieldname, this.data-key,this.data-keyvalue)">
</form>
<br>
<div id="txtHint"> </div>
</body>
</html>

您可以使用dataset属性引用自定义数据属性:

update_person(this.value,this.dataset.fieldname, this.dataset.key,this.dataset.keyvalue)

裁判:

在JavaScript中读取这些属性的值也非常困难简单。您可以使用getAttribute()和它们的完整HTML名称来读取但是标准定义了一种更简单的方法:您可以使用DOMStringMap通过数据集属性读取。

或者使用getAttribute()的另一种稍长的格式。

update_person(this.value,this.getAttribute('data-fieldname'), this.getAttribute('data-key'),this.getAttribute('data-value'))
相关文章：