CODEWITHSUNDEEP
phpjqueryhtmlforms
Chad Cardiff
Chad Cardiff

Reputation: 479

Second input based on what was selected in first input

I have two inputs which correspond with each other on the SAME PAGE and in the SAME FORM.

The input's are:

Select Event:
<input type="radio" name="type" value="Birthday" id="Birthday" CHECKED /> <label for="Birthday">Birthday</label><br />
<input type="radio" name="type" value="Anniversary" id="Anniversary" /> <label for="Anniversary">Anniversary</label><br />
<input type="radio" name="type" value="Holiday" id="Holiday" /> <label for="Holiday">Holiday</label><br />

Now I need to have the input selected above to correspond to the VALUE as well as IMG SRC of the input below...


For example, let's say, if the Birthday radio above was selected then radio below to be:

<input type="radio" name="design" value="Birthday_design_1" id="1" CHECKED /> <label for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Birthday_design_2" id="2" /> <label for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>

OR IF Anniversary radio above is filled above then radio below would be:

<input type="radio" name="design" value="Anniversary_design_1" id="1" CHECKED /> <label for="1"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Anniversary_design_2" id="2" /> <label for="1"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>

OR IF Holiday radio above is filled above then radio below would be:

<input type="radio" name="design" value="Holiday_design_1" id="1" CHECKED /> <label for="1"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Holiday_design_2" id="2" /> <label for="1"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>

As you may be able to see out, the VALUE of the input changes as well does the IMG SRC of the radio.

Please help, I believe jQUERY will be needed for this.

Thanks,
Chad.

Upvotes: 0

Views: 353

Answers (2)

Meowing Cat
Meowing Cat

Reputation: 152

<input group_class="group-1" class="event_radio" type="radio" name="type" value="Birthday" id="Birthday" CHECKED /> <label for="Birthday">Birthday</label><br />
<input group_class="group-2" class="event_radio" type="radio" name="type" value="Anniversary" id="Anniversary" /> <label for="Anniversary">Anniversary</label><br />
<input group_class="group-3" class="event_radio" type="radio" name="type" value="Holiday" id="Holiday" /> <label for="Holiday">Holiday</label><br />

<input class="group-1" type="radio" name="design" value="Birthday_design_1" id="1" CHECKED /> <label class="group-1" for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-1" type="radio" name="design" value="Birthday_design_2" id="2" /> <label class="group-1" for="2"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>

<input class="group-2" type="radio" name="design" value="Anniversary_design_1" id="3" CHECKED /> <label class="group-2" for="3"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-2" type="radio" name="design" value="Anniversary_design_2" id="4" /> <label class="group-2" for="4"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>

<input class="group-3" type="radio" name="design" value="Holiday_design_1" id="5" CHECKED /> <label class="group-3" for="5"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-3" type="radio" name="design" value="Holiday_design_2" id="6" /> <label class="group-3" for="6"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>

css:

.group-1, .group-2, .group-3 { display: none; }

and javascript:

$(document).ready(function () {
    $('.event_radio').click(function () {
        $radio = $(this);

        $('.group-1, .group-2, .group3').fadeOut('fast');

        $('.'+$radio.attr('group_class')).fadeIn('fast');
    });
});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

you haven't mentioned the parent of first three buttons.that would be easier to bind change event without affecting other button on page.You need to write change event for first three radio buttons.then check for the id.and if ids are matched,do the stuff accordingly.

$('input:radio').change(
                     function(){
                     if($(this).attr("id")=="Birthday")
                     {
                      //show birthday category buttons
                     }
                     if($(this).attr("id")=="Anniversary")
                     {
                      //show Anniversary category buttons
                     }
                     if($(this).attr("id")=="Holiday")
                      {
                      //show Holiday category buttons
                     }
                     else{
                      //do nothing for other radio buttons....
                      }
                    }
                );

Upvotes: 1

Related Questions