时间戳

首页 > 解决方案 > 单击按钮提交 2 个表单并将第 1 个表单的响应传递给第 2 个表单

javascript - 单击按钮提交 2 个表单并将第 1 个表单的响应传递给第 2 个表单

问题描述

我正在尝试单击一次提交 2 个表单。第一种形式仅包含文本框，第二种形式具有拖放区图像。现在，当第一个表单提交时，它应该返回并且我需要在提交时传递该 id 第二个表单，以便图像将针对该 id 保存在数据库中。文本框表单是由不知道如何获取 id 提交的，问题是以第二种形式保存图像

HTML 表单

         <div class="modal-body p0">
            <div id="" >
               <div class="max-wid">
                  <div class="pl-3 pr-3 mb-5 p0">
                     <div class="">
                        <div class=" f-column in">
                           <div class="">
                              <ul class="nav nav-tabs nav-border-producttab">
                                 <li class="nav-item ">
                                    <a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
                                 </li>
                              </ul>
                           </div>
                           <div class="">
                              <div >
                                 <div class=" mt-3">
                                    <div class="tab-content model-hit">
                                       <div id="add_new_products2" class="container tab-pane active">
                                          <br>
                                          <div class=" row">
                                             <div class="col-sm-6">
                                                <div class="col-sm-12 p-0 mrg_modal_produt">
                                                   <div class="col-sm-12 p-0 label_modal_product">
                                                      Product Documents
                                                      <div class="clearfix"></div>
                                                      <div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
                                                   </div>
                                                </div>
                                                <?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone')); ?>
                                                   <div id="preview-template" style="display: none;">
                                                      <div class="dz-preview dz-file-preview">
                                                         <div class="dz-image"><img data-dz-thumbnail /></div>

                                                         <div class="dz-file-type">
                                                            <br />
                                                            <select name="file_type" class="dz-file-type-select">
                                                               <option value="">Select File Type</option>
                                                               <option value="datasheet_file">Datasheet</option>
                                                               <option value="cad_file">CAD file</option>
                                                               <option value="bim_file">BIM file</option>
                                                            </select>
                                                         </div>
                                                      </div>
                                                   </div>
                                                   <input type="submit" class="btn btn-info" value="Save" id="save-product-files-submit" style="display:none;">
                                                </form>
                                             </div>

                                             <?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
                                             <div class="col-sm-12">
                                                <div class="col-sm-12 p-0 mrg_modal_produt">
                                                   <input name="name" type="text" class="form-control input_product_modal" value="Product Name">
                                                   <input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
                                                   <select name="division" id="division" class="form-control input_product_modal">
                                                      <option>MasterFormat Division</option>
                                                      @foreach ($division_list as $item)
                                                   <option value="{{$item->id}}">{{$item->name}}</option>
                                                      @endforeach
                                                   </select>
                                                   <select name="section" id="section" class="form-control input_product_modal">

                                                   </select>
                                                   <textarea name="" class="form-control input_product_modal" cols="" rows="">Product Description (copy and paste from manufactures information)</textarea>
                                                   <input name="" type="text" class="form-control input_product_modal" value="LEED data">
                                                   <input name="website" type="text" class="form-control input_product_modal" value="Link to product website">
                                                   <input name="video_file" type="text" class="form-control input_product_modal" value="Link to Product Video (YouTube or Vimeo)">
                                                   <input name="bim_file_url" type="text" class="form-control input_product_modal" value="Link to BIM file">
                                                   <input name="" type="text" class="form-control input_product_modal" value="Link to AIA learning unit course">
                                                </div>
                                             </div>
                                             <input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:none;">
                                          </form>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
            <input type="button" class="btn-bg1"  id="save-product-form" value="Add to Project">
         </div>
      </div>

脚本

<script>
      Dropzone.options.productFileForm = {
              dictDefaultMessage: 'Drag and Drop (tap to search for a file)',
              autoProcessQueue: false,
              previewTemplate: document.getElementById('preview-template').innerHTML,
              addRemoveLinks: true,
              init: function() {
                  var myDropzone = this;

                  $('#save-product-form').click(function (){
                      $('#save-product-form-submit').click();
                      $('#save-product-files-submit').click();
                  });
}
}

      </script>

这条路线工作正常architecture-product-save，但不知道如何从控制器获取 id 并传递给architecture-product-file-save

控制器

public function ArchitectureProductSave(Request $request){

    $architecture = Manufacturer::where('user_id', Auth::user()->id)->get()->first();

    $lastRecordSeq = DB::table('products')
                                ->where('manufacturer_id',$architecture->id)
                                ->where('section_id',Input::get('section_id'))
                                ->orderBy('sequence_id','desc')
                                ->first();
    if(!empty($lastRecordSeq))
    {
        $sequenceId = $lastRecordSeq->sequence_id;
        $sequenceId = $sequenceId + 1;
    }
    else
    {
        $sequenceId = 1;
    }

    $product = new Product;
        $product->name = Input::get('name');
        $product->description = Input::get('description');
        $product->manufacturer_id = $architecture->id;
        $product->division_id = Input::get('division');
        $product->section_id = Input::get('section');
        $product->sequence_id = $sequenceId;
        $productVideoFile = Input::get('video_file');
        $productVideFileArr = explode('&', $productVideoFile);
        if(empty($productVideFileArr)){
            $product->video_file = Input::get('video_file');
        }else{
            $product->video_file = $productVideFileArr[0];
        }

        $product->cad_file_url = Input::get('cad_file_url');
        $product->bim_file_url = Input::get('bim_file_url');              
        $product->website = Input::get('website');

        if ($product->save())
    {
            $msg = $product->id;
            return response()->json([
                'message' => $msg
                    ], 200);
        }
    }

public function ArchitectProductFileUpdate($id, Request $request) {
dd($request)}

错误：传递给 App\Modules\Manufacturer\Controllers\ProjectController::ArchitectProductFileUpdate() 的参数 2 必须是 Illuminate\Http\Request 的实例，没有给出

标签： javascriptjqueryajaxlaraveldropzone

解决方案

根据我的理解，首先您提交第一个表单，该表单将数据插入数据库并生成 ID，并且您在第二个表单提交中需要此 ID。如果是这样，那么您可以这样做：

  1. 从 ajax 提交第一个表单后，您需要返回 ID 作为响应。然后将其存储在第二种形式的html中。喜欢：

输入类型="hidden" id="ffid" name="first_form_id" value="">

脚本代码：

$("#ffid").val(response.ID)// response.ID is response from first form submission.
  1. 现在您只需要以第二种形式获取并发送此 ID。

我希望这个想法会对你有所帮助。

/*************编辑 V1 *******************/ 

$('#save-product-form').click(function (){
$('#save-product-form-submit').click();
 $('#save-product-form-submit').click(function(response){
    alert(response);//let see id is coming or not

 }); 
 $('#save-product-files-submit').click(); 
})


</script>

推荐阅读