Как получить значение из поля ввода с помощью Javascript? - PullRequest
Новая
       11

Как получить значение из поля ввода с помощью Javascript?

1 голос
/ 06 марта 2019

Как я могу получить значение определенного поля ввода с помощью Javascript?

Давайте возьмем этот магазин магазина, например: https://geekymate.com/products/magic-doormat-1?variant=18941211607138

Я пытаюсь создать скрипткоторый автоматически применяет код скидки на основе количества, заполненного в поле количества.

Но для этого мне нужно иметь возможность получить последнее значение поля.Как будет выглядеть код для получения последнего / текущего значения?

РЕДАКТИРОВАТЬ: Спасибо за подсказку с вопросом.Я действительно знаю, что мне нужно использовать getElementById (для связанной страницы выше это будет так: var x = document.getElementById ("Quanity"). Value;), но как мне всегда получать последний ввод автоматически, если изменяется конечный пользовательзначение?

Ответы [ 4 ]

1 голос
/ 06 марта 2019

посмотрите на фрагмент кода.используя 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>
1 голос
/ 06 марта 2019

Другие ответы также верны (с использованием 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" />
1 голос
/ 06 марта 2019

keyup() function;)

Запускается каждый раз, когда пользователь вводит новый текст.Кроме того, вы можете использовать функции input() или change().

В jQuery это работает так: 

$(document).on('keyup', '#InputID', function(){
    //...code...
    var discount = Number( document.getElementById('InputID').value )*10/100;
});
0 голосов
/ 06 марта 2019

Это функция 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' 'He' 'Hel' 'Hell' 'Hello'

...