2

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) {

    }
}
Kay Singian
  • 1,301
  • 8
  • 20
  • 33
  • possibly duplicate: https://stackoverflow.com/questions/3577469/form-onsubmit-determine-which-submit-button-was-pressed?answertab=active#tab-top – Hoan Dang Jan 11 '18 at 06:02
  • 1
    I'm not sure this is possible. With that in mind, you could do e.g. `@click="button_pressed = 'Button1'"`, tracking which button was clicked in a data field and then referencing it once the submit has propagated to the `@submit.prevent` handler. – B. Fleming Jan 11 '18 at 06:04
  • Does the @submit have to be in the form tag? can you not just add `@click.prevent="getButtonName"` to each input? – skribe Jan 11 '18 at 06:23
  • @skribe yeah I know that method, but I'm curious if the clicked element can be distinguished in the passed $event data if the handler is in the form tag. – Kay Singian Jan 11 '18 at 07:12

3 Answers3

6

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

Jacob Goh
  • 19,800
  • 5
  • 53
  • 73
4

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>
tiagojpdias
  • 458
  • 3
  • 12
4

You can easely access to the button's name with submitter.name Check below:

new Vue({
  el: "#app",
  data() {
    return {
        clickedButton: null,
    }
  },
  methods: {
    getButtonName(e) {
        this.clickedButton = e.submitter.name
    }
  }
})
<html>
  <head></head>
  <body>
    <div id="app">
      <form method="post" @submit.prevent="getButtonName">
        <input type="submit" name="button1" value="Button1">
        <input type="submit" name="button2" value="Button2">
      </form><br />
      <div>Pressed: {{clickedButton}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </body>
</html>
Isaac Vasquez
  • 41
  • 1