Loading screen after submitting form

Question

I've added this script.

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

</script>

And here is my input type submit.

<input type="submit" name="submit" value="AM I ELIGIBLE?" id="submit-button" >

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). :(

I want it to run once the validation of the form is okay.

I'm using jquery.blockUI.js

Thank you guys! :)

Here's my NEW code:

<script>
        $(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 != "")//&&(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");
                // }

            });         
        }); 

        </script>

---

---

Now, I have a slider..

<p class="slider1">Your approximate total debt: 
  <output name="slider_output1" id="slider_output1" for="form_slider1">0</output><br>                                                   
  <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"/>  

</p>

I need to add this on the condition statement, so that the form won't go through if its value is "0".

I tried using this..

var slider1 = $("#form_slider1").val();

Then, if(firstName != "" && lastName != "" && email != "" && phone != "" && doorNumber != "" && postcode != "" && (phoneLength.length > 9 || phoneLength.length < 12)) && slider1 > 0 )

But, I think it's disregarding that slider1>0, the loading screen is not showing either.

Let me know if this is not clear. :(

Answer 1

Your on the right path, what you need to do first is check those fields.

           <script>
    $(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 = $("#FirstName").text();
if(firstName != "")
{
            $.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");
}

        }); 
    }); 

</script>

Try this

<script>
    $(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().trim();
            var lastName = $("#last-name").text().trim();
           //Also use alert to make sure the field are really being filled out
            alert(firstName + " " + lastName);

            if(firstName == "" && lastName == "")
            {
             // // in here you'll do what ever you wanted to for instance.
              alert("Please make sure all fields are filled out");
            }
            else{

              $.blockUI({ css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } }); 

            setTimeout($.unblockUI, 8000); 

           }

        });         
    }); 

    </script>

Answer 2

This should work, I changed the .text() to a .val(). I also noticed on your site, when you hit f12 you have two errors you need to handle.

<script>
$(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").val().trim();
        var lastName = $("#last-name").val().trim();
       //Also use alert to make sure the field are really being filled out
        alert(firstName + " " + lastName);

        if(firstName == "" && lastName == "")
        {
         // // in here you'll do what ever you wanted to for instance.
          alert("Please make sure all fields are filled out");
        }
        else{

          $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } }); 

        setTimeout($.unblockUI, 8000); 

       }

    });         
}); 

</script>