jquery hide feild

[hargi]

Just a bit stuck, I have this

$(function () {
            $('.dueDate').hide();
            $('#Pregnant').change(function () {
                if ($('#Pregnant').is(':checked')) {
                    $('.dueDate').show();
                } else {
                    $('.dueDate').hide();
                }
            });
}

So Basically in my form I the due date is hidden until the is pregnant box is ticked. This works fine on the create form view.
But in the edit form view i have a problem as that code works as it should. but not how i want it to.

If on the create form the pregnant box is ticked and the due date is filled in. On the edit page when the form loads the pregnant box is ticked but the due date is hided, until I click the pregnant box twice.

Im new to jquery functions

 

[planty]

You're setting the dueDate field to hidden on page-load regardless of whether pregnant is checked. One option is to just re-use the same logic that's in the onchange handler for when the page loads. e.g.

$(function () {
    var showOrHideDueDate = function () {
        if ($('#Pregnant').is(':checked')) {
            $('.dueDate').show();
        } else {
            $('.dueDate').hide();
        }
    };

    $('#Pregnant').change(function () {
        showOrHideDueDate();
    });

    // this will run on page-load
    showOrHideDueDate();
}

 

[Crowze]

Or, even simpler, trigger the change event right after binding the event handler.

$(function () {
            $('#Pregnant').on('change', function () {
                if ($('#Pregnant').is(':checked')) {
                    $('.dueDate').show();
                } else {
                    $('.dueDate').hide();
                }
            }).change();
}

You should also use the .on() function as above, I believe all the .click, .change etc. handlers are deprecated.

 

[AJK]

You should also use the .on() function as above, I believe all the .click, .change etc. handlers are deprecated.

Not quite. The click() function is just a shortcut for .on("click") - or indeed .trigger("click") - so the following two lines of code do the same thing:

$("#selector").click(function() { return false; });
$("#selector").on("click", function() { return false; });

What you're probably thinking is the concept of using .on("click") to attach handlers to an ancestor DOM element, allowing you - for example - to add and remove descendant elements from the DOM without having to rebind event handlers.

So instead of the above, you could do this:

$("body").on("click", "#selector", function() { return false; });

(Some possibly relevant reading on stackoverflow.)

 

[Crowze]

Not quite. The click() function is just a shortcut for .on("click") - or indeed .trigger("click") - so the following two lines of code do the same thing:

$("#selector").click(function() { return false; });
$("#selector").on("click", function() { return false; });

What you're probably thinking is the concept of using .on("click") to attach handlers to an ancestor DOM element, allowing you - for example - to add and remove descendant elements from the DOM without having to rebind event handlers.

So instead of the above, you could do this:

$("body").on("click", "#selector", function() { return false; });

(Some possibly relevant reading on stackoverflow.)

Not what I was thinking of, I was sure they we're taking out a whole load of those shortcuts as part of the slimming down for 2.0. Either they kept them due to popular demand, or I'm just plain mistaken . As you say, it works either way.

 

[hargi]

I have set up a cut down JSFiddle http://jsfiddle.net/Cs77M/ this works and i can keep repeating this

if (!$('#Pregnant').is(':checked'))
                $('.dueDate').hide();
            $('#Pregnant').change(function () {
                if ($('#Pregnant').is(':checked')) {
                    $('.dueDate').show();
                } else {
                    $('#DueDate').val('');
                    $('.dueDate').hide();
                }
            });

and change the id and class selectors for stuff is there a way to turn this into a function that I can pass variables to

eg
var thingtoselect1
var thingtoselect2

var thingtohide1
var thingtohide2

does that make sense. Im happy doing it the way i have it but I dont think its the best way WET

 

[t31os]

You don't need all that if/else or show and hide, toggle accepts a boolean value to set the visibility state, you could trim that down to pretty much what Crowze provided before.

$(function(){
    $('#Pregnant').change( function() {
        $('.dueDate').toggle( $('#Pregnant').is(':checked') );
    }).change();
});

Nice and trim..

 

[GravyMonster]

You can also change the second '#Pregnant' to 'this' to save another call to the DOM:

$(function(){
    $('#Pregnant').change(function() {
        $('.dueDate').toggle($(this).is(':checked'));
    }).change();
});

Or even just use the native DOM element, saving having to create a jQuery object:

$(function(){
    $('#Pregnant').change(function() {
        $('.dueDate').toggle(this.checked);
    }).change();
});