I want the modal to display only when the condition statement is true

[ephdee]

I want the modal to show after the user has fill the form, But don't know how to do that. Am very new in javascript.

After the user have fill the form and click on the proceed button the modal should pop up but if the user did not fill all the form the modal should not display and and an error message should alert.. When the modal display then the user should fill the 1st modal form with a code 123456, if the user did not put anything or give a wrong code the 2nd modal should not show but if he/she does it should display.

 

THIS IS THE HTML FORM

<div class="panel panel-default">
 <div class="panel-heading">
 <h3 class="panel-title">
 <div align="center">
<p>
 Funds Transfer
 </h3>
 </div>
 <div class="panel-body">

<div align="center">
<p> 
Bank of lgbt Funds Transfer Service makes it easy to transfer funds to other beneficiaries within the bank or to other domestic bank.<br>
To effect transfer of funds, please complete and submit the form below. Please note that all account numbers are required to be NUBAN compliant. </br>

<div id="middle">

<table class="">

       <tr>
          <th>
       <label for="funds transfr" >*Funds Transfer Type: </label>
      </th>
          <td><p>
            <select name="fundstransfr" maxlength="20" tabindex="108" >
              <option value=" ">   </option>
              <option value="Internal">Internal</option>
              <option value="External">External</option>
            </select>
          </p>
            <p>  </p>
          </td>

   <tr>
         <th>

           <label for= "transfr from" >*Transfer from: </label>
          </th>
          <td><p>
            <select name="transfrfrom" maxlength="20" tabindex="108">
              <option value=" ">   </option>
              <option value="Premier Account">Premier Account</option>
              <option value="Credit Card">Credit Card</option>
            </select>
          </p>
            <p>  </p>
          </td>
      <td> </td>
      <td> </td>

    <tr>
          <th>
            <label for="amount">*Amount:</label> </th>
          <td> <p>
            <input type="number" name="amount" value="" placeholder="0.00" maxlength="30" size="12" tabindex="106">
          </p>
            <p>  </p></td>
      <td> </td>
          <td> </td>

    <tr>
          <th>
               <label for="Beneficiary Name">*Beneficiary Name:</label>
      </th>
          <td> <input type="text" name="BeneficiaryName" value="" maxlength="40" size ="30"tabindex="107"></td>
      <td><p> </p>
        <p> </p></td>
          <td> </td>
          <td colspan="2"> </td>
         </tr>

<tr>

            <th>
               <label for="Beneficiary Bank" >*Beneficiary Bank:</label></th>
            <td><p>
              <select name="BeneficiaryBank" maxlength="20" tabindex="108">
                <option value="">  </option>
                <option value="">Bank of trump</option>
                <option value="">Obama bank</option>

              </select>
            </p>
            <p>  </p></td>

     <td> </td>
         <td> </td>
         <td colspan="2"> </td>
        </tr>

        <tr>
          <th><label for="Beneficiary Accountr" >*Beneficiary Account No (NUBAN):</label></th>
          <td><p>
            <input type="number" name="BeneficiaryAccount" value="" placeholder="N/A" maxlength="20" tabindex="116" maxlength="20" tabindex="114"/>
          </p>
            <p>  </p></td></form>

    <tr>
          <th> <label for="Payment Reference" class="btn-group-lg">
            Payment Reference:</label>          </th>
          <td><input type="text" name="PaymentReference" value=""></td><br>

          </table>





><br>
<!-- Trigger/Open The Modal -->
 <button type="button" id="myBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal" >Proceed</button>

THIS IS THE MODAL WINDOW

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
 <div class="modal-header">
 <spal class="close1">×</spal>
 <h4 class="modal-title">Please enter your secure Transaction Code.</h4>
</div>
<div class="modal-body">
          <label for="TransactionCode">*Transaction Code:</label>

      <input type="text" name="TransactionCode" value="" maxlength="40" size ="30"tabindex="107">

          <p> For Transaction Code <a href="#">click here</a></p>
        </div>



      <div class="modal-footer">


          <button type="button" id ="myBtn2"class="btn btn-info" data-toggle="modal" data-target="#myModal2">Proceed</button>      
     </div>


<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
 <div class="modal-header">

 <span class="close2">×</span>

 <h4 class="modal-title">Please enter your secure Tax verification code.</h4>
</div>
<div class="modal-body">
          <label for="taxcode">*Tax Verification Code:</label>

      <input type="text" name="taxcode" value="" maxlength="40" size ="30"tabindex="107">

          <p> For Tax Verification Code <a href="#">click here</a></p>
        </div>



      <div class="modal-footer">


          <button type="button" id ="myBtn2"class="btn btn-info" data-toggle="modal" data-target="#myModal2">Proceed</button>      
     </div>


</div>
</div>

  </div>  


          </div>  
</div>

THIS IS THE SCRIPT

<script>
// Get the modal
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2'); 

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");


// Get the <span> element that closes the modal
var spal = document.getElementsByClassName("close1")[0];
var span = document.getElementsByClassName("close2")[0];


// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}
// When the user clicks the button, open the modal 
btn2.onclick = function() {
    modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
spal.onclick = function() {
    modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "block";
    }
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal2) {
        modal2.style.display = "block";
    }
}
</script>

[dalecosp]