title: Keep user in the same div after submit button clicked if the textbox empty
body: <p>I have a problem that I'm trying to figure out from past 2 days but still no solution found.
  I have a html page with 4 div.
  each div has has 3 input fields and a button. 
  If the text box is empty then the user should be in the same div even after submit button clicked but in my case they are getting redirected to another div.
  how do i solve this issue?
  also show warning and not allow user to proceed next if the textbox is empty.</p>
  
  <p>code:</p>
  
  <pre><code>&lt;div class="col-sm-12"&gt;          
                    &lt;label&gt; &lt;i class="fa fa-paper-plane px-2"&gt; &lt;/i&gt; Send To Address&lt;/label&gt;
                    &lt;div class="form-group"&gt;
                      &lt;input type="text" id="a1" class="form-control" placeholder="Address"&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;      
                   &lt;div class="col-sm-12"&gt;          
                    &lt;label style="width: 100% !important"&gt; &lt;i class="fa fa-money px-2"&gt; &lt;/i&gt; Amount &lt;span class="pull-right"&gt; Max Amount: --- &lt;/span&gt;&lt;/label&gt;
                    &lt;div class="form-group"&gt;
                      &lt;input type="text" id="x1"class="form-control" placeholder="Enter the Amount"&gt;
                    &lt;/div&gt;
                    &lt;/div&gt; 
                    &lt;div class="col-sm-12 text-right"&gt;
                    &lt;span class="btn btn-sm btn-info btn1" id="b1"&gt; &lt;small&gt; Continue &lt;/small&gt; &lt;/span&gt;      
                    &lt;/div&gt;          
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="tab-pane t2" id="account"&gt;
                        &lt;h5 class="info-text"&gt; &lt;/h5&gt;
                        &lt;div class="row justify-content-center"&gt;
  
                    &lt;div class="col-sm-12"&gt;          
                    &lt;label&gt; &lt;i class="fa fa-paper-plane px-2"&gt; &lt;/i&gt; Send To Address&lt;/label&gt;
                    &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" value="Address" disabled&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;      
                   &lt;div class="col-sm-12"&gt;          
                   &lt;label style="width: 100% !important"&gt; &lt;i class="fa fa-money px-2"&gt; &lt;/i&gt; Amount &lt;span class="pull-right"&gt; Max Amount: --- &lt;/span&gt;&lt;/label&gt;
                    &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" value="Amount Entered" disabled&gt;
                    &lt;/div&gt;
                    &lt;/div&gt; 
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$(document).ready(function(){
         $('#b1').click(function(){
              if ($('input#a1#x1').val() == ""){
                  alert('Please complete the field');
              }
          });
      });
  </code></pre>
  
  <p>I have tried many solutions but all just show the warning but still redirect to another div
  please help!!</p>