noblemfd
1 month ago
130
4
Laravel

no record saved in multiple records insertion with dynamically created input fields

Posted 1 month ago by noblemfd

I want to save the multiple data to database. With the aid of Select option dropdownlist, User can dynamically add input fields and finally click submit button to save data in database. The value in the select option will determine the number of field rows to be generated.

public $rating_points = [
"1" => "Three-Star-Rating",
"2" => "Four-Star-Rating",
"3" => "Five-Star-Rating",
"4" => "Six-Star-Rating",
"5" => "Seven-Star-Rating",
];

public function create()
{
  return view('appraisal.ratings.create')->with('rating_points', $this->rating_points);
}

public function store(StoreRatingRequest $request)
{

        for($idx=0; $idx<= count($input['rating_type']); $idx++)
        {
            $rating = new AppraisalRating;
            $rating->rating_point           =       $ratingpoints;
            $rating->rating_type            =       $ratingtypes[$idx];
            $rating->rating_value           =       $ratingvalues[$idx];
            $rating->rating_description     =       $ratingdescriptions[$idx];
            $rating->company_id             =       Auth::user()->company_id;
            $rating->created_by             =       Auth::user()->id;
            $rating->created_at             =       date("Y-m-d H:i:s");
            $rating->is_active_id           =       1;
            $rating->save();
        }

    Session::flash('success', 'Appraisal Rating is created successfully');
    return redirect()->route('appraisal.ratings.index');
}

view

<div class="card-body">
   <form  action="{{route('appraisal.ratings.store')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
       {{csrf_field()}}
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label for="rating-point" class="col-4 col-form-label"> Rating Point<span style="color:red;">*</span></label>
                                    <div class="col-md-6 controls">
                                        <select id='rating-point' class="form-control select2" data-placeholder="Choose Rating Value" tabindex="1" name="rating_point">
                                            <option value="">Select Rating Point</option>
                                            @foreach($rating_points as $k => $rating_point)
                                                <option value="{{$k}}" @if(old("rating_point") == "$k") selected @endif>{{$rating_point}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>  
                        </div>

                    <div class="row" id="rating-data"></div>
                </div>
      
        <div id="rating-button" style="display: none;">
            &nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-primary">{{ trans('global.save') }}</button>
            <button type="button" onclick="window.location.href='{{route('appraisal.ratings.index')}}'" class="btn btn-default">Cancel</button>
        </div>
    </form>
</div> 
@endsection

@section('javascript')
<!-- jQuery -->
<script src="{{ asset('theme/adminlte3/plugins/jquery/jquery.min.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('theme/adminlte3/plugins/jquery-ui/jquery-ui.min.js') }}"></script>


<script>
$(document).ready(function($){
$('#rating-point').on('change', function() {
 $('#rating-data').html('');

  if ( this.value == '1')
  {
    var numInputs = '3';
     for(var i=0; i < numInputs; i++)
     {
         var j = i*1+1;
         var $section =  $('<div class="col-md-4"><div class="form-group row"><label class="control-label text-right col-md-3">Type<span style="color:red;">*</span></label><div class="col-md-9 controls"><input  type="text" name="rating_type" value="'+j+'" class="form-control" value="{{old('rating_type')}}" readonly></div></div></div><div class="col-md-4"><div class="form-group row"><label class="control-label text-right col-md-3">Value<span style="color:red;">*</span></label><div class="col-md-9 controls"><input  type="number" name="rating_value" placeholder="Rating Value" class="form-control" value="{{old('rating_value')}}"></div></div></div><div class="col-md-4"><div class="form-group row"><label class="control-label text-right col-md-3">Description<span style="color:red;">*</span></label><div class="col-md-9 controls"><input  type="text" name="rating_description" placeholder="Enter rating description here" class="form-control" value="{{old('rating_description')}}"></div></div></div>');
         $('#rating-data').append($section);
     }           
    $("#rating-button").show();
  }
  else if ( this.value == '2')
  {
    var numInputs = '4';
     for(var i=0; i < numInputs; i++)
     {
         var j = i*1+1;
         var $section =  $('<div class="col-md-4"><div class="form-group row"><label class="control-label text-right col-md-3">Type<span style="color:red;">*</span></label><div class="col-md-9 controls"><input  type="text" name="rating_type" value="'+j+'" class="form-control" value="{{old('rating_type')}}" readonly></div></div></div><div class="col-md-4"><div class="form-group row"><label class="control-label text-right col-md-3">Value<span style="color:red;">*</span></label><div class="col-md-9 controls"><input  type="number" name="rating_value" placeholder="Rating Value" class="form-control" value="{{old('rating_value')}}"></div></div></div><div class="col-md-4"><div class="form-group row"><label class="control-label text-right col-md-3">Description<span style="color:red;">*</span></label><div class="col-md-9 controls"><input  type="text" name="rating_description" placeholder="Enter rating description here" class="form-control" value="{{old('rating_description')}}"></div></div></div>');
         $('#rating-data').append($section);
     } 
    $("#rating-button").show();
  }
  else
  {
    $("#rating-button").hide();
  }
 });
});
</script>
 @stop

When I clicked on submit button, I expected the data to be saved into the database and the page redirect to index.blade. The page only redirect to index page and no record is saved.

How do I resolve this.

Thank you.

Please sign in or create an account to participate in this conversation.