August 28, 2020

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

Sambit Sahoo

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: MaintainabilityGitHub licenseNPMCodacy Badgecodebeat badge

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

Installation

From npm

shell
npm install vue-post --save

Usage

import it

javascript
import vuePost from "vue-post"

Use as a plugin

javascript
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)
html
/*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.

html
/*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

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

vue-post will build and submit the form as

html
<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!

Comments