Jquery and Laravel Integration

Question

I need your idea and tips on how can I make this form work. I am trying to create a rating for each candidates in each categories and each categories have 5 criteria. What I have did is to fetch the criteria dynamically in the database and display it with a input box. Now my problem is how can I save this is the database together with is criteria id as well as the score of each criteria.. Here is my code

    <form class="form-horizontal" role="form">
                  {{ csrf_field() }}
                    <div class="form-group col-sm-8" >
                    <input type="hidden"  id="canId" name="canId">
                    <input type="hidden"  id="catId" name="catId">
                    <input type="hidden"  id="judgeId" name="judgeId">
                    @foreach($dataCriteria as $Criteria)
                      <label class="col-sm-9" for="id">{{$Criteria->cri_name}}</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" id="cri_{{$Criteria->id}}" name="cri_{{$Criteria->id}}" data-crid ="{{$Criteria->id}}" placeholder="1-10" required><br>
                      </div>    
                    @endforeach    

                    </div>
                      <div class="col-sm-4">
                      <img src="{{ asset('img/girl.jpeg') }}" alt="">
                      <h4 class="canfname text-center"></h4>
                      <p class="text-center"><em class="canbrgy"></em></p>
                      </div></form>

and here is my ajax code but this is lacking for the input of the criteria.

$.ajax({
          type: 'post',
          url: 'candidates/rateCandidates',
          data: {
            '_token': $('input[name=_token]').val(),
            'canId': $('input[name=canId]').val(),
            'catId': $('input[name=catId]').val(),
            'judgeId': $('input[name=judgeId]').val()
          },
          success: function(data) {
            window.location.reload();  
            }
      });

Please help me... Thank you

Answer 1

First you need to serialize form fields:

var serializedData = $(".form-horizontal").serialize();

And send Ajax request with following structure:

$.ajax({
    url: URL,
    type: "POST",
    dataType: 'json',
    data: serializedData,
    success: function(data){
    }
});

With this approach you are ensure that all form data posted like a regular form.

I did this approach for login/register/forget password ajax requests.

if you have external data that want to send to the controller add a hidden field to your form like this:

<form class="form-horizontal" role="form">
    ...
    <input type="hidden"  id="extraDataField" name="extraDataField" value="{{$sampleVariable}}"/>
</form>

now when you serialize data extraDataField will append to your form and you will receive in the controller when you post data

Answer 2

You can use jquery validate to submit form. I can give you a head start, see example below:

 jQuery("#project_pages_form").validate({
        submitHandler: function (form) {
          //  showLoader('Working on your request<br /> It may take a while depending on the content.');
            //form.submit();
           var formData = new FormData(form);
            $.ajax({
                url: '{{ url("publishProjectPages") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                cache: false,
                dataType: 'JSON',
                success: function (json) {
                    showLoader('successful');

                },
                error: function (xhr, textStatus, errorThrown) {
                    toastr.clear();
                    toastr.error('Could not proceed your request. Please refresh the web page and try again.');

                }
            });


        }
        }); 

In your controller you can return response like this:

public function publishProjectPages (Request $request)
{
    $response = array();

    $pages = $request->pagesChecks;

        $response['code'] = 204;
        $response['status'] = true;
        $response['message'] = 'success';

    return response()->json($response);

}

If you will submit your form like the method above, everything in the form will be submitted automatically.

You can explore it further for validation and form submit handler.