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

Note: Why could you use reload() with AJAX form submit? It is the against AJAX principle or basic feature! — SaidbakR
– SaidbakR, Commented Nov 1, 2017 at 9:03
For test, it is better as I think, in this case, to use console.log('Lorem') :) — SaidbakR
– SaidbakR, Commented Nov 1, 2017 at 10:26

Junaid Ahmad · Accepted Answer · 2017-11-01 09:00:22Z

1

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.

answered Nov 1, 2017 at 9:00

Junaid Ahmad

5991 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EasyWay Over a year ago

Majid Abbasi · Accepted Answer · 2017-11-01 10:55:57Z

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

edited Nov 1, 2017 at 10:55

answered Nov 1, 2017 at 8:59

Majid Abbasi

1,5313 gold badges12 silver badges22 bronze badges

4 Comments

EasyWay Over a year ago

but how can I get the value data-crid ="{{$Criteria->id}}" in the custom attributes? :(

Majid Abbasi Over a year ago

for these kind of fields you can add hidden field with special name and value

EasyWay Over a year ago

can you help how to extra the data of the serializedData in the Controller? :)

Majid Abbasi Over a year ago

i added new section to my answer, please check and let me know if there are another subject

Collectives™ on Stack Overflow

Jquery and Laravel Integration

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related