使用 Laravel 和 AJAX 根据另一个输入的值显示其他输入

Posted 2023-05-08

【中文标题】使用 Laravel 和 AJAX 根据另一个输入的值显示其他输入

【英文标题】：Display other inputs based on the value of another input using Laravel and AJAX

【发布时间】：2021-08-21 12:21:39

【问题描述】：

我是 Laravel 的初学者，我正在尝试创建一个表单并将其提交到数据库。

我设法使用以下代码将数据保存到数据库中。

我的刀片：

    <form id="castingform" method="post" action="castingss"   enctype="multipart/form-data">
           
         csrf_field() 
        <input type="hidden" id="id_hidden" name="id" />
        <div class="form-row">
           <div class="form-group col-md-6">
              <label for="casting_name">Nom</label>
              <input type="text" class="form-control" id="casting_name" name="casting_name" placeholder="Nom" >
              <span class="text-danger"> $errors->first('casting_name') </span>
           </div>
           <div class="form-group col-md-6">
              <label for="casting_cin">CIN</label>
              <input type="text" class="form-control" id="casting_cin" name="casting_cin" placeholder="Cin">
              <span class="text-danger"> $errors->first('casting_cin') </span>
           </div>
           </div>
         <div class="form-row">
           <div class="form-group col-md-6">
              <label for="casting_email">Email</label>
              <input type="text" class="form-control" id="casting_email" name="casting_email"  placeholder="Email">
              <span class="text-danger"> $errors->first('casting_email') </span>
           </div>
           <div class="form-group col-md-6">
              <label for="casting_phone">Téléphone</label>
              <input type="tel" class="form-control" id="casting_phone" name="casting_phone" placeholder="Téléphone">
              <span class="text-danger"> $errors->first('casting_phone') </span>
           </div>
         </div>
         <div class="form-row">
           <div class="form-group col-md-6">
              <label for="casting_age">Age</label>
              <input type="number" class="form-control" id="casting_age" name="casting_age" placeholder="Age">
              <span class="text-danger"> $errors->first('casting_age') </span>
           </div>
           <div class="form-group col-md-6">
              <label for="casting_sexe">Sexe</label>
              <div class="custom-control custom-radio">
                <input type="radio"  name="casting_sexe"  id="casting_sexeh" class="custom-control-input" value="homme">
                <label class="custom-control-label" for="casting_sexeh">Homme</label>
              </div>
              <div class="custom-control custom-radio">
                  <input type="radio"  name="casting_sexe" id="casting_sexef" class="custom-control-input"  value="femme">
                  <label class="custom-control-label" for="casting_sexef" >Femme</label>
              </div>
           </div>
         </div>        
         <div class="form-row">
           <div class="form-group col-md-6">
             <label for="casting_city">City</label>
             <input type="text" class="form-control" name="casting_city" id="casting_city">
             <span class="text-danger"> $errors->first('casting_city') </span>
           </div>
           <div class="form-group col-md-6">
             <label for="casting_address">Address 2</label>
             <input type="text" class="form-control" id="casting_address" name="casting_address" >
             <span class="text-danger"> $errors->first('casting_address') </span>  
           </div>
         </div>
         <div class="input-group mb-3">
            <div class="input-group-prepend">
               <span class="input-group-text">Upload</span>
            </div>
            <div class="custom-file">
               <input type="file" name="casting_photo" class="custom-file-input" id="casting_photo">
               <label class="custom-file-label" for="casting_photo">Choose file</label>
            </div>
         </div>
        <div class=" col-md-6">
          <span id="store_image" text-align: center></span>
        </div>
         </br> </br>  </br>  </br>   </br>
         <span class="result"></span>
        <div class="form-group" align="center">
          <input type="hidden" name="action" id="action" />
          <input type="hidden" name="hidden_id" id="hidden_id" />
          <input type="submit" name="action_button" id="action_button" class="btn btn-warning" value="ADD" />
        </div>
        <div class=" col-md-6">
          <span id="form_result"></span>
        </div>
     </form>
<!--------------------- script---------------------
<script type="text/javascript">
  $(document).ready(function()
    $('#castingform').on('submit', function(event)
  event.preventDefault();
  if($('#action').val() == 'Add')
  
   $.ajax(
    url:" route('castingss.store') ",
    method:"POST",
    data: new FormData(this),
    dataSrc: "",
    contentType: false,
    cache:false,
    processData: false,
    dataType:"json",
    success:function(data)
    
     var html = '';
     if(data.errors)
     
      html = '<div class="alert alert-danger">';
      for(var count = 0; count < data.errors.length; count++)
      
       html += '<p>' + data.errors[count] + '</p>';
      
      html += '</div>';
     
     if(data.success)
     
      alert('je suis là');
      html = '<div class="alert alert-success">' + data.success + '</div>';
      $('#sample_form')[0].reset();
      $('#datatableRows').DataTable().ajax.reload();
     
     $('#form_result').html(html);
    
   )
  
);
);
</script>

我的控制器：

