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>

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>

• javascript
• forms
• vue.js
• laravel-blade
• cart

• In plain JS you can read it like - document.getElementById('Qty').value – Prathap Reddy Commented Aug 9, 2020 at 5:21

3 Answers 3

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 remended 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>

You can use form input binding as follows:

<div class="details-filter-row details-row-size">
    <label for="Qty">Qty:</label>
    <div class="product-details-quantity">
        <input type="number" v-model="quantity" id="Qty" class="form-control" min="1" max="10" step="1" data-decimals="0" required>
    </div>
</div>

Now add the quantity property in data section of your View ponent.

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

You can now access quantity in button click handler as this.quantity.

You don't need to get the event for this. Just use v-model with your input element like this:

<input v-model="myNumberValue" type="number" id="Qty" class="form-control" value="1" 
      min="1" max="10" 
       step="1" data-decimals="0" required>
<script>
  export default{
   data: function () {
    return {
      myNumberValue: 1
    };
   },
   methods: {
    addTo_Cart() {
     // the input value will be accessible using this.myNumberValue
    },
   }
  };
</script>

now the value of the input element will be stored in the myNumberValue property each time you change the value using input.