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

Posted 2023-05-09

【中文标题】使用 jQuery 在同一模式中创建和更新表单

【英文标题】：Create and update form in a same modal using jQuery

【发布时间】：2021-08-20 05:16:04

【问题描述】：

我有一个共享相同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>

如果需要，成分的模态 HTML：-

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

【问题讨论】：

嗨，也显示 html。另外，if I change the value inside manually, it will update the value.. 是什么意思？

嗨@Swati，已经添加了 HTML 并更正了我的句子。谢谢你

【参考方案1】：

当您的模态接近时，您可以在 jquery 中编写 event，并且在其中您可以清空所有值，即：选择和输入。因此，您的代码将如下所示：

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

【讨论】：

对不起，我应该把这段代码放在哪里？ setRestaurantId 函数还是 setIngredientsId 函数？ ://

不，这是单独的事件，请将其添加到您的 <script></script> 标记中。

这应该可以。或者，将这个$("#modal-new-ingredients").find("input,select").val("") 行放在function setRestaurantId(id) 函数中，看看是否清除了值。另外，我的答案是working code [在输入中键入并更改选择值，然后关闭模式并再次打开]

场景：- 1.如果我点击添加按钮，它将显示添加模式。 （（正确）） 2.然后点击编辑成分，会显示如上图的编辑模式。 （（正确）） 3. 然后如果我再次单击添加按钮，它将显示编辑模式而不是添加模式。你能看到这里的问题吗...如果我刚才的解释让您感到困惑，我很抱歉...

如果您使用相同的型号，您需要全部重置，即：更改标题$('#modal-title-new-ingredients').html("Add Ingredient") 并清除setRestaurantId 中的所有值。目前，您只是更改值和设置标题以进行编辑。

【参考方案2】：

非常感谢斯瓦蒂帮助我！如果有人需要，这是最终答案:)

把这个放在我的setRestaurantId函数里面：-

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

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