填写表单时将不会启用提交按钮

时间:2017-03-02 15:51:49

标签: javascript jquery html css

尝试使用此JSFiddle进行平滑的表单控件。但我无法做到这一点。提交但仍然被禁用。我想textareas也被包括在内作为输入。

(function() { // fiddle
    $("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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="Contact">
    <h1> Contact Form </h1>
    <p> Please fill in the form to send message to the site administrator </p>
    <br/>
</div>
<form name="msg" method="post">
    <div id="form" align=center>
        <ul id="items">
            <li align=center>
                <input type="text" name="username" placeholder="Username or Real Name" class="textField" />
            </li>
            <li align=center>
                <input type="text" name="title" placeholder="Title" class="textField" />
            </li>
            <li align=center>
                <textarea name="content" class="textField" id="content" placeholder="Your Message..."></textarea>
            </li>
            <li>
                <input type="submit" name="submit" class="textField" id="submit" value="Send" disabled="disabled" />
            </li>
        </ul>
    </div>
</form>

这是填充时的样子:

screenshot

2 个答案:

答案 0 :(得分:0)

好的,你的选择器错了。

 form > selected

改为;

form > #form > #items > li > input

或者你可以简单地使用输入类选择器,它是&#34; textField&#34;

答案 1 :(得分:0)

这是工作片段,只需看看jQuery选择器,它也适用于textareas。

&#13;
&#13;
(function() {
    $('form > input, form > textarea').keyup(function() {

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

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<form>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Password<br />
    <input type="password" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="password" id="v_pass_input" name="v_password" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />    
    Textarea<br />
    <textarea id="v_pass_input" name="v_password"></textarea><br />
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<div id="test">
</div>
&#13;
&#13;
&#13;