jQuery. Wait input values in modal Bootstrap

Question

I got a script that show modal bootstrap and get input values to operate with him. But my problem is that script dont stop the input values inserted by user.

MODAL:

  <!-- Modal -->
  <div class="modal fade" id="imageModal">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-body">
               <div class="row">
                   <div class="col-12 col-sm-12 col-md-6 form-group">
                       <label for="f-type_id">Type image</label>
                       <select class="form-control">
                           <option value="">- Please select -</option>
                           @foreach($types as $type)
                               <option id="type_id"  value="{{ $type->id 
                                     }}">
                                   {{ $type->name }}
                               </option>
                           @endforeach
                       </select>
                   </div>
               </div>

               <div class="col-12 col-sm-12 col-md-6 form-group">
                   <label for="main">
                       <input type="checkbox" class="form-control" 
                        id="main">  
                         Main Image?
                   </label>
               </div>
           </div>

           <div class="modal-footer">
               <button type="button" class="btn data-target='#imageModal'
                       data-toggle='modal'>Save
               </button>
           </div>
       </div>
   </div>

And Script:

 var $listOfImages = $('#listOfImages');

 $('#addImageButton').click(function() {
    FileManagerFunctions.open('images', function(url, filePath) {
        // Add image element
        $('#imageModal').modal('show');
        var $type =  $('#type_id').val();
        var $main = $('#main').val();
        var $newImage = imageHtml(filePath, $type, $main);
        $listOfImages.append($newImage);
      });
  });

imageHtml is a function that make an arrray with these values (#type_id & #main) but I need stop ejecution of script until user insert $type & $main values

May be is possible stop script until modal are closed? No idea...

If I use debug browser I can check that variable values are passing to function imageHtml before that user insert values

Thanks in advance!

Answer 1

If I am understanding your question correctly, you could just do any checks you need to $type and $main before you run your function.

eg

      var $listOfImages = $('#listOfImages');

         $('#addImageButton').click(function() {
            FileManagerFunctions.open('images', function(url, filePath) {
                // Add image element
                $('#imageModal').modal('show');
                var $type =  $('#type_id').val();
                var $main = $('#main').val();
                var $newImage = imageHtml(filePath, $type, $main);
                if ($type !== '' && $main !== '') {
                    $listOfImages.append($newImage);
                } else {
                    alert('please enter a value for name and type')
                }
              });
          });

EDITED:

This resolve problem in part.

I added id="addImageData" in button modal and now rest of script wait modal closing. But problem now is value input arent correct. This solution is bad and doesnt work correctly. But May be is a idea that I need...