提交表单时的模态框答案

【问题标题】：Modal box on submitting a form提交表单时的模态框
【发布时间】：2017-03-08 14:04:53
【问题描述】：

我试图在提交表单时生成一个模式框，但是当我提交它时，它没有验证所需的输入，因为它是 type='button'。如果我用“提交”替换它，那么它不会显示弹出框。而且我想先验证然后生成弹出窗口。有人可以帮我解决这个问题吗！

   <html>
    <head>
        <meta name="viewport" content="width = device-width , initial-scale = 1.0">
        <title></title>
        <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css"                                                                                                                                                 rel="stylesheet">
    </head>
     <body>
         <form>
             <div class="form-group">
                  <label for="water">Enter Water :</label>
                  <input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
             </div>
             <div class="form-group">
                  <label for="compressiveStrength">Compresive Strength :</label>
                  <input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
             </div>
             <div class="form-group">
                  <label for="plasticViscosity">Plastic Viscosity :</label>
                  <input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
             </div>
             <div class="form-group">
                  <label for="fiber">Fiber Volume Fraction :</label>
                  <input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
             </div>
             <div class="form-group">
                  <label for="aspectRatio">Aspect Ratio :</label>
                  <select id="aspectRatio" class="form-control">
                    <option>60</option>
                    <option>50</option>
                  </select>
              </div>
              <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Generate</button>
         </form>
         <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog"> 
            <!-- Modal content-->
                <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal">&times;</button>
                         <h4 class="modal-title">Result</h4>
                     </div>
                     <div class="modal-body">
                         <p>Some text in the modal.</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                     </div>
                </div>  
            </div>
         </div>
    </body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </html>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap modal-dialog

【解决方案1】：

简单地阻止这样的默认行为：

    $('#form1').submit(function(event){
      // cancels the form submission
      event.preventDefault();

      //If the form is valid open modal
      if($('#form1')[0].checkValidity() ){
        $('#myModal').modal('toggle');
      }
    // do whatever you want here
    });

因此，对于您的示例，它将是：

<html>
<head>
    <meta name="viewport" content="width = device-width , initial-scale = 1.0">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css"                                                                                                                                                 rel="stylesheet">
</head>
 <body>
     <form id="form1" name="form1">
         <div class="form-group">
              <label for="water">Enter Water :</label>
              <input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
         </div>
         <div class="form-group">
              <label for="compressiveStrength">Compresive Strength :</label>
              <input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
         </div>
         <div class="form-group">
              <label for="plasticViscosity">Plastic Viscosity :</label>
              <input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
         </div>
         <div class="form-group">
              <label for="fiber">Fiber Volume Fraction :</label>
              <input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
         </div>
         <div class="form-group">
              <label for="aspectRatio">Aspect Ratio :</label>
              <select id="aspectRatio" class="form-control">
                <option>60</option>
                <option>50</option>
              </select>
          </div>
          <button type="submit" class="btn btn-primary btn-lg">Generate</button>
     </form>
     <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog"> 
        <!-- Modal content-->
            <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Result</h4>
                 </div>
                 <div class="modal-body">
                     <p>Some text in the modal.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 </div>
            </div>  
        </div>
     </div>
</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script>
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
</script>   
</html>

欲了解更多信息，请查看： https://stackoverflow.com/a/5688798/7667467

【讨论】：

我的问题有点不同。我想先验证表单，然后生成一个模态框，我已经在我的问题中说明我已经尝试 type='button' ，当我给出正确的输入时，它不会用我的代码生成任何模态框！
@lonely-wolf 我修复了解决方案，现在它应该可以工作了
我仍然面临这个问题。这次模态框没有出现。 Codepen
你真是个天才！我一直在寻找微妙的答案，就在这里。太感谢了。你拯救了我的一天:)
@lonely-wolf 是解决方案吗？那么请将其标记为答案。

【解决方案2】：

将您的按钮更改为：

<input type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg" value="Generate">

您可以向任何元素添加类，它看起来都一样

【讨论】：

这里，问题在于输入的类型，而不是要显示的文本。我已经说过我将其更改为提交，但提交时没有给出模态框。