0

私はこのjQueryフォームに取り組んでおり、すべてのフィールドに入力した場合にのみユーザーが送信できるようになっています。したがって、基本的に、送信フィールド（または私の場合は「リクエスト」フィールド）は、すべてのフィールドが空白でなくなるまで淡色表示になります。私のボタンは常に暗くなっていますが、誰かがこれを手伝ってくれませんか？私は次のjQueryを持っています：

$(function() {
    var $submit = $(".request input");
    var $required = $(".required");
    function containsBlanks(){
        var blanks = $required.map(function(){ return $(this).val() == "";});
        // the inArray helper method checks if value is within an array
        return $.inArray(true, blanks) != -1;
    }

    function requiredFilledIn(){
        if(containsBlanks()) 
        $submit.attr("disabled","disabled");
    else 
        $submit.removeAttr("disabled");
    }

    $("#form2 span").hide();
    $("input").focus(function(){
        $(this).next().fadeIn("slow");
    }).blur(function(){
        $(this).next().fadeOut("slow");
    }).keyup(function(){
        //Check all required fields.
        requiredFilledIn();
    });

    requiredFilledIn();
});

これが私のフォームです

    <div id="form2" title="Request a Call-back">
        <p class="validateTips">All form fields are required. The submit button will activate once this is done.</p>
        <form action="includes/requestcall.php" method="post">
            <fieldset>
                <label for="name">Name:</label>
                <input type="text" name="name" id="name" size="30" class="required" />
                <span>Please enter your Name</span>
                <br />
                <br />
                <label for="number">Number:</label>
                <input type="text" name="number" id="number" size="30" class="required" />
                <span>Please enter your number</span>
                <br />
                <br />
                <label for="time">Preferred Time:</label>
                <input type="text" name="time" id="time" size="30" class="required" />
                <span>Please enter your preferred time</span>
                <br />
            </fieldset>
            <p class="request">
            <input type="submit" value="Request" class="btn-submit">
            </p>
        </form>
    </div>

私はまだjQueryを学んでおり、助けていただければ幸いです。

4

1 に答える 1

1

変更イベントを使用するとともに、フィルター関数を使用して空のテキストボックスを取得するようにコードを少し調整しました。

これは、JSFiddleでマークアップを実行する更新されたスクリプトへのリンクです

更新されたスクリプトは次のとおりです。

$(function () {
    var $submit = $("input.btn-submit").attr("disabled", "disabled").css("color", "red");
    var $required = $(".required");

    function requiredFilledIn() {
        var blanks = $required.filter(function () {
            return $(this).val() === "";
        });
        if (blanks.length > 0) $submit.attr("disabled", "disabled").css("color", "red");
        else $submit.removeAttr("disabled").css("color", "black");
    }

    $("#form2 span").hide();
    $("input:text").focus(function () {
        $(this).next().fadeIn("slow");
    }).blur(function () {
        $(this).next().fadeOut("slow");
    }).change(function () {
        //Check all required fields.
        requiredFilledIn();
    });
});
于 2013-03-12T00:10:46.427 に答える