php - Second input based on what was selected in first input -

php - Second input based on what was selected in first input -

i have 2 inputs correspond each other on same page , in 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 need have input selected above correspond value img src of input below...

for example, let's say, if birthday radio above selected radio below 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 filled above radio below 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 filled above radio below 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 may able see out, value of input changes img src of radio.

please help, believe jquery needed this.

thanks, chad.

<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'); }); });

php jquery html forms