Menu
Is it possible to get the submit button name that is being clicked if the v-on:submit is placed on the form tag and not in the button?
Form
<form method="post" @submit.prevent="getButtonName($event)">
<input type="submit" name="button1" value="Button1">
<input type="submit" name="button2" value="Button2">
</form>
Script
methods: {
getButtonName(event) {
}
}
453
v-on:submit won't work. but v-on:click will. See @click="handleClick($event)"
<template>
<div class="hello">
<form method="post" @click="handleClick($event)" @submit.prevent="getButtonName($event)">
<input type="submit" name="button1" value="Button1">
<input type="submit" name="button2" value="Button2">
</form>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
}
},
methods: {
getButtonName(event) {
// console.log(event);
},
handleClick(e) {
console.log(e.target.name);
}
}
}
</script>
e.g. https://codesandbox.io/s/6jwvy6l96k
173
new Vue({
el: "#app",
data() {
return {
clickedButton: null,
}
},
methods: {
getButtonName(event) {
this.clickedButton = event.target.name
}
}
})<html>
<head></head>
<body>
<div id="app">
<form method="post" @click.prevent="getButtonName">
<input type="submit" name="button1" value="Button1">
<input type="submit" name="button2" value="Button2">
</form>
<div v-text="clickedButton" v-if="clickedButton"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>
answered Dec 05 '25 00:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With