Question

I created a huge form. I have to do many actions with Jquery. I have completed the part where I can make actions. It is time for me to do controls.

By controls I mean, let’s say I will edit the data and I have to gather which form element is selected / checked etc., depending on variables I have to show extra form elements.

I already coded over 300 lines of Jquery just for actions. I have to do controls now but I don’t want to copy and paste and edit over 300 lines of Jquery code so I tried to go lazy way but it didn’t work.

// Category
if ($('input[name=category]:checked').val() == 1) {
    $('input[name=category]:eq(1)').click();
}
// Product
else if ($('input[name=category]:checked').val() == 0) {
    $('input[name=category]:eq(0)').click();
}
// Undefined Value
else {
    $('.frm_options').slideUp();
}

I have no idea why code above is not working. I could see it is changing checked attribute of radio button element but no it is not clicking so it will display the rest of the form.

/********************************************************************************************
                                    ACTIONS
********************************************************************************************/
$('input[name=category]').bind('click', function () {
    // Show rest of the form
    $('.frm_options').slideDown();

    // Product Specific
    if ($(this).val() == 0) {
        $('.frm_category_0').fadeIn(1000);
        $('.frm_category_1').fadeOut(1000);
    }
    // Category Specific
    else if ($(this).val () == 1) {
        $('.frm_category_1').fadeIn(1000);
        $('.frm_category_0').fadeOut(1000);
        }
        // Undefined Value, Hide everything
        else{
                $('.frm_options').slideUp();
                $('.frm_category_1').slideUp();
                $('.frm_category_0').slideUp();
        }
});

I guess it is more clear now what I am trying to do here. Simply I am trying to manipulate click function so I don’t have to write all the codes again.

Anyone knows solution for this problem I’m having? I will be really glad if anyone could help me out with my problem here.

Thank you in advance.

Answer 1

/********************************************************************************************
                                    ACTIONS
********************************************************************************************/
$('input[name=category]').bind('click', function () {
    // Show rest of the form
    $('.frm_options').slideDown();

    // Product Specific
    if ($(this).val() == 0) {
        $('.frm_category_0').fadeIn(1000);
        $('.frm_category_1').fadeOut(1000);
    }
    // Category Specific
    else if ($(this).val () == 1) {
        $('.frm_category_1').fadeIn(1000);
        $('.frm_category_0').fadeOut(1000);
        }
        // Undefined Value, Hide everything
        else{
                $('.frm_options').slideUp();
                $('.frm_category_1').slideUp();
                $('.frm_category_0').slideUp();
        }
});


// Category
if ($('input.category:checked').val() == 1) {
    $('input.category:eq(1)').click();
}
// Product
else if ($('input.category:checked').val() == 0) {
    $('input.category:eq(0)').click();
}
// Undefined Value
else {
    $('.frm_options').slideUp();
}// Category
if ($('input[name=category]:checked').val() == 1) {
    $('input[name=category]:eq(1)').click();
}
// Product
else if ($('input[name=category]:checked').val() == 0) {
    $('input[name=category]:eq(0)').click();
}
// Undefined Value
else {
    $('.frm_options').slideUp();
}

You want to move your calls to .click below your .bind call. Otherwise your clicking on elements before you’ve attached the event handlers.