使用 jQuery 在同一模态中创建和更新表单

Question

我有一个共享相同 data-target 的模态框。如果我点击 edit 按钮，然后关闭并点击 add 按钮，模态将显示编辑模态而不是添加模态。如何更改表格？

添加按钮：-

<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-new-ingredients" onClick=(setRestaurantId({{ $restorant_id }}))>{{ __('Add') }}</button>

编辑按钮：-

<button type="button" class="dropdown-item" data-toggle="modal" data-target="#modal-new-ingredients" onClick=(setIngredientsId({{ $bom->id }}))>Edit</button>

setRestaurantId 函数:-

function setRestaurantId(id){
        $('#res_id').val(id);
        // $('#form')[0].reset();
        // $('#ingredients').trigger('change');
        $('#modal-title-new-ingredients').html("Add Ingredient")
        $('#ingredients').val("");
        $('#consumption').val("");

    }

setIngredientsId 函数:-

function setIngredientsId(id){

        ingredients.forEach(element => {

            if(element.id==id){
                console.log('hello', element.raw_material)
                $('#modal-title-new-ingredients').html("Edit Ingredient")
                $('#bom_id').val(element.id);
                $('#ingredients').val(element.raw_material_id);
                $('#consumption').val(element.quantity);
                $('#ingredients').trigger('change');
            }
        });
    }

HTML:-

<form role="form" method="post" action="{{ route('bom.store', $item->id) }}" enctype="multipart/form-data" id="form">
   @csrf

   <div class="form-group">
      <label class="form-control-label" id="form-ingredients" for="ingredients">{{ __('Ingredients') }}</label>
         <select class="noselecttwo form-control" name="ingredients" id="ingredients" required>
              <option disabled selected value> -- Select a Ingredient -- </option>
              @foreach ($ingredients as $ingredient)
                  <option id="var{{$ingredient->id}}" value="{{$ingredient->id}}">{{ $ingredient->name.' - '. $ingredient->rawMaterialUnit->name}}</option>
              @endforeach
         </select>
    </div>

    <div class="form-group">
      <label class="form-control-label" for="consumption">{{ __('Consumption') }}</label>
      <input type="number" step="any" name="consumption" id="consumption" class="form-control" placeholder="{{ __('Consumption') }}" value="" required>
    </div>

    @include('partials.input',['type'=>"hidden",'name'=>'bom_id','id'=>'bom_id','required'=>false,'placeholder'=>'id'])


    <div class="text-center">
     <button type="submit" class="btn btn-primary my-4">{{ __('Save') }}</button>
    </div>
</form>

Modal HTML 成分（如果需要）：-

<div class="modal fade" id="modal-new-ingredients" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">

Answer 1

你可以在 jquery 中写入 event 当你的模式关闭时，你可以在其中清空所有值，即：select 和输入。所以，您的代码将如下所示：

 $("#modal-new-ingredients").on('hidden.bs.modal', function(){
    console.log('modal close...');
    $("#modal-new-ingredients").find("input,select").val("")//empty
  });

Answer 2

非常感谢 Swati 帮助我！如果有人需要的话，这是最后的答案:)

将其放入我的 setRestaurantId 函数中：-

$('#modal-title-new-ingredients').html("Add new ingredient")
$('#bom_id').val("");
$('#ingredients').val("");
$('#consumption').val("");
$('#ingredients').trigger('change');

ID 也是必需的，因为我在控制器中的更新也会发送 ID 以进行更新。

使用 jQuery 在同一模态中创建和更新表单

Create and update form in a same modal using jQuery

html

javascript

forms

jquery

modal-dialog