我有一个select菜单,当用户进行选择时,它会向PHP脚本发出AJAX请求,以查询数据库并返回与选择匹配的值,并将其插入到相关的输入字段中。如果没有返回匹配的值,则清除关联的输入字段。
这一切都很好,但我刚刚意识到,默认占位符文本出现时,没有匹配的值,因为输入字段是空的。我需要在清除输入字段的同时清除占位符文本,但到目前为止还没有找到这样做的方法。
以下是调用PHP脚本并更新输入字段的AJAX代码:
$(document).ready(function() {
$("#smsFromName").change(function() {
var smsFromName = $("#smsFromName").val();
console.log(smsFromName);
$.post('getSMSSender.php', {
senderName: smsFromName
}, function(data) {
data = JSON.parse(data);
if (data.error) {
alert("error");
$("#smsFrom").html('');
return; // stop executing this function any further
} else if (data[0] && data[0].senderMobile) {
console.log(data[0].smsFrom);
$("#smsFrom").val(data[0].senderMobile);
} else {
console.log(data[0].smsFrom);
$("#smsFrom").val("");
}
}).fail(function(xhr) {
$("#smsFrom").html('');
});
});
});
下面是HTML输入字段:
<input type="text" class="form-control w48" name="smsFrom" id="smsFrom" placeholder="0412 345 678" value="0417 555 666">
我希望我可以简单地添加一些代码:
$("#smsFrom").val("");
还要清除占位符文本,但我不知道该怎么做?
最佳答案
瓦尼利亚斯
你可以在这里轻松使用vannila.js。。。
document.getElementById("myText").placeholder = "";
所以应该是:
$(document).ready(function() {
$("#smsFromName").change(function() {
var smsFromName = $("#smsFromName").val();
console.log(smsFromName);
$.post('getSMSSender.php', {
senderName: smsFromName
}, function(data) {
data = JSON.parse(data);
if (data.error) {
alert("error");
$("#smsFrom").html('');
return; // stop executing this function any further
} else if (data[0] && data[0].senderMobile) {
console.log(data[0].smsFrom);
$("#smsFrom").val(data[0].senderMobile);
} else {
console.log(data[0].smsFrom);
$("#smsFrom").val("");
document.getElementById("myText").placeholder = "";
}
}).fail(function(xhr) {
$("#smsFrom").html('');
});
});
});
jQuery公司
您也可以在这里轻松地使用jQuery。。
$("#smsFrom").attr('placeholder', '').html("");
所以它会导致。。。
$(document).ready(function() {
$("#smsFromName").change(function() {
var smsFromName = $("#smsFromName").val();
console.log(smsFromName);
$.post('getSMSSender.php', {
senderName: smsFromName
}, function(data) {
data = JSON.parse(data);
if (data.error) {
alert("error");
$("#smsFrom").html('');
return; // stop executing this function any further
} else if (data[0] && data[0].senderMobile) {
console.log(data[0].smsFrom);
$("#smsFrom").val(data[0].senderMobile);
} else {
console.log(data[0].smsFrom);
$("#smsFrom").val("");
$("#smsFrom").attr('placeholder', '').html("");
}
}).fail(function(xhr) {
$("#smsFrom").html('');
});
});
});
结论
两种方法都可以。您可以使用jQuery使其具有类似类型的代码,或者使用VanillaJS来提高性能。希望这有帮助!