How to autofill fields in laravel?

Question

I am trying to make the password of the user the same as the user id. What i don't want is to copy and paste the user id from the user id field into the password field. Instead, what i want to achieve is that as soon as i enter the user id, the same values get input into the password field. how can i achieve this? Below is my code:

Blade :

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-7">
                    <div class="card">
                        <div class="card-header">Add New User</div>
                        <div class="card-body">
                            {!! Form::open(['action'=>'AccountsController@store', 'method'=>'POST']) !!}
                            <div class="row form-group justify-content-center">
                                {{Form::label('name','Name',['class'=>'col-md-2'])}}
                                <div class="col-md-4">
                                    {{Form::text('name','',['class'=>'form-control', 'placeholder'=>'Name'])}}
                                </div>
                            </div>
                            <div class="row form-group justify-content-center">
                                {{Form::label('email','Email',['class'=>'col-md-2'])}}
                                <div class="col-md-4">
                                    {{Form::text('email','',['class'=>'form-control', 'placeholder'=>'Email'])}}
                                </div>
                            </div>
                            <div class="row form-group justify-content-center">
                                {{Form::label('userid','User I.D',['class'=>'col-md-2'])}}
                                <div class="col-md-4">
                                    {{Form::text('userid','',['class'=>'form-control', 'placeholder'=>'User I.D'])}}
                                </div>
                            </div>
                            <div class="row form-group justify-content-center">
                                {{Form::label('password','Password',['class'=>'col-md-2'])}}
                                <div class="col-md-4">
                                    {{Form::password('password',['class'=>'form-control', 'placeholder'=>'Password'])}}
                                </div>
                            </div>
                            <div class="row form-group justify-content-center">
                                {{Form::label('cpassword','Confirm Password',['class'=>'col-md-2'])}}
                                <div class="col-md-4">
                                    {{Form::password('cpassword',['class'=>'form-control', 'placeholder'=>'Confrim Password'])}}
                                </div>
                            </div>
                            <div class="row form-group justify-content-center">
                                {{Form::submit('Submit',['class'=>'btn btn-primary'])}}
                            </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

controller :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use App\Account;
use App\User;

class AccountsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        // $accounts = Account::all();
        $accounts = User::all();
        return view('accounts.create');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('accounts.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request,[
            'name'=>'required',
            'email'=>'required',
            'userid'=>'required',
            'password'=>'required'
        ]);

        // $account = new Account;
        $account = new User;
        $account->name = $request->input('name');
        $account->email = $request->input('email');
        $account->userid= $request->input('userid');
        $account->password = bcrypt($request->input('password'));
        $account->save();

        return redirect('/accounts')->with('success', 'User has been successfully added!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

model :

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email','userid', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

database :

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('userid')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Answer 1

To achive such a dynamic operation you need JavaScript and I suggest to use JQuery for this. Here you can read more about it.

So first add JQuery to your project as described here.

Then use this code to achieve your goal:

<script type="text/javascript">
$(document).ready( function() {
    $('#userid').on('change', function() {
        $('#password').val($(this).val());
    });
});
</script>

The code will listen for changes of the #userid element and then insert the value of it into the #password element.

The code needs to be on the same page as your form is.

If you're using jquery for further stuff I suggest to add those scripts by using the stacks mechanism of blade. It's described here. In my opinion this would be a bit better than entering the code directly in your view.