Question

我的表格看起来像这样：

<form method="POST">
    <input type="text" name="htdate" id="htdate">
    <br/>
    <input type="text" name="pgdate" name="pgdate">
    <br/>
    <input type="submit" name="submit" value="submit">
</form>

我希望在表单更改时获取文本框ID。我的js代码看起来像这样：

$('form :input').change(function()
{
    var eleID = $(this).id;
    console.log("changeID: ", eleID);
});

控制台输出：

changeID:  undefined

在更改值时是否有任何方法可以获取元素的id。？

Answer 1

id是dom对象的属性，jQuery对象没有任何id属性，因此它将始终返回undefined

使用 this.id 或 $(this).attr('id') 获取元素的ID

$('form :input').change(function() {
  var eleID = this.id;
  // var eleID = $(this).attr('id');
  console.log("changeID: ", eleID);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
  <input type="text" name="htdate" id="htdate">
  <br/>
  <input type="text" name="pgdate" name="pgdate">
  <br/>
  <input type="submit" name="submit" value="submit">
</form>

如果您想听取输入值，请使用keypress，keyup或input事件

$('form :input').on('input', function() {
  var eleID = this.id;
  // var eleID = $(this).attr('id');
  console.log("changeID: ", eleID);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
  <input type="text" name="htdate" id="htdate">
  <br/>
  <input type="text" name="pgdate" name="pgdate">
  <br/>
  <input type="submit" name="submit" value="submit">
</form>

Answer 2

使用$（）。attr（）;

$('form :input').change(function()
{
    var eleID = $(this).attr("id");
    console.log("changeID: ", eleID);
});

Answer 3

有没有办法在值更改期间获取元素的ID。

为此，您可以使用input中引入的html5事件。所以这可以做到：

$('form :input').on('input', function()
{
    var eleID = this.id; // <----this.id; || $(this).attr('id');
    console.log("changeID: ", eleID);
});

只有在您从输入中失去焦点时才会调用

change事件，因此如果您在typing/cut-copy-paste期间寻找即时效果，那么input对您有益。

在表单更改时获取元素ID

3 个答案: