如何使用 Javascript 从输入字段中获取值？

Question

如何使用 Javascript 获取特定输入字段的值？

以这家shopify店铺为例：https://geekymate.com/products/magic-doormat-1?variant=18941211607138

我正在尝试创建一个脚本，它会根据数量字段中填写的数量自动应用折扣代码。

但要做到这一点，我需要能够获得该字段的最新值。代码看起来如何获得 latest/current 值？

编辑：感谢您对问题的提示。我知道我需要使用 getElementById（对于上面的链接页面，它是这样的：var x = document.getElementById("Quanity").value;）但是如果最终用户正在更改值？

Answer 1

keyup() 函数 ;)

它会在每次用户键入新文本时运行。此外，您可以使用 input() 或 change() 函数。

在 jQuery 中它是这样工作的：

$(document).on('keyup', '#InputID', function(){
    //...code...
    var discount = Number( document.getElementById('InputID').value )*10/100;
});

Answer 2

这是一个在按键时运行的 Jquery 函数。我在下面包含了一个片段，以了解它如何与输入字段配合使用。

$('#code').keyup(function() {
    var discountcode = this.value;
    console.log(discountcode);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="code" type="test" />

每次抬起特定元素时都会运行 Keyup。假设有人输入 'Hello'

您将看到以下记录：

'H' 'He' 'Hel' 'Hell' 'Hello'

Answer 3

其他答案也是正确的（使用jQuery .keyup），但您也可以使用下面的解决方案（更好）。此解决方案使用纯 javascript.

代码通过使用 .getElementById() and uses .addEventListener() 在输入更改时做一些事情来选择元素。

var text = document.getElementById("text");
window.onload = function() {
  text.addEventListener("input", function() {
    console.log(text.value);
  });
}

<input id="text" />

或者，如果您想要 jQuery 解决方案，可以使用以下方法。这使用 jQuery .bind().

$("#text").bind("input", function() {
  console.log($("#text").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="text" />

Answer 4

查看代码片段。使用 JavaScript 获取值。并且可以使用 addEventListener 检测变化并使用 detectChange 函数获取最新值。

var discount = [];

function detectChange() {
  var table = document.getElementsByClassName("shappify_qb_grid")[0];

  for (var i = 0; i < table.rows.length; i++) {
    var row = "";
    for (var j = 0; j < table.rows[i].cells.length; j++) {
      if (j == 1) {
        row = table.rows[i].cells[j].innerHTML;
        rate = parseFloat(row);
        if (rate && discount.indexOf(rate) < 0) {
          discount.push(parseFloat(row));
          console.log('---', parseFloat(row));
        }
      }
      // console.log('discount : ', discount);
    }
  }
}

detectChange();
console.log('discount : ', discount);

<table class="shappify_qb_grid" border=1>
<thead>
 <tr>
  <th>Qty</th>
  <th>Discount</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>Buy 1</td>
  <td>0% Off</td>
 </tr>
 <tr>
  <td>Buy 2</td>
  <td>10% Off</td>
 </tr>
 <tr>
  <td>Buy 4</td>
  <td>12% Off</td>
 </tr>
 <tr>
  <td>Buy 5</td>
  <td>14% Off</td>
 </tr>
 <tr>
  <td>Buy 6</td>
  <td>17% Off</td>
 </tr>
</tbody>
</table>

Answer 5

这对我有用！

document.getElementById("text").value;

<input id="text" />

Answer 6

使用 document.getElementById(); 命令获取 HTML 页面中引用元素的存在。然后在原始 HTML 编码规则中使用相同的分配属性的技术。

使用document.getElementById('able').value = 'whatever';.

如何使用 Javascript 从输入字段中获取值？

How to get value from input field with Javascript?

javascript

data-extraction