3

I am trying to generate a modal box on submitting a form but when I submit it, it is not validating the required input because it's type='button'. If I replace it with 'submit' then it not showing pop-up box. And also I want to validate first and then generate pop-up. Would someone please help me out in this!

   <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>
vam
  • 492
  • 7
  • 17

2 Answers2

4

Simply prevent the default behaviour like this:

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

So for your example it would be:

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

For more information check out: https://stackoverflow.com/a/5688798/7667467

Community
  • 1
  • 1
t16n
  • 223
  • 2
  • 11
  • my question is a bit different from that. I wanna validate the form first and then generate a modal box and I've stated in my question already that I've tried type='button' that is not generating any modal box with my code when I give proper input! – vam Mar 08 '17 at 16:19
  • @lonely-wolf I fixed the solution now it should work – t16n Mar 09 '17 at 13:18
  • I am still facing the issue.This time modal box is not showing up. [Codepen](http://codepen.io/lonely_wolf/pen/VpPRYd) – vam Mar 09 '17 at 14:15
  • You're genius! I've been searching for the subtle answer and here it is. Thank you so much. You saved my day :) – vam Mar 09 '17 at 15:36
  • 1
    @lonely-wolf was that the solution? Please mark it as an answer then. – t16n Mar 13 '17 at 07:40
0

Change your button to:

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

You can add classes to any element and it will look the same

Carlo Operio
  • 1
  • 1
  • Here, the problem is with type of input but not the text to be displayed.I've already stated that I changed it to submit but it didn't give modal box on submitting. – vam Mar 08 '17 at 14:52