how to get input field value on button click in Vuejs or in vanila javascript?

Question

Could you please tell me how to get input field value on the button click. I want to get input tag value on button click which is Button Tag separated.

Here is my code below:

<div class="details-filter-row details-row-size">
    <label for="Qty">Qty:</label>
    <div class="product-details-quantity">
        <input type="number" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required>
    </div>
</div>
<div class="product-details-action">
    <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

And my Script below:

<script>
export default{
  data: function () {
    return {
    }
  },
  methods: {
    addTo_Cart(e) {
      // console.log(JSON.stringify(e.target.value));
    },
}
};
</script>

Answer 1

Preferred Approach

For using Vuejs built-in tools, you can simply assign a v-model to your input element then access its value via that v-model.

<div class="details-filter-row details-row-size">
  <label for="Qty">Qty:</label>
  <div class="product-details-quantity">
    <input type="number" v-model="inputValue" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required />
  </div>
</div>
<div class="product-details-action">
  <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

<script>
  export default {
    data: function() {
      return {
        inputValue: null
      }
    },
    methods: {
      addTo_Cart(e) {
        console.log(this.inputValue);
      },
    }
  };
</script>

Other Possible Approaches

But in any case, if you don't want to use the above approach you can simply get the input value with either ref (Another Vuejs built-in tool) which is provide the element in virtual DOM or getElementById which is not recommended because it will use actual DOM.

• Using ref

<div class="details-filter-row details-row-size">
  <label for="Qty">Qty:</label>
  <div class="product-details-quantity">
    <input type="number" ref="inputValue" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required />
  </div>
</div>
<div class="product-details-action">
  <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

<script>
  export default {
    data: function() {
      return {
      }
    },
    methods: {
      addTo_Cart(e) {
        console.log(this.$refs.inputValue);
      },
    }
  };
</script>

• Using getElementById

<div class="details-filter-row details-row-size">
  <label for="Qty">Qty:</label>
  <div class="product-details-quantity">
    <input type="number" id="Qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required />
  </div>
</div>
<div class="product-details-action">
  <button value="{{$ProductById->id}}" @click="addTo_Cart($event)" class="btn-cart btn-product" style="font-size: 1.3rem;" title="Add to cart">add to cart</button>
</div>

<script>
  export default {
    data: function() {
      return {
      }
    },
    methods: {
      addTo_Cart(e) {
        console.log(document.getElementById('Qty').value);
      },
    }
  };
</script>