How to get value from input field with Javascript?

Question

How can I get the value of an specific input field with Javascript?

Lets take this shopify shop for example: https://geekymate.com/products/magic-doormat-1?variant=18941211607138

I am trying to create a script which is automatically applying an discount code based on the quantity filled in the quantity field.

But to do that I need to be able to get the latest value of the field. How would the code look like to get the latest/current value?

EDIT: Thank you for the hint with the question. I do know that I need to use getElementById ( For the linked page above it would be this: var x = document.getElementById("Quanity").value; ) but how do I always get the latest input automatically if the enduser is changing the value?

Answer 1

The other answers are also correct (using jQuery .keyup), but you can also use this solution below (which is better). This solution uses pure javascript.

The code selects the element by using .getElementById() and uses .addEventListener() to do something when input changes.

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

<input id="text" />

Or you can use the following if you want a jQuery solution. This uses 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() function ;)

It runs each time, when user types new text. Also, you can use input() or change() functions.

In jQuery it works like this:

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

Answer 3

It's a Jquery function that runs on keypress. I've included a snippet below to see how it would tie in with an input field.

$('#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 runs every time a specific element is lifted. Imagine someone enters 'Hello'

You will see the following logged:

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

Answer 4

look at the code snippet. using JavaScript to get the values. and can use addEventListener to detect the change and use detectChange function to get the latest values.

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

This work for me!

document.getElementById("text").value;

<input id="text" />

Answer 6

Use the document.getElementById(); -command to get the existence of the referenced element in your HTML page. Then use the same technique of assigning attributes in the original HTML coding rules.

Use document.getElementById('able').value = 'whatever';.