制作提交按钮，当所有输入都填满时改变颜色答案

【问题标题】：Making submit button, change color when all inputs are filled制作提交按钮，当所有输入都填满时改变颜色
【发布时间】：2015-03-14 20:48:47
【问题描述】：

我目前正在考虑如何更改输入提交按钮的颜色，当所有输入都填写完毕后，有人知道吗？

我猜你可以用 php 来做这个？

更新： 我试过这个，但它有点错误，在我按退格键几次之前它并没有真正更新。：

    $(function() {
     $('form input[type=text], form input[type=email]').keydown(function() {
        var empty = false;

        // kører igennem alle inputs, og tjekker om de indeholder noget
        $('form input[type=text], form input[type=email]').each(function() {
            if ($(this).val() == '') { // hvis feltet er tomt
                empty = true;
            }
        });

        if (!$('form input[type=checkbox]').is(':checked')) {
            empty = true;
        }

        if (empty == false) {
            // hvis alle felter er udfyldt
            $('form input[type=submit]').css('background-color', 'blue');
        } else {
            // hvis ikke alle felter er udfyldt
            $('form input[type=submit]').css('background-color', 'yellow');
        }
     });
    });

【问题讨论】：

@halfer 你会知道吗？
Javascript，实际上...表单中只有文本字段吗？
@nevermind 不，我没有，所有文本输入和一封电子邮件
不需要PHP，用JS就可以。只需在其中一项更改后检查所有输入项，并确定是否全部填写完毕
我投票结束这个问题，因为它是一个需求规范，而不是任何解决问题或问题的尝试......

标签： jquery form-submit forms

【解决方案1】：

Javascript，而不是 PHP。 PHP 只是服务器端的，这意味着当你看到一个网页时，所有的 PHP 都已经运行了。

看看jquery——http://www.w3schools.com/jquery/jquery_dom_set.asp

【讨论】：

我添加了一些额外的文字。

【解决方案2】：

检查我的小例子

<html>
<head>


    <script type="text/javascript">
        function check(){
            var tocheck = ["text1", "text2", "text3", "email"];
            var tf = document.getElementById("theform");
            var ok = true;
            var i;
            for(i=0; i<tocheck.length; i++){
                ok = ok && tf.elements[tocheck[i]].value != "";
            }
            document.getElementById("subm").style.color = ok ? "green" : "red";
        }
    </script>
</head>


<body>

    <form id="theform">
        Text1: <input name="text1" type="text" onchange="check()" oninput="check()"></input><br/>
        Text2: <input name="text2" type="text" onchange="check()" oninput="check()" onchange="check()" oninput="check()"></input><br/>
        Text3: <input name="text3" type="text" onchange="check()" oninput="check()"></input><br>
        Email: <input name="email" type="email" onchange="check()" oninput="check()"></input><br/>
        <input type="submit" id="subm" value="OK" style="color: red;"></input>
    </form>

</body>
</html>

【讨论】：

如果我想同时设置 background-color: 和 color: 的样式怎么办？我可以将样式保留在 css 文件中吗？
是的，您可以在 CSS 中定义类，然后您必须使用 className 属性：document.getElementById("subm").className = ok ? "fine" : "error";
而且您无法决定复选框是否“已填充”。也许用户只是不想让它被选中而让它处于未选中状态。
但是，如果必须选中该复选框，例如，如果它是“我已阅读并接受条款 bla bla”的复选框，那么您可以在 for 循环之后添加此行：ok = ok && tf.elements["accept_terms"].checked;
这对你有意义吗？ @balping？刚刚添加了一些额外的文字。

【解决方案3】：

我的一个朋友，找到了一个很好的解决方案！

   <script type="text/javascript">
        $(function() {
            function check_inputs() {
                var empty = false;

                // kører igennem alle inputs, og tjekker om de indeholder noget
                $('form input[type=text], form input[type=email]').each(function() {
                    if ($(this).val() == '') { // hvis feltet er tomt
                        empty = true;
                    }
                });

                if (!$('form input[type=checkbox]').is(':checked')) {
                    empty = true;
                }

                if (empty == false) {
                    // hvis alle felter er udfyldt
                    $('form input[type=submit]').css({
                                                    'background-color' : '#f4d24b',
                                                    'font-size' : '16px',
                                                    'font-weight' : '700',
                                                    'color' : '#272727',
                                                    });
                } else {
                    // hvis ikke alle felter er udfyldt
                    $('form input[type=submit]').css('background-color', '#1f1f1f');
                }
            }

            $('form input[type=text], form input[type=email]').keyup(function() {
                check_inputs();
            });

            $('form input[type=checkbox]').click(function() {   
                check_inputs();
            });
        });
    </script>

【讨论】：

【解决方案4】：

<!DOCTYPE html> <html> 
    <head> 
        <title>Login</title> 
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
        <script src="jquery.min.js"</script> 
        <style> 
            .btn,.input-radius {border-radius:1px!important;} 
            p { font-weight: bold; padding-top: 47px; } #sub{ } 
        </style> 
        <script> 
            jQuery(document).ready(function (){ 
                jQuery("#sub").click(function(){ btncolor(); }); 
                    function btncolor(){ 
                    if (jQuery('#exampleInputPassword1').val().length > 0 || jQuery('#exampleInputEmail1').val().length > 0) { jQuery("#sub").css("background-color", "orange"); 
                    } 
                }
            }); 
        </script> 
    </head> 
    <body>
        <div class="col-lg-3">
            <form> 
                <p>LOGIN</p> 
                <fieldset class="form-group">
                <input type="email" class="form-control input-radius" id="exampleInputEmail1" placeholder="Enter email">
                </fieldset> 
                <fieldset class="form-group"> 
                <input type="password" class="form-control input-radius" id="exampleInputPassword1" placeholder="Password"> 
                </fieldset> 
                <button type="submit" id="sub" class="btn btn-primary grey-btn" onclick="return false;">Submit</button> 
                <small class="text-muted">Forgot password?</small>
            </form>
        </div>
    </body>
</html>

【讨论】：