Create Controller

Next, we will create two methods inside the controller first index method is used to display contact form and second store method is used to store data in the mysql database :

Note: If your primary key is not default id, then change in your Model:

protected $primaryKey = 'propId';
protected $guarded = [];

public function index()
    {
        $builder=Builder::orderBy('blId','desc')->paginate(200);
        return view('admin.builder.index', compact('builder'));
    }
 
public function store(Request $r)
    {
        $validator = Validator::make($r->all(), [
         'name'                 => 'required|unique:builders|max:255',
         'slug'                 => 'required|unique:builders|max:100',
         'keyword'              => 'required',
         'metatitle'            => 'required',
         'metadesc'             => 'required',
         'city'                 =>'required',
            // 'propertyImages.*'      => 'required|image|mimes:jpeg,png,jpg,gif|max:1000000',
     ],[
         'name.required'=>'Builder Name is Required',
         'slug.required'=>'Builder Slug is Required',
         'keyword.required'=>'Keyword Is Required',
         'metatitle.required'=>'Title is required',
         'metadesc.required'=>'Meta Description is Required',
         'city.required'  =>'Please Select city'
     ]);
        if ($validator->fails()){
            return response()->json(['status' =>0 , 'errors'=>$validator->messages()]);
        }else{
            $chr  = substr($r->bname, 0, 1);
            if( $r->hasFile('bllogo')){ 

                $thums               = $r->bllogo;
                $bllogo = uniqid($chr).'.'.$thums->getClientOriginalExtension();
                $img = Image::make($thums->getRealPath());
                $img->resize(300, null, function ($constraint) {
                    $constraint->aspectRatio();          
                });
                $thumbPath = public_path().'/builders_img/'.$bllogo;

                if (file_exists($thumbPath)) {
                    $this->removeImage($thumbPath);
                } 
                $img->save($thumbPath);
                $optimizerChain = OptimizerChainFactory::create();
                $optimizerChain->optimize($thumbPath);
                $bllogoimg = $bllogo;

            }else{
                $bllogoimg = NULL;
            }

            $builder=new Builder;
            $builder->name=$r->name;
            $builder->slug=Str::slug($r->slug, '-');
            $builder->title=$r->metatitle;
            $builder->meta_desc=$r->metadesc;
            $builder->keyword=$r->keyword;
            $builder->bldlogo=$bllogoimg;
            $builder->save();
            $builder->city()->sync($r->city);
            if ($builder->save()) {
               return response()->json(['data' => $builder, 'status'=>1, 'message' => 'success'], 200);
           } else {
               return response()->json(['success' => false, 'message' => 'error'], 422);
           }
         //return response()->json(['status'=>1], 201);
       }       
   }

In this step, we will create one blade file name create.blade.php.

In this ajax form, we will implement a jquery submit handler. first, we will validate form using jquery validation and second is to submit an ajax form using submit handler.

<div class="col-sm-12">
 @if ($errors->any())
  <div class="alert alert-danger">
    <ul id="blogErrors">
 	@foreach ($errors->all() as $error)
	   <li>{{ $error }}</li>
	@endforeach
   </ul>
  </div>
@endif
		</div>
