Thursday, May 30, 2024
LaravelLaravl 5.7VueJs

Vue Laravel Tutorial Part 6 – Form Submission

Vue Laravel Tutorial Part 6 – Form Submission - The Rich Post

Hello to all, welcome to In this post, I will continue with Vue Laravel Tutorial Part 6 – Form Submission.

Form Submission is the very important part of every website for collecting user data.

Vue Laravel Tutorial Part 6 – Form Submission

In this, I have used Vue- Axios Form Submission.  Axios is use or display data.

With the default integration of Vue in laravel, things look easy and we will not face any problem related to cons like other.

Axios for get data:
axios .get('url') .then(response => ( = response)) 
Axios for post data:
axios .post('url') .then(response => ( = response)) 
Now come to the point:

First before start this tutorial, you need to check old Vue laravel Tutorial Series must.

One thing must say, To understand this post, you need to see 
past Vue Laravel Tutorials Posts and here are the links:


Here is the working and tested code, you need to follow:


1. Very first, you need to update your resources\js\components\adduser.vue file:

I have used axios post in it for submission the form and you need to just update this code with last code.

        <h2>Add User</h2>
        <p v-if="errors.length">
            <b>Please correct the following error(s):</b>
              <li v-for="error in errors">{{ error }}</li>
          <form @submit="checkForm" id="createAdministrator">
            <div class="form-group">
              <label for="email">Email:</label>
              <input v-model="email" type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
            <button type="submit" class="btn btn-default">Submit</button>

    export default {
        mounted() {
            console.log('Component mounted.')
        data() {
        return {
            errors: [],
            state: {
                email: ''
    checkForm: function (e) {
      this.errors = [];

      if (! {
        this.errors.push('Email required.');
    var formContents = jQuery("#createAdministrator").serialize();
 '/admin', formContents).then(function(response, status, request) {
                }, function() {



 2. Second, you need to make new controller file  AdminController.php in app\Http\Controllers folder and add below code into it:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AdminController extends Controller
     public function store(Request $request)
    //here you can insert query, I have just added json data to confirm that code is working fine
    	return json_encode("Record Updated Succeessfully");


3. Now, you need to add below code into your routes/web.php file:
Route::post('/admin', 'AdminController@store');

 That is it, after submit the form, you will get an alert message “Record Updated Successfully”.

form submission data

This is just example working, if you want go deeply or If you have any query related to this post, then please do comment or ask question.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.