提交表格后加载屏幕-Java 学习之路

我添加了这个脚本 .

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

然后，如果（firstName！=“”&& lastName！=“”&& email！=“”&& phone！=“”&& doorNumber！=“”&& postcode！=“”&&（phoneLength.length> 9 || phoneLength . 长度<12））&& slider1> 0）

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

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

2 回答

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

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

回复于 2024-05-05T13:28:01+08:00

这应该工作，我将.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>

回复于 2024-05-05T13:28:01+08:00

提交表格后加载屏幕

2 回答

相关问题