主页 / 问题 / 1185276
Accepted
Coffee inTime
Asked:2020-10-02 21:54:09 +0000 UTC2020-10-02 21:54:09 +0000 UTC

JS 找出变化发生在哪个特定输入

  • 772

我需要将用户编辑的字段保存在数据库中。如何找出用户更改了哪个字段？我有一个包含三个或更多输入字段的表单：

<form class="contact-form" method="post">
    <div class="modal">
      <input name="1" id="postcode-input"><br>
      <input name="2" id="postcode-input"><br>
      <input name="3" id="postcode-input"><br>
      <!--- И так далее -->
    </div>
</form>
<div class="form-status-holder"></div>

我可以使用以下脚本跟踪他们的更改：

var timeoutId;
$('.contact-form #postcode-input').on('input propertychange change', function() {
    console.log('Textarea Change');
    saveToDB();
    clearTimeout(timeoutId);
});

但是，如何找出变化发生在哪个特定输入？例如，如果在 input'e 中 name="3"，则将其输出到控制台。我事先不知道我会有多少个输入，但是所有的 id 都是一样的，只是名称不同。

javascript

3 个回答

  1. Best Answer

    不应有相同的 ID。

    function saveToDb(data) {
  console.log(`Saved...${data}`);
}

[...document.querySelectorAll('.contact-form input')].forEach(input => {
  input.addEventListener('input', () => {
    console.log('input triggered:', input.name);
    saveToDb(input.value);
  });
});
    <form class="contact-form" method="post">
    <div class="modal">
      <input name="1" id="postcode-input"><br>
      <input name="2" id="postcode-input"><br>
      <input name="3" id="postcode-input"><br>
      <!--- И так далее -->
    </div>
</form>
<div class="form-status-holder"></div>

    • 2 
  2. $('.contact-form .modal input').on('input propertychange change', function() {
    console.log(this.name);
});


    $('.contact-form input').on('input propertychange change', function() {
  console.log(this.name, this.value);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="contact-form" method="post">
  <input name="test1" />
  <input name="test2" />
</form>

    • 1

  3. 好吧，你几乎做的一切都是正确的，只有方法内的函数on可以包含参数，从这些参数可以清楚哪个元素接收到事件change

    https://api.jquery.com/change/

    而不是function()使用function(event)and event.target- 这是您需要的，例如，您id或class您可以在此基础上得出进一步的结论

    https://api.jquery.com/event.target/

    • 0

相关问题