提交表单后加载屏幕

Question

我已经添加了这个脚本。

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

这是我的输入类型提交。

<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();

那么， if(firstName != "" && lastName != "" && email != "" && phone != "" && doorNumber != "" && postcode != "" && (phoneLength.length > 9 || phoneLength.length 0 )

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

如果不清楚，请告诉我。 :(

Answer 1

您在正确的道路上，您首先需要做的是检查这些字段。

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

Answer 2

这应该可行，我将 .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>