如何使用Javascript從輸入字段中獲取值？

Question

如何使用 Javascript 獲取特定輸入字段的值？

讓我們以這個shopify商店為例： https ://geekymate.com/products/magic-doormat-1?variant = 18941211607138

我正在嘗試創建一個腳本，該腳本根據數量字段中填寫的數量自動應用折扣代碼。

但要做到這一點，我需要能夠獲得該字段的最新值。 獲取最新/當前值的代碼是什么樣的？

編輯：感謝您對問題的提示。 我確實知道我需要使用 getElementById （對於上面的鏈接頁面，它將是： var x = document.getElementById("Quanity").value; ）但是如果最終用戶發生變化，我如何始終自動獲取最新輸入價值？

Answer 1

其他答案也是正確的（使用 jQuery .keyup ），但您也可以使用下面的這個解決方案（更好）。 此解決方案使用純 javascript。

該代碼使用.getElementById()選擇元素，並使用.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 2

keyup()函數 ;)

當用戶輸入新文本時，它每次都會運行。 此外，您可以使用input()或change()函數。

在 jQuery 中它是這樣工作的：

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

Answer 3

這是一個在按鍵上運行的 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。 想象一下有人輸入“你好”

您將看到以下記錄：

'H' '他' '地獄' '地獄' '你好'

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(); -command 來獲取 HTML 頁面中引用元素的存在。 然后在原始 HTML 編碼規則中使用相同的技術分配屬性。

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

Answer 6

這對我有用！

document.getElementById("text").value;

<input id="text" />