javascript - jQuery的。等待模态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值

可能会在模式关闭之前停止脚本吗？不知道...

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

提前致谢！

最佳答案

如果我正确理解了您的问题，则可以在运行函数之前进行$ 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”，现在其余脚本等待模式关闭。但是现在的问题是输入值正确。该解决方案不好，不能正常工作。但可能是我需要的一个主意...

关于javascript - jQuery的。等待模态Bootstrap中的输入值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56577565/