Question

我是使用jquery的新手，只是复制了jquery代码。

如果未填充表单中的所有字段，则jquery会禁用Sumbit按钮。表单已填充表格中的数据，但提交按钮仍然是残缺的。

我哪里出错？

<?php 
error_reporting(0);

session_start();
include('dbconn.php');  
$admin_ID   = $_SESSION['admin_ID'];

if (empty($_SESSION['admin_ID']) && parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) != '../index.php') {
    header('Location: ../index.php');
    exit;
}



$query = "SELECT * FROM tbl_admin WHERE admin_ID='$admin_ID'";
$result = mysqli_query($con, $query);

if (!$query) {
    printf("Error: %s\n", mysqli_error($con));
    exit();
}
?>
<html>
    <head>
        <link rel="stylesheet" href="css/add.css" type="text/css" media="screen"/>
        <script type="text/javascript">
        (function() {
    $('form input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#Submit').attr('disabled', 'disabled'); 
        } else {
            $('#Submit').removeAttr('disabled'); 
        }
    });
})()




        </script>

    </head>
    <body>
        <div id="header">
            <img src="images/sbma.png" class="logo" id="logo"></img>
            <a style = "float:left;">My Account</a>
            <a href="MainMenu.php">Home</a>
        </div>
        <div id="navigation">

        </div>
        <div id="section">
        <?php while($row1 = mysqli_fetch_array($result)):;?>
            <form class="form-style-1" action="MyUpdateProcess.php" method="post">
                <ul>
                <fieldset class="fieldset-company">
                    <li>
                        <label>Username:</label>
                        <input type='text' name='username' id='input'  value = "<?php echo $row1['admin_Username'];?>" maxlength="50" />
                    </li>
                    <li>
                        <label>Password:</label>
                        <input type='password' name='password' id='input' value="<?php echo $row1['admin_Password'];?>" maxlength="50" />
                    </li>
                    <li>
                        <label>First Name:</label>
                        <input type='text' name='fname' id='input'  value = "<?php echo $row1['admin_Fname'];?>" maxlength="50" />
                    </li>
                    <li>
                        <label>Middle Name:</label>
                        <input type='text' name='mname' id='input' value="<?php echo $row1['admin_Mname'];?>" maxlength="50" />
                    </li>
                                        <li>
                        <label>Last Name:</label>
                        <input type='text' name='lname' id='input'  value = "<?php echo $row1['admin_Lname'];?>" maxlength="50" />
                    </li>
                    <li>
                </fieldset>
                <fieldset class="fieldset-contacts">                    
                        <label>Email:</label>
                        <input type='text' name='email' id='input' value="<?php echo $row1['admin_Email'];?>" maxlength="50" />
                    </li>
                    <li>
                        <label>Telephone:</label>
                        <input type='text' name='telephone' id='input' value="<?php echo $row1['admin_Telephone'];?>" maxlength="50" />
                    </li>
                    <li>
                        <label>Mobile:</label>
                        <input type='text' name='mobile' id='input'  value = "<?php echo $row1['admin_Mobile'];?>" maxlength="50" />
                    </li>
            <?php endwhile;?>                   


                </fieldset>
                    <li>
                      <input id="Submit" type='Submit' disabled="disabled" name='Submit' value='Submit' />
                    </li>
                </ul>
    </form>
        </div>
        <div id="footer">
    S.B.M.A Centralized Information System 
    </div>
    </body>
</html>

Answer 1

$('form > input')表示IMMEDIATE孩子。

$('form input')表示任何后代。

您的输入元素都不是表单元素的直接子元素。

更改为$('form input')。

还有其他更改，例如使用prop代替attr会有所帮助。以及与keyup和change事件的绑定。

(function() {
    $('form input').on('keyup change', function() {

        var empty = false;
        $('form input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#Submit').prop('disabled', true); 
        } else {
            $('#Submit').prop('disabled', false); 
        }
    });

    $('form input:eq(0)').keyup(); // run the check
})()

但即使这样也行不通。为什么？因为你的while循环打印出多个<form>元素而没有关闭它们。你有一个表单在表单等内部的表单，具体取决于有多少循环。这将导致意外行为。您需要决定如何处理while循环，并确保正确打印表单。

此外，提交元素只提交它所在的一个表单。那么也许你应该只有一个表单？

此外， HTML ID必须是唯一的！您必须从所有这些输入中删除id="input"，否则您将获得更多意外行为。

Answer 2

请关注，

$（'form input [type =“text”]'）。keyup（function（）{

    var empty = false;
    $('form input[type="text"]').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#Submit').attr('disabled', 'disabled'); 
    } else {
        $('#Submit').removeAttr('disabled'); 
    }

或在文本框中添加一个类，并检查这些类是否具有值

Answer 3

你也可以尝试这样：

$(document).ready(function() {
    $('form input').keyup(function() {

        var empty = false;
        $('form input').each(function() {

            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#Submit').attr('disabled', 'disabled'); 
        } else {
            $('#Submit').removeAttr('disabled'); 
        }
    });
});

Answer 4

抱歉，我还不能评论......

为什么不直接将“required”属性添加到所有输入字段中：<input required type='text' name='username' id='input' value = "<?php echo $row1['admin_Username'];?>" maxlength="50" /> ？该按钮永远不会被禁用，但在每个字段填满之前它不会执行任何操作。

禁用提交按钮直到所有字段都具有值不起作用

4 个答案: