forms - how to get input field value on button click in Vuejs or in vanila javascript? - Stack Overflow

admin管理员组

文章数量:1025244

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

Share Improve this question Follow asked Aug 9, 2020 at 5:15 HaronHaron 2,62911 gold badge2323 silver badges2929 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 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.

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

Share Improve this question Follow asked Aug 9, 2020 at 5:15 HaronHaron 2,62911 gold badge2323 silver badges2929 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 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.

本文标签： formshow to get input field value on button click in Vuejs or in vanila javascriptStack Overflow