CODEWITHSUNDEEP
javascriptjqueryhtmlbuttontextbox
ShoibAhamed
ShoibAhamed

Reputation: 359

Enable a button if value is entered in a textbox of selected radio button

I have three radio buttons which are three options, on selecting, their sub-options will be displayed. The next button should be enabled when some text is entered in the currently selected option's sub-option text box. Entering all sub-options under an option is a must. So i want to enable the next button if values are entered in all text boxes under a selected option and are of some minimum defined length. How can i do this?

Here is the jsfiddle link: http://jsfiddle.net/yYJQY/2/

My code:

<div>
<input type="radio" value="1" name="options" />Option1
<input type="radio" value="2" name="options" />Option2
<input type="radio" value="3" name="options" />Option3
</div>
<div id="option1" style="display: none;">
<label>Enter Value:</label><input type="text" name="value_option1" />
</div>
<div id="option2" style="display: none;">
<label>Enter value1:</label><input type="text" name="value_option2_1" /><br />
<label>Enter value2:</label><input type="text" name="value_option2_2" />
</div>
<div id="option3" style="display: none;">
<label>Select a number:</label>
<select name="quantity" id="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select> <br />
<input type="text" id="val1" /> <br />
<input type="text" id="val2" /> <br />
<input type="text" id="val3" /> <br />
</div>
<button disabled>NEXT</button>

My Script:

$(document).ready(function () {
$('input[name=options]').bind('change' ,function() {
if($(this).val() == '1') {
    $('#option1').show();
    $('#option2').hide();
    $('#option3').hide();
}
if($(this).val() == '2') {
    $('#option2').show();
    $('#option1').hide();
    $('#option3').hide();
}
if($(this).val() == '3') {
    $('#option2').hide();
    $('#option1').hide();
    $('#option3').show();
}
})
$('#val2').hide();
$('#val3').hide();
$('#number').bind('change', function() {
    if($(this).val() == '1') {
        $('#val1').show();
        $('#val2').hide();
        $('#val3').hide();
    }
    if($(this).val() == '2') {
        $('#val1').show();
        $('#val2').show();
        $('#val3').hide();
    }
    if($(this).val() == '3') {
        $('#val1').show();
        $('#val2').show();
        $('#val3').show();
    }
})   
})

Any help is appreciated. Thank you!!

Upvotes: 0

Views: 1555

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function () {
    $('input[name=options]').bind('change' ,function() {
        $('button').prop('disabled', true)
        if($(this).val() == '1') {
            $('#option1').show();
            $('#option2').hide();
            $('#option3').hide();
        }
        if($(this).val() == '2') {
            $('#option2').show();
            $('#option1').hide();
            $('#option3').hide();
        }
        if($(this).val() == '3') {
            $('#option2').hide();
            $('#option1').hide();
            $('#option3').show();
        }
    })
    $('#val2').hide();
    $('#val3').hide();
    $('#number').bind('change', function() {
        if($(this).val() == '1') {
            $('#val1').show();
            $('#val2').hide();
            $('#val3').hide();
        }
        if($(this).val() == '2') {
            $('#val1').show();
            $('#val2').show();
            $('#val3').hide();
        }
        if($(this).val() == '3') {
            $('#val1').show();
            $('#val2').show();
            $('#val3').show();
        }
        testButton(this)
    });

    function testButton(el){
        var inputs = $(el).closest('div[id^="option"]').find('input:text:visible');
        var flag = true;
        inputs.each(function(){
            if(!$(this).val()){
                flag = false;
                return false;
            }
        });
        $('button').prop('disabled', !flag)
    }

    $('input:text').on('change', function(){
        testButton(this)
    })

})

Demo: Fiddle

Upvotes: 2

Related Questions