title: Loading screen after submitting form
body: <p>I've added this script.</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() { 
          $('#submit-button').click(function() { 
              $.blockUI({ css: { 
                  border: 'none', 
                  padding: '15px', 
                  backgroundColor: '#000', 
                  '-webkit-border-radius': '10px', 
                  '-moz-border-radius': '10px', 
                  opacity: .5, 
                  color: '#fff' 
              } }); 
  
              setTimeout($.unblockUI, 8000); 
          }); 
      }); 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is my input type submit.</p>
  
  <pre><code>&lt;input type="submit" name="submit" value="AM I ELIGIBLE?" id="submit-button" &gt;
  </code></pre>
  
  <p>Now, the problem is, the loading screen also runs once I click the submit button, even if I don't have set inputs for the other input types (first name, phone number, email). :(</p>
  
  <p>I want it to run once the validation of the form is okay.</p>
  
  <p>I'm using jquery.blockUI.js</p>
  
  <p>Thank you guys! :)</p>
  
  <p>Here's my NEW code:</p>
  
  <pre><code>&lt;script&gt;
          $(document).ready(function() { 
              $('#submit-button').click(function() { 
  
  
              //First set your var for the fields you want. the $() is the id of the field in your html 
                  var firstName = $("#first-name").text();
                  var lastName = $("#last-name").text();
                  if(firstName != "")//&amp;&amp;(lastName != ""))
                  {
  
                  $.blockUI({ css: { 
                      border: 'none', 
                      padding: '15px', 
                      backgroundColor: '#000', 
                      '-webkit-border-radius': '10px', 
                      '-moz-border-radius': '10px', 
                      opacity: .5, 
                      color: '#fff' 
                  } }); 
  
                  setTimeout($.unblockUI, 8000); 
  
                  }
                  // else{
                  // // in here you'll do what ever you wanted to for instance.
  
                  // alert("Please make sure all fields are filled out");
                  // }
  
              });         
          }); 
  
          &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p><em>---</em></p>
  
  <p>Now, I have a slider..</p>
  
  <pre><code>&lt;p class="slider1"&gt;Your approximate total debt: 
    &lt;output name="slider_output1" id="slider_output1" for="form_slider1"&gt;0&lt;/output&gt;&lt;br&gt;                                                   
    &lt;input type="range" class="form_slider1" name="form_slider1" id="form_slider1"
     value="0" min="0" max="60000" step="100" 
     oninput="slider_output1.value=form_slider1.value" 
     onchange="slider_output1.value=value"/&gt;  
  
  &lt;/p&gt;
  </code></pre>
  
  <p>I need to add this on the condition statement, so that the form won't go through if its value is "0".</p>
  
  <p>I tried using this..</p>
  
  <pre><code>var slider1 = $("#form_slider1").val();
  </code></pre>
  
  <p>Then,
  if(firstName != "" &amp;&amp; lastName != "" &amp;&amp; email != "" &amp;&amp; phone != "" &amp;&amp; doorNumber != "" &amp;&amp; postcode != "" &amp;&amp; (phoneLength.length > 9 || phoneLength.length &lt; 12)) &amp;&amp; slider1 > 0 )</p>
  
  <p>But, I think it's disregarding that slider1>0, the loading screen is not showing either.</p>
  
  <p>Let me know if this is not clear. :(</p>