0

前のセクションの必須入力値に基づいて有効または無効にする必要があるフォームのセクションがあります。最初のセクションと必要な入力を除いて、すべてのセクションがデフォルトで無効になっています。必須のクラスが適用されます。すべての必須フィールドに値がある場合は次のセクションをチェックし、それらすべての必須フィールドに値がある場合は次のセクションをチェックするなどです。次のセクションの。ユーザーが名前をもう一度入力したら、次のすべてのセクションを確認します。ありがとう！JSフィドル

HTML:

<form class="contact-form">
            <div class="section">
                <div class="selStyled"><!--selStyled required for IE custom dropdowns-->
                    <select name="area" class="required">
                        <option value="">Pick something yo*</option>
                        <option value="option 1">option 1</option>
                        <option value="option 2">option 2</option>
                        <option value="option 3">option 3</option>
                        <option value="option 4">option 4</option>
                        <option value="option 5">option 5</option>
                        <option value="option 6">option 6</option>
                    </select>
                </div>
                <input type="text" name="first-name" placeholder="First Name*" class="split-input required" />                  
                <input type="text" name="phone" placeholder="Phone" class="split-input" />
            </div>

            <div class="section disabled">
                <input type="text" name="address1" placeholder="Address 1" disabled />
                <input type="text" name="city" placeholder="City*" class="split-input required"  disabled />
                <input type="text" name="state" placeholder="State/Province*" class="split-input required"  disabled />

            </div>

            <div class="section disabled">
                <textarea name="message" placeholder="Leave a comment sucka*" class="required" disabled ></textarea>
            </div>
            <input type="submit" name="submit" value="send" class="submit" disabled />
        </form>

JS:

$('.contact-form input, .contact-form select, .contact-form textarea').bind('input propertychange change',function(){
    var currentInput = $(this);
    var currentContainer = currentInput.parent();
    var allRequired = 1;
    var requiredForm = 1;
    currentContainer.find('.required').each(function(){
        var currentRequiredValue = $(this).val();
        if(currentRequiredValue == '')
            allRequired = 0;
    });
    if(allRequired == 1) {//if not empty
        var nextSection = currentContainer.next('.section.disabled');
        nextSection.removeClass('disabled').addClass('enabled').find('input, select, textarea').prop('disabled',false);


    }else{//if empty
        var enabledSections = currentContainer.nextAll('.section.enabled');
        enabledSections.removeClass('enabled').addClass('disabled').find('input, select, textarea').prop('disabled',true);
    }
    $('.contact-form .required').each(function(){//check all required fields
        var formRequiredValue = $(this).val();
        if(formRequiredValue == '')
            requiredForm = 0;
    });
    if(requiredForm == 1){//send button
        $('.contact-form .submit').prop('disabled',false);
    }else{
        $('.contact-form .submit').prop('disabled',true);
    }
});
4

1 に答える 1

0

これを試してみてください:- http://jsfiddle.net/adiioo7/vG5u9/1/

JS 変更:-

var currentContainer = currentInput.parent();

var currentContainer = currentInput.closest(".section");
于 2013-10-10T04:11:09.353 に答える