public function store(Request $request)


      $rules = array(

         'casting_name' => 'required',
         'casting_cin' => 'required|max:8|unique:castings',
         'casting_email' => 'required|email|unique:castings',
         'casting_phone' => 'required',
         'casting_age' => 'required',
         'casting_sexe' => 'required',
         'casting_city' => 'required',
         'casting_address' => 'required',
         'casting_photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
            
             );

                    $error = Validator::make($request->all(), $rules);

                    if($error->fails())
                    
                        return response()->json(['errors' => $error->errors()->all()]);
                    

                    $image = $request->file('casting_photo');

                    $new_name = rand() . '.' . $image->getClientOriginalExtension();

                    $image->move(public_path('castingimages'), $new_name);

                    $form_data = array(
                        'casting_name'        =>  $request->casting_name,
                        'casting_cin'         =>  $request->casting_cin,
                         'casting_email'        =>  $request->casting_email,
                        'casting_phone'         =>  $request->casting_phone,
                         'casting_age'        =>  $request->casting_age,
                        'casting_sexe'         =>  $request->casting_sexe,
                         'casting_city'        =>  $request->casting_city,
                        'casting_address'         =>  $request->casting_address,
                        'casting_photo'             =>  $new_name
                    );

                    Casting::create($form_data);

                    return response()->json(['success' => 'Data Added successfully.']);      
    

对我来说一切都很好，但现在我想在我的表单中添加其他内容。 我想根据输入年龄的值来显示其他输入。 这意味着如果年龄小于 18 岁，则必须显示另外两个输入，一个用于担保人的姓名，另一个用于担保人的识别号，并且年龄与姓名和标识符一起记录在数据库中担保人，如果年龄超过18岁，我们什么都不做，我们将18岁的数据记录在数据库中。

我怎么能这样做？如果您有任何想法，请给我指导以实现这一目标。

编辑

    <script type="text/javascript">
      $(document).ready(function()
        $('#castingform').on('submit', function(event)
      event.preventDefault();
 var castingAgeInput = document.getElementById('casting_age');
var guarantorContainer = document.querySelector('.js-guarantor-container');
var guarantorIdentificationNumberContainer = document.querySelector('.js-guarantor_identification_number-container');

castingAgeInput.addEventListener('change', function(evt) 
    if (+evt.target.value < 18) 
      guarantorContainer.removeAttribute('hidden');
      guarantorIdentificationNumberContainer.removeAttribute('hidden');
     else 
      guarantorContainer.setAttribute('hidden', true);
      guarantorIdentificationNumberContainer.setAttribute('hidden', true);
    
      if($('#action').val() == 'Add')
      
       $.ajax(
        url:" route('castingss.store') ",
        method:"POST",
        data: new FormData(this),
        dataSrc: "",
        contentType: false,
        cache:false,
        processData: false,
        dataType:"json",
        success:function(data)
        
         var html = '';
         if(data.errors)
         
          html = '<div class="alert alert-danger">';
          for(var count = 0; count < data.errors.length; count++)
          
           html += '<p>' + data.errors[count] + '</p>';
          
          html += '</div>';
         
         if(data.success)
         
          alert('je suis là');
          html = '<div class="alert alert-success">' + data.success + '</div>';
          $('#sample_form')[0].reset();
          $('#datatableRows').DataTable().ajax.reload();
         
         $('#form_result').html(html);
        
       )
      
    );
    );
    </script>

但它不起作用

【参考方案1】：

您只需添加这些字段 hidden 并切换它们的可见性：

var castingAgeInput = document.getElementById('casting_age');
var guarantorContainer = document.querySelector('.js-guarantor-container');
var guarantorIdentificationNumberContainer = document.querySelector('.js-guarantor_identification_number-container');

castingAgeInput.addEventListener('change', function(evt) 
    if (+evt.target.value < 18) 
      guarantorContainer.removeAttribute('hidden');
      guarantorIdentificationNumberContainer.removeAttribute('hidden');
     else 
      guarantorContainer.setAttribute('hidden', true);
      guarantorIdentificationNumberContainer.setAttribute('hidden', true);
    
);

<div class="form-group col-md-6">
    <label for="casting_age">Age</label>
    <input type="number" class="form-control" id="casting_age" name="casting_age" placeholder="Age">
    <span class="text-danger"> $errors->first('casting_age') </span>
</div>
<div class="form-group col-md-6 js-guarantor-container" hidden>
    <label for="guarantor">Guarantor</label>
    <input type="number" class="form-control" id="guarantor" name="guarantor" placeholder="Guarantor">
    <span class="text-danger"> $errors->first('guarantor') </span>
</div>
<div class="form-group col-md-6 js-guarantor_identification_number-container" hidden>
    <label for="guarantor_identification_number">Guarantor identification number</label>
    <input type="number" class="form-control" id="guarantor_identification_number" name="guarantor_identification_number" placeholder="Age">
    <span class="text-danger"> $errors->first('guarantor_identification_number') </span>
</div>

【讨论】：

我有一个问题，我必须在控制器中做什么？

您还必须将 HTML 添加到刀片视图。控制器中的任何内容都无需更改。

它对我有用，谢谢，但如果年龄大于 18，我应该输入数据库名称和担保人的 ID

抱歉，我没听懂。