<div class="col-sm-12">
      <form class="form-horizontal" id="builderForm" method="post" action="{{route('builders.store')}}" enctype="multipart/form-data">
        @csrf
        <div class="panel-group" id="accordion">
          <div class="panel panel-default-light">
            <div class="panel-heading">
              <div class="panel-title">
                <a href="#collapseOne" class="block" data-toggle="collapse" data-parent="#accordion" aria-expanded="true">
                  Builder Section
                </a>
              </div>
            </div><!-- /.panel-heading -->

            <div class="panel-collapse collapse in" id="collapseOne">
              <div class="panel-body">

                <div class="form-group m-bottom-10">
                  <label for="title" class="control-label col-sm-3">Select City: <span class="text-danger">*</span></label>
                  <div class="col-sm-9">
                    <select class="form-control" name="city[]" id="city" style="width: 100%;" multiple="">
                      <option value="0">Select City</option>
                      @forelse($city as $ct)
                      <option value="{{$ct->ctId}}">{{$ct->name}}</option>
                      @empty
                      @endforelse
                    </select>
                    <div id="city-error" class="help-block"></div>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group m-bottom-10">
                  <label for="name" class="control-label col-sm-3">Builder Name: <span class="text-danger">*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter Builder Name">
                    <div id="name-error" class="help-block"></div>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group m-bottom-10">
                  <label for="slug" class="control-label col-sm-3">Builder Slug: <span class="text-danger">*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="slug" name="slug" placeholder="Enter Slug">
                    <div id="slug-error" class="help-block"></div>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group m-bottom-10">
                  <label for="metatitle" class="control-label col-sm-3">Title: <span class="text-danger">*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="metatitle" name="metatitle" placeholder="Enter Title">
                    <div id="metatitle-error" class="help-block"></div>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group m-bottom-10">
                  <label for="metadesc" class="control-label col-sm-3">Description: <span class="text-danger">*</span></label>
                  <div class="col-sm-9">
                    <textarea class="form-control" rows="6" name="metadesc" autocomplete="off" id="metadesc" placeholder="Meta Description"></textarea>
                    <div id="metadesc-error" class="help-block"></div>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group m-bottom-10">
                  <label for="location" class="control-label col-sm-3">Keywords: <span class="text-danger">*</span></label>
                  <div class="col-sm-9">
                    <input type="text" data-role="tagsinput" class="form-control" id="keyword" name="keyword" placeholder="Enter Keywords">
                    <div id="keyword-error" class="help-block"></div>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group m-bottom-10">
                  <label for="location" class="control-label col-sm-3">Builder Logo: <span class="text-danger">*</span></label>
                  <div class="col-sm-9">
                    <input type="file" name="bllogo" id="bllogo">
                  </div>
                </div><!-- /.form-group -->
              </div>
            </div><!-- /.panel-collapse -->
          </div><!-- /.panel -->

        </div><!-- /.panel -->


        <div class="form-group">
          <div class="col-sm-12 text-right">
            <button type="button" class="btn btn-default">
              <i class="fa fa-undo"></i> Undo Changes
            </button>
            <button type="button"  class="btn btn-info builderFormSubmit">
              <i class="fa fa-check"></i> Save
            </button>
            <button type="button"  class="btn btn-info builderFormSubmit">
              <i class="fa fa-check"></i> Save &amp; Continue
            </button>
          </div><!-- /.col-sm-12 -->
        </div><!-- /.form-group -->
      </form><!-- /.form-horizontal -->
    </div><!-- /.col-sm-12 -->

Add Jquery Code:

$(()=>{
$('.builderFormSubmit').on('click', function(){	
  var dataString = new FormData($('form#builderForm')[0]);	
  var url = $('form#builderForm').prop('action');
  $.ajax({
    type:'POST',
    url: url,					
    data:dataString,
    dataType: 'JSON',
    cache: false,
    contentType: false,
    processData: false,
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}

  }).done(function(res) {
    $('.form-group').removeClass('has-error');
    $('.col-sm-9').removeClass('has-error');
    $('.col-sm-10').removeClass('has-error');
    $('.panel-default-light').removeClass('panel-error');

    if(res.status== 0){
      $.each(res.errors,function(i,f){				
        $('#'+i+'-error').parents(".panel-default-light").addClass("panel-error");
        $('#'+i+'-error').parents(".form-group").addClass("has-error");
        $('#'+i+'-error').text(f);

      });
      $('html, body').animate({ 
        scrollTop: ($('.panel-error').offset().top-70)
      },2000);
    }else{
      $('form#builderForm')[0].reset();
      window.location.href = "{{route('builders.index')}}";
    }
  })
  .fail(function(jqXHR, textStatus, status ) {
    $('.builderFormSubmit').prop('disabled',false);
    $('.builderFormSubmit').html('<i class="fa fa-check"></i> Save');
    $.each(jqXHR.responseText,function(i,f){
      $('.alert-danger').css('display','block');
      $('#blogErrors').append('<li>'+f+'</li>');
    });
  });
});
});