javascript - 如何检测输入文本字段中的更改并启用保存按钮
问题描述
我正在尝试编写一个函数来检测文本字段中的更改并启用保存按钮。
这是在 Visual Studio 2017、HTML、JavaScript 中运行的
(function () {
var customer_address = localStorage.getItem("customer_address");
var customer_city = localStorage.getItem("customer_city");
var customer_postal_code = localStorage.getItem("customer_postal_code");
//Address Section
function changeAddress() {
var oldaddress = $("#txtOldAddress").val();
var newaddress = $("#txtNewAddress").val();
var url = serverURL() + "/savenewaddress.php";
var JSONObject = {
"customer_username": localStorage.getItem("customer_username"),
"oldaddress": oldaddress,
"newaddress": newaddress,
};
$.ajax({
url: url,
type: 'GET',
data: JSONObject,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (arr) {
_changeAddressResult(arr);
},
error: function () {
alert("FAIL");
}
});
}
function _changeAddressResult(arr) {
if (arr[0].result === 1) {
/*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
alert("OK!")
}
else {
alert("FAIL2");
}
}
//City Section
function changeCity() {
var oldcity = $("#txtOldCity").val();
var newcity = $("#txtNewCity").val();
var url = serverURL() + "/savenewcity.php";
var JSONObject = {
"customer_username": localStorage.getItem("customer_username"),
"oldcity": oldcity,
"newcity": newcity,
};
$.ajax({
url: url,
type: 'GET',
data: JSONObject,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (arr) {
_changeAddressResult(arr);
},
error: function () {
alert("FAIL");
}
});
}
function _changeAddressResult(arr) {
if (arr[0].result === 1) {
/*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
alert("OK!")
}
else {
alert("FAIL2");
}
}
//Postal Code Section
function changePostalCode() {
var oldpostalcode = $("#txtOldPostalCode").val();
var newpostalcode = $("#txtNewPostalCode").val();
var url = serverURL() + "/savenewpostalcode.php";
var JSONObject = {
"customer_username": localStorage.getItem("customer_username"),
"oldpostalcode": oldpostalcode,
"newpostalcode": newpostalcode
};
$.ajax({
url: url,
type: 'GET',
data: JSONObject,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (arr) {
_changeAddressResult(arr);
},
error: function () {
alert("FAIL");
}
});
}
function _changeAddressResult(arr) {
if (arr[0].result === 1) {
/*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
alert("OK!")
}
else {
alert("FAIL2");
}
}
//Validation
$("#ChangeAddressForm").validate({
rules: {
txtNewPostalCode: {
required: true,
minlength: 6,
digits: true
},
txtNewCity: {
digits: false
},
txtNewAddress: {
required: true,
alphanumeric: true
}
},
messages: {
txtNewAddress: {
required: "Address is required",
},
txtNewCity: {
required: "City is required",
digit: "Include only letters!",
},
txtNewPostalCode: {
required: "Postal Code is required!",
minlength: "Postal Code only contains 6 digits!",
digits: "Postal Code only contains digits!"
}
},
focusInvalid: false,
submitHandler: function () {
return false;
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().parent().after());
},
});
//Save Address Button Function
$("#btnSaveAddress").bind("click", function () {
if ($("#ChangeAddressForm").valid()) {
changeAddress();
changeCity();
changePostalCode();
}
});
})();
当 3 个字段中的文本框发生更改时,我希望输出启用提交按钮。如果没有更改,则如果存在相同的文本,则该按钮将被禁用。
解决方案
试试这个代码:
function InputChangeListener(){
flag = 1;
var firstInput = document.getElementById("firstInput");
var secondInput = document.getElementById("secondInput");
var thirdInput = document.getElementById("thirdInput");
var firstInputVal = document.getElementById("firstInput").defaultValue;
var secondInputVal = document.getElementById("secondInput").defaultValue;
var thirdInputVal = document.getElementById("thirdInput").defaultValue;
var submitButton = document.getElementById("submitButton");
if(firstInput.value == firstInputVal || secondInput.value == secondInputVal || thirdInput.value == thirdInputVal){
flag = 0;
}
if(flag == 1){
submitButton.style.display = "block";
} else {
submitButton.style.display = "none";
}
}
#submitButton{
display: none
}
<input id="firstInput" value="test1" type="text" onkeyup ="InputChangeListener()"/><br />
<input id="secondInput" value="test2" type="text" onkeyup ="InputChangeListener()"/><br />
<input id="thirdInput" value="test3" type="text" onkeyup ="InputChangeListener()"/><br />
<input id="submitButton" type="submit" value="Submit" />
推荐阅读
- c# - 试图在 WinForms 应用程序的设置中存储 string[][]
- reactjs - 检查样式组件中是否存在 Prop
- angular - 来自 Observable .subscribe() 方法的 window.print()
- javascript - 如何为 HTMLELement 创建代理
- arrays - 如何使用来自 REST 回显的数据在 Postgresql 中插入数组
- linq - System.IO - 使用 Directory/LINQ 将列表中的某些文件替换为其他文件
- java - 保存选定的 JTable 行并在另一个 JTable 中显示它们(在另一个 JFrame 中)
- testing - 为什么在涉及其他罐子类的情况下,我无法使用 Randoop 生成代码?
- python - 如何在同一页面上处理 POST 请求和打印输出?
- haskell - fold 函数不断切换 var 位置