Question

我有一个带标签的模态表单。我使用AJAX提交表单，工作正常。我希望表单应该是公共的：如果用户没有登录，它应该显示登录，并在使用AJAX和Laravel登录后提交表单。

public function acServices()
{
$id = Auth::user()->id;
$post = new Ac_services_request  ;
$post->user_id = $id;
$post->services = Request::input('service');
$post->ac_type = Request::input('ac_type');
$post->type_services = Request::input('ac_services');
$post->no_of_ac = Request::input('no_of_ac');
$post->other_info = Request::input('other_info');
$post->address = Request::input('addr');
$post->landmark = Request::input('landmark');
$post->lga = Request::input('lga');
$post->specific_location = Request::input('specific_location');
$post->date = Request::input('date');
$post->time = Request::input('time');
$post->mobile = Request::input('');
$post->code = $string."".$id;

$post->save();
return 'success';
}



<div class="modal fade ac-services ativa-scroll" data-backdrop="static"  
  data-keyboard="false" id="ac-services" tabindex="-1" role="dialog">
     <div class="modal-dialog "  role="document">
        <div class="modal-content " >
         <button  type="button" class="close" data-dismiss="modal" aria-
     label="Close">
      <span style="color: white;" aria-hidden="true">&times;</span>
    </button>

  <form class="contact" >
  <div class="setup-content" id="step-1">

  <div class="form-group input-group col-md-9">
      <p>Select AC type</p>
   <select required="required" class="form-control lg" name="ac_type">

          <option></option>
           <option>Window AC(S)</option>
           <option>Split AC(S)</option>
            <option>Window AC(S) and Split AC(S)</option>
           </select>
     </div>
      <input type="hidden" name="service" value="A/C Repairs and Services">
      <div class="form-group input-group col-md-9">
       <p>Select type of service you need</p>
     <select required="required" class="form-control lg" name="ac_services">
        <option></option>
           <option>Installation of new AC</option>
           <option>General Cleaning</option>
           <option>Un-installation of existing AC</option>
           <option>Repairs (Diagnosis and rectification of AC(s)</option>
           </select>

         </div>   
        <button class="btn btn-primary nextBtn btn-lg pull-right" 
        type="button">Next</button>
          </div>
        <div class="row setup-content" id="step-2">

        <div class="form-group input-group col-md-9">
             <p>How many AC(s)</p>

      <input  type="number" required="required" class="form-control lg" 
      name="no_of_ac" placeholder="Enter Number of AC e.g 2" >
                 </div>
     <div class="form-group ">
           <p>Other Informations</p>
      <textarea required="required" rows="5" cols="65" name="other_info">
      </textarea>
      </div>
     <button class="btn btn-primary prevBtn btn-lg pull-left" 
      type="button">Back</button>
      <button class="btn btn-primary nextBtn btn-lg pull-right" 
      type="button">Next</button>

      </div>
      <div class="row setup-content" id="step-3">

      <div class="form-group input-group col-md-9">
      <p>Where do you need the services ?</p>

      <span>House/Flat No, Street, City</span>
      <input type="text" required="required" class="form-control lg" 
     name="addr">
     </div>

      <div class="form-group input-group col-md-9">
       <span>Landmark</span>
       <input type="text" required="required" class="form-control lg" 
        name="landmark">
         </div>

          <div class="form-group input-group col-md-9">
       <span>LGA</span>
       <input type="text" required="required" class="form-control lg" 
    name="lga" >
    </div>
     <div class="form-group input-group col-md-9">
     <span>Any other specific location direction/description?</span>
     <input type="text" required="required" class="form-control lg" 
       name="specific_location"><br>
      <span><b> Note: Accurate location helps us reach you promptly </b> 
    </span>
    </div>
   <input type="hidden" name="userid" value="1">

   <button class="btn btn-primary prevBtn btn-lg pull-left" 
    type="button">Back</button>
   <button class="btn btn-primary nextBtn btn-lg pull-right" 
   type="button">Next</button>
   </div>

   <div class="row setup-content" id="step-4">

     <div class="form-group input-group col-md-9">
   <p>Pick Date</p>
   <input type="date" required="required" class="form-control lg" 
   name="date">                  </div>
   <div class="form-group ">
   <p>Select Service Time</p>
                  <select required="required" class="form-control lg" name="time">
                  <option></option>
                    <option>10:00am - 11:00am</option>
                    <option>11:00am - 12:00pm</option>
                       <option>12:00pm - 1:00pm</option>
                        <option>1:00pm - 2:00pm</option>
                         <option>2:00pm -3:00pm</option>
                          <option>3:00pm - 4:00pm</option>
                           <option>4:00pm - 5:00pm</option>
                  </select> 
</div>
 <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Back</button>
<button class="btn btn-primary prevBtn btn-lg pull-right" id="submit" data-target=".success">submit</button>
</div>

  <script>
   $('#ac-services').on('hidden.bs.modal', function () {
   location.reload();
   })
   $(function() {
   $("button#submit").click(function(){

   $.ajax({
   url: 'ac-booked-service',
   type: "post",
   data: $('form.contact').serialize(),
   beforeSend: function() {                    
   $empty = $('form.contact').find("input").filter(function() {
    return this.value === "";
    });
   if($empty.length) {
   alert('Please fill all the field');
   return false;
   }else{
   return true;
   };
   },

  success: function (result) {
   window.location.replace('/user/dashboard');  

        },
        error: function(){
    alert("failure");
    }  
 });
 });
});
</script>

Answer 1

通过一些教程来了解这个概念可能对您有所帮助。

在身份验证后提交Laravel表单

1 个答案: