我有一个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来提高性能。希望这有帮助!

10-05 20:42
查看更多