CODEWITHSUNDEEP
javascriptjquery
Wax
Wax

Reputation: 323

.toggle() issue with jquery

I have a form wherein there is a question where you can select multiple answer including Others by ticking the checkboxes. Then you tick others, it's suppose to show a textbox and when unticked, it should hide the textbox again.

What happens is when I untick it, yes it hides but the validation error still pops up. I'm not sure what's causing it. In other words, despite the fact that it is hidden, it is still validating.

Here's my javascript:

$("input[name = 'production-up']").change(function () {
    //check if the selected option is others
    if (this.value === "other") {
        //toggle textbox visibility
        $("#productionUpOther").toggle();
    }
});

and my HTML:

<span id='productionUp' class='level'>
                <p>Production - Reasons why it is up. Click as many as apply.</p>
                <input type='checkbox' name='production-up' value='Increase in demand' required>Increase in demand <br/>
                <input type='checkbox' name='production-up' value='Expected increase in demand'>Expected increase in demand <br/> 
                <input type='checkbox' name='production-up' value='Fullfillment of past orders'>Fulfillment of past orders <br/>
                <input type='checkbox' name='production-up' value='Increased marketing activity'>Increased marketing activity <br/>
                <input id="other" type="checkbox" name="production-up" value='other' />Other
                <input id='productionUpOther' name='other-production-up' type='text' required/>
            </span>

Be informed that this is just a part of my code. Any ideas on how to do something about this?!

Here you can that I ticked other This is what it looks like:

But when I untick it and press Next it still needs to be validated.

enter image description here

Upvotes: 1

Views: 74

Answers (4)

Nicolas
Nicolas

Reputation: 1870

What you wanna do is disabling the text field 'other'. So in this case, I would use the 'disabled' property and then hide the field using CSS.

An example could be :

JS

$("#productionUpOther").prop('disabled', true);
$("input[name = 'production-up']").change(function () {
    var hasTheFieldToBeEnabled = this.value === "other" && this.checked;
    $("#productionUpOther").prop('disabled', !hasTheFieldToBeEnabled);
});

CSS

:disabled
{
    display: none;
}

Here, all the disabled fields are hidden... But CSS is your friend if that's not what you want ^^

/!\ Careful: IE <8 doesn't support ':disabled', so if you want to support IE 8, you should add a class to the input when disabling it

Upvotes: 2

Satpal
Satpal

Reputation: 133403

You can directly use ID Selector ("#ID")

$("input#other").change(function () {
     $("#productionUpOther").toggle(this.checked);
     $("#productionUpOther").prop('required', this.checked);
});

Upvotes: 1

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50563

You can try this:

$("input[name = 'production-up']").change(function () {
    //check if the selected option is others
    if (this.value === "other") {
        //toggle textbox visibility
        $("#productionUpOther").toggle();
        if (this.checked) {
           $("#productionUpOther").attr('required','1');
        } else {
           $("#productionUpOther").removeAttr('required');
        }
    }
});

Upvotes: 2

Satish Sharma
Satish Sharma

Reputation: 9625

try this

$("#productionUpOther").hide();
    $("input[name = 'production-up']").change(function () {
        //check if the selected option is others
        if (this.value === "other"  && this.checked) {
            //toggle textbox visibility
            $("#productionUpOther").show();
        }
        else{
            $("#productionUpOther").hide();
        }
    });

see DEMO

Upvotes: 1

Related Questions