jQuery。等待模态输入值 Bootstrap

Question

我得到了一个显示模式 bootstrap 并获取输入值以与他一起操作的脚本。但我的问题是脚本不会停止用户插入的输入值。

模态：

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

和脚本：

 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 是一个使用这些值 (#type_id & #main) 进行排列的函数，但我需要停止执行脚本，直到用户插入 $type & $main values

是否可以在模式关闭之前停止脚本？不知道...

如果我使用调试浏览器，我可以在用户插入值之前检查变量值是否传递给函数 imageHtml

提前致谢！

Answer 1

如果我没有正确理解你的问题，你可以在运行你的函数之前对 $type 和 $main 做任何你需要的检查。

例如

      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')
                }
              });
          });

已编辑：

这部分解决了问题。

我在按钮模式中添加了 id="addImageData"，现在脚本的其余部分等待模式关闭。但现在的问题是值输入不正确。这个解决方案不好，不能正常工作。但可能是我需要的想法...

jQuery。等待模态输入值 Bootstrap

jQuery. Wait input values in modal Bootstrap

javascript

jquery

modal-dialog

bootstrap-modal