q-form not submitting the form



  • Hi i have requriement the form redirect to 3rd party payment gateway endpoint with post data . However my below code does not submit.

    <q-form
         id="app"
         @submit="submitPayment"
         action="https://redirect-browser-here-with-form-data"
         method="post"
         ref="form"
       >
         <p>
           <q-input id="name" v-model="name" type="text" name="name" />
         </p>
    
         <p>
           <q-btn type="submit" value="Submit" />
         </p>
       </q-form>
    
    submitPayment: function() {      this.$refs.form.submit(); }
    

    I am using v17 on ubuntu. I can see submit even fired in vue dev tools but the browser does not redirect to 3rd party url
    Can anyone suggest what is wrong here?



  • Are you using v17 of Quasar? So, 0.17? If so, there is no such thing as q-form in v17.

    Also, if that is your code, where are your script tags and the rest of your SFC code?

    Scott



  • @s-molinari its 1.5.5 (sorry about the type)

    as far as SFC is concerned, i only added the relavant portion of the code ie q-form and submit method. here is how my SFC looks like

    <template>
     <q-page padding>
    
       <q-form
         id="redirectForm"
         action="https://test.cashfree.com/billpay/checkout/post/submit"
         method="post"
         ref="paymentform"
         @submit.once="submitPayment"
       >
         
         <q-input type="hidden" name="customerName" value="John" />
         <q-input type="hidden" name="customerEmail" value="Johndoe@test.com" />
         <q-input type="hidden" name="customerPhone" value="9999999999" />
        
        
    
         <p>
           <q-btn value="Submit" type1="submit" type="submit" />
         </p>
       </q-form>
     </q-page>
    </template>
    
    <script>
    export default {
     data() {
       return {
         name: null
       };
     },
     // name: 'PageName',
     methods: {
       submitPayment: function(e) {
         console.log("submitting");
         e.preventDefault();
         this.$refs.paymentform.submit();
       }
     }
    };
    </script>
    
    

    Below is what is see in my vue developer tool

    0bff3edc-fc18-4e52-af9b-6cc41992c680-image.png



  • hi i got this working with

    this.$refs.paymentform.$el.submit();
    
    

    as mentioned in this thread
    https://forum.quasar-framework.org/topic/4547/error-after-upgrade-to-latest-version-for-triggering-qbtn-on-enter


Log in to reply