Create and update form in a same modal using jQuery

user_16082409 0
Viewed 836

I have a modal which share the same data-target. If I clicked the edit button, then close and click the add button, the modal will display the edit modal instead of add modal. How can I change the form?

Add button:-

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

Edit button:-

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

setRestaurantId function:-

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:-

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 for ingredients if needed:-

<div class="modal fade" id="modal-new-ingredients" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
modal-dialog forms html jquery javascript
2 Answers

You can write event in jquery when your modal gets close and inside this you can empty all values i.e : select and input. So , your code will look like below :

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

Big thanks to Swati for helping me out! Here's the final answer incase if someone need it :)

Put this inside my setRestaurantId function:-

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

ID is needed as well because my update in controller send the ID as well for updating.

user_160824090
Related