提交表单后加载屏幕 - Loading screen after submitting form

我已经添加了这个脚本。

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

这是我的输入类型submit。

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

现在，问题是，一旦我点击提交按钮，加载屏幕也会运行，即使我没有为其他输入类型（名字、电话号码、电子邮件）设置输入。：（

我希望它在表单验证完成后运行。

我正在使用jquery.blockUI.js

谢谢你们！：）

这是我的新代码：

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

---

现在，我有一个滑块。。

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

我需要将其添加到条件语句中，这样，如果其值为"0"，表单就不会通过。

我试过用这个。。

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

然后，如果&滑块1>0）

但是，我认为它忽略了slider1>0，加载屏幕也没有显示。

如果不清楚，请告诉我。：（

如果路径正确，首先需要检查这些字段。

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

试试这个

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

这应该有效，我把.text（）改成了.val（）。我在你的网站上也注意到，当你点击f12时，你有两个错误需要处理。

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