Jquery, click() method on checked radio button

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.

try `$('input[name=category]:eq(0)').trigger('click');` – Rafay Apr 17 '11 at 19:27 — Rafay, Apr 17 '11 at 19:27

score 1 · Accepted Answer · answered Apr 17 '11 at 21:55

/********************************************************************************************
                                    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.

Rafay · Answer 2 · 2011-04-17T20:45:35.123

0

to trigger a click event you need to trigger it

EDIT:

also try this (jquery namespaced events)

in actions do $('input[name=category]').bind('click.category', function () {

and in controls part do $('input[name=category]:eq(1)').trigger('click.category');

HTH

edited Apr 17 '11 at 20:45

answered Apr 17 '11 at 19:28

Rafay

30,950
5
68
101

Thank you for your reply 3nigma. Unfortunately it didn't slideDown .frm_options div. – Revenant Apr 17 '11 at 20:23
Hello 3nigma, thank you for your reply once again but this still didn't do the trick :( – Revenant Apr 17 '11 at 20:57

score 0 · Answer 3 · answered Apr 17 '11 at 20:59

0

Are your code in sequential order, then write a code to generate it.

answered Apr 17 '11 at 20:59

X10nD

21,638
45
111
152

First controls later actions start, so yes they are in sequential order but I didn't understand what you mean "then write a code to generate it". – Revenant Apr 17 '11 at 21:05
assume if the jquery code as such `$(ixa1).click(function(){});` and then you have `$(ixa2).click(function(){});` where the ixa increases as ixa3..ixa4 just run a for loop to generate the code with the html, trust me it works like a charm – X10nD Apr 17 '11 at 21:07
Sorry Jean, I'm quite new about the subject so I can't really understand you clearly. I just want to manipulate click() event so $('.frm_options').slideDown(); will work on bind() event. – Revenant Apr 17 '11 at 21:13

Jquery, click() method on checked radio button

3 Answers3