Amos
Amos

Reputation: 161

How to use HTML/Bootstrap 4 checkbox, radio buttons and select field in laravel 8 blade template

I'm working on a web app to register members online, I'm using Laravel 8 and Bootstrap 4, I'm a beginner in Laravel. The online form has text fields, a check box, radio buttons and a drop-down select field. I know how to work on blade template, controller and model to validate and post text field data into a MySQL database (see my sample code). But I'm not sure how checkbox, radio buttons and select field work in a blade template, in a controller and in the model. I would like all data in this form to be submitted together at once to a MySQL database.

I have checked online for some help and I haven't found an answer especially for new Laravel version 8. Please help, thank you.


Register Controller

class RegisterController extends Controller
{

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\Models\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }
}

User Model

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        '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',
    ];
}

Register Blade Template (Only a section of code)

<form method="POST" action="{{ route('register') }}">
            @csrf
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="surname">{{ __('Surname') }}</label>
                        <input type="text" class="form-control @error('surname') is-invalid @enderror" id="surname" placeholder="Surname" name="surname" value="{{ old('surname') }}" required autocomplete="surname">
                        @error('surname')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                    </div>
                    <div class="col-sm-4">
                        <label for="middle_name">{{ __('Middle Name') }}</label>
                        <input type="text" class="form-control @error('middle_name') is-invalid @enderror" id="middle_name" placeholder="Middle Name" name="middle_name" value="{{ old('middle_name') }}" required autocomplete="middle_name">
                        @error('middle_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                    </div>
                    <div class="col-sm-2">
                    <label style="padding-right:5px;">Gender</label>
                        <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="gender_male" value="male">
                        <label class="form-check-label" for="gender_male">Male</label>
                        </div>
                    </div>
                    
                    <div class="col-sm-2">
                       <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="gender_female" value="female">
                        <label class="form-check-label" for="gender_female">Female</label>
                        </div> 
                    </div>              
                </div>

                <div class="col-sm-4">
                <label class="mdb-main-label">County</label>
                    <select class="custom-select">
                          <option selected>Select County</option>
                                <option value="mombasa">001-Mombasa</option>
                                <option value="kwale">002-Kwale</option>
                                <option value="kilifi">003-Kilifi</option>
                                <option value="tana_river">004-Tana River</option>
                                <option value="lamu">005-Lamu</option>
                                </select>
                          </div>

Upvotes: 0

Views: 1869

Answers (1)

ORHAN ERDAY
ORHAN ERDAY

Reputation: 1076

  • Firstly your form tag is not closed and you should give a name to the select input you can get help with w3school.

  • So, to get started, you should define which model attributes you want to make mass assignable. You may do this using the $fillable property on the model. For example, let's make the name attribute of our Flight model mass assignable: And you need to use Mass Assignment

  • We need to use validate method in our controller, so you can Write The Validation Logic

  • You can use the create method to "save" a new model using a single PHP statement. The inserted model instance will be returned to you by the create method.

Upvotes: 2

Related Questions