Send HTML form action POST requests from Javascript with Vue-post

Vue-post is a Vuejs plugin which makes it possible to send HTML form action POST requests directly from Javascript or any HTML element.

HTML Form submissions are not secure as they expose credentials. This will help to secure payment integrations to a great extent.

It’s use cases will be payment integrations like Paytm which need an HTML form submission on their payment gateway URL for payment

INFO:

Table of Contents

• vue-post
• Features
• Compatibility
• Installation
• Usage
  • From Instance Method
  • From HTML Element
• Notes

Features

• Send HTML form action POST request from vue instance method.
• Send HTML form action POST request from any HTML element.

Compatibility

• Vuejs v2.0 and above

Installation

From npm

npm install vue-post --save

Usage

import it

import vuePost from "vue-post"

Use as a plugin

Vue.use(vuePost)

After this we have access to global instance method post as this.post inside .vue files and global vue component Post inside .vue files.

From Instance Method

The instance method post takes 3 parameters.

• action: the action URL of your form
• target: window of action (expected: _self, _blank)
• params: a json object of input values (See Notes)

/*any_component.vue*/

<template>
<!-- your HTML markup -->
<button @click="run">Post Form</button>
</template>
<script>
export default{
    //other code
    methods:{
        run(){
            this.post({
			action: the action URL of your form ,
			target: window of action (expected: _self, _blank),
			params: a json object of input values
            })
        }
    }

}
</script>

From HTML Element

We have access to global component Post which is a HTML a tag. It requires a single prop data which is a json object.

/*any_component.vue*/

<template>
<!-- your HTML markup -->
<Post :data="data"/>
</template>
<script>
export default{
    //other code
   data(){
   return{
   data:{
   	action: the action URL of your form ,
	target: window of action (expected: _self, _blank),
	params: a json object of input values
   }
}
}
</script>

Notes

The params parameter is an json object which contains the values of the input fields which are to be built and submitted inside a HTML form.

For the below implementation

this.post({
    action: "https://itatakimas.com",
    target:"_self",
    params:{
        NAME: "Zoro",
        EMAIL: "[email protected]",
    }
})

vue-post will build and submit the form as

<form action='https://itatakimas.com' target='_self' >
<input type='hidden' name='NAME' value='Zoro'/>
<input type='hidden' name='EMAIL' value='[email protected]'/>
</form>

For any help reach me 🕊twitter / 📧mail

Thank you!