Question

1

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

rated 0 times [ 6] [ 5] / answers: 1 / hits: 8226 / 4 Years ago, sun, august 9, 2020, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alejandro

Add To Favorites

Follow

Total Points: 231

Total Questions: 102

Total Answers: 107

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

alejandro questions

1 Discord.js v13 code breaks when upgrading to v14

Mon, Jul 18, 22, 00:00, 2 Years ago

1 React Image Magnifiers not working when zoom in using nextjs

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Discord.js bot responds when mentioned

Thu, Sep 10, 20, 00:00, 4 Years ago

1 How do I set a user's voice channel when I have the user's id?

Thu, May 21, 20, 00:00, 4 Years ago

1 Deconstructing values nextjs: ReferenceError: Cannot access 'XXX' before initialization

Sat, Dec 28, 19, 00:00, 4 Years ago

View All

answered 4 Years ago jaden · Accepted Answer

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>