Jquery and Laravel Integration

Question

이 양식을 어떻게 만들 수 있을지에 대한 귀하의 아이디어와 조언이 필요합니다. 각 카테고리의 각 후보자에 대한 평가를 작성하려고하고 있으며 각 카테고리에는 5 가지 기준이 있습니다. 내가 한 것은 데이터베이스에서 기준을 동적으로 가져 와서 입력 상자와 함께 표시하는 것입니다. 이제 내 문제는 여기에 .. 나는이 함께 사용하여 데이터베이스를 각 기준의 점수뿐만 아니라 기준 ID입니다 절약 할 수있는 방법입니다 내 코드

<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> 

여기 내 아약스 코드 그러나 이것은을 위해 부족 기준의 입력.

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

을 그리고 다음과 같은 구조로 Ajax 요청을 보내 :

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

와 제발 도와주세요

$.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(); 
      } 
     }); 

은 ... 당신이 양식 필드를 직렬화 할 필요가 당신에게

Answer 1

먼저 감사 이 방법을 사용하면 모든 양식 데이터가 일반 양식처럼 게시되도록 할 수 있습니다.

나는 login/register/forget 패스워드 ajax 요청을 위해이 방법을 사용했다.

만약 당신이 컨트롤러에 보내려면 외부 데이터는 다음과 같이 양식에 숨겨진 필드를 추가 있습니다

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

을 이제 데이터 extraDataField이 양식에 추가됩니다 직렬화 할 때 당신은에 받게됩니다 컨트롤러를 게시 할 때

Answer 2

jquery validate를 사용하여 양식을 제출할 수 있습니다. , 위의 방법처럼 양식을 제출하면

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

    $pages = $request->pagesChecks; 

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

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

} 

모든 것을 :

이

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.'); 

       } 
      }); 


     } 
     }); 

컨트롤러에서이 같은 응답을 반환 할 수 있습니다 : 나는 아래 예를 들어, 당신에게 머리의 출발을 볼 수 있습니다 양식이 자동으로 제출됩니다.

유효성 검사 및 양식 제출 처리기에 대해 자세히 살펴볼 수 있습니다.