1

I'm building a Vue app. When I click the button in the form I want to fill the input with value paypal and then submit the form. But from test_form.php (it's the file action of the form) the variable $_POST['paymentMethod'] contains null instead of paypal! Where I'm wrong?

Here is the code I'm using:

HTML:

<form action="test/test_form.php" method="POST" ref="form">
  <button type="button" v-on:click="setMethod('cc')">Credit card</button>
  <button type="button" v-on:click="setMethod('paypal')">Paypal</button>
  <input type="text" name="paymentMethod" required v-model="selectedMethod">
</form>

Javascript:

new Vue({
  el: "#app",

  data: {
    selectedMethod: null,
  },

  methods: {

    // Set payment
    setMethod: function(type) {
      this.selectedMethod = type; // Here I fill the field
      this.$refs.form.submit(); // Then I submit the form
    },
  }

});
Fred K
  • 13,249
  • 14
  • 78
  • 103

1 Answers1

4

Try using Vue's nextTick method to defer your form post until after the DOM has been updated:

  if (type == 'paypal'){
    var me = this;
    Vue.nextTick(function() {
        me.$refs.form.submit();
    });
  }
tony19
  • 125,647
  • 18
  • 229
  • 307
PatrickSteele
  • 14,489
  • 2
  • 51
  • 54
  • I just removed the readonly attribute but the problem persists. I updated the question to make it more clear. – Fred K Nov 03 '17 at 17:49
  • Thanks Patrick! I suggest you to remove the first part of your answer because it's wrong => https://stackoverflow.com/a/16438237/1252920 – Fred K Nov 03 '17 at 20:03