I have a couple of examples from forms I created for radios
only. It requires javascript. It is all done on the client
side. No AJAX is used to make additional requests back to the
web app to show/hide additional form sections. The javascript
may be a little different between checkboxes, radios, and
selects, so adjust extracting the value of the form object
accordingly. See:
http://api.jquery.com/category/selectors/
When the forms are submitted and validated, I ignore irrelevant
values and validate only those that matter.
This example has nested dependencies. Try toggling Individual's
Role. While toggled to "Player", select each option for Send
Off Reason to see dependency magic.
http://www.norcalreferees.com/sendoff/
This is a simpler example without nested complexity. Click
Title options.
http://www.norcalreferees.com/incident_report/
HTML:
<div id="sorc_hide" class="hidden">
<input type="radio" name="send_off_reason"
id="send_off_reason_1" value="CSO"> <label
for="send_off_reason_1" id="send_off_reason_1_label">Coach
Dismissed for Irresponsible Behavior</label> <br></div>
You need to use a CSS class to show/hide the div:
.hidden {
display: none;
visibility: hidden;
}
Javascripts are kept in a concatenated and compressed external
file and requires jQuery. I extracted the relevant portion for
the examples.
$(document).ready(function() {
function b() {
var g = $("input[name=ind_sent_off_was]:radio:checked").val();
var i = $("input[name=send_off_reason]:radio:checked").val();
var e = $("input[name=lang_at]:radio:checked").val();
if (g == "Player") {
$("#player_id_hide").removeClass("hidden");
$("#coach_id_hide").addClass("hidden");
$("#sorp_hide").removeClass("hidden");
$("#sorc_hide").addClass("hidden");
if (i == "OIAL") {
$("#specific_lang_gest_hide").removeClass("hidden");
$("#lang_at_hide").removeClass("hidden");
if (e == "Other") {
$("#lang_at_other_hide").removeClass("hidden")
} else {
$("#lang_at_other_hide").addClass("hidden")
}
} else {
$("#specific_lang_gest_hide").addClass("hidden");
$("#lang_at_hide").addClass("hidden");
$("#lang_at_other_hide").addClass("hidden")
}
} else {
if (g == "Coach") {
$("#player_id_hide").addClass("hidden");
$("#coach_id_hide").removeClass("hidden");
$("#sorp_hide").addClass("hidden");
$("#sorc_hide").removeClass("hidden");
$("#specific_lang_gest_hide").addClass("hidden");
$("#lang_at_hide").addClass("hidden");
$("#lang_at_other_hide").addClass("hidden")
} else {
$("#player_id_hide").addClass("hidden");
$("#coach_id_hide").addClass("hidden");
$("#sorp_hide").addClass("hidden");
$("#sorc_hide").addClass("hidden");
$("#specific_lang_gest_hide").addClass("hidden");
$("#lang_at_hide").addClass("hidden");
$("#lang_at_other_hide").addClass("hidden")
}
}
var d = $("input[name=title]:radio:checked").val();
if (d == "Other") {
$("#title_other_hide").removeClass("hidden")
} else {
$("#title_other_hide").addClass("hidden")
}
if (d == "Coach" || d == "Assistant Coach" || d ==
"Team Parent") {
$("#team_affil_hide").removeClass("hidden")
} else {
$("#team_affil_hide").addClass("hidden")
}
var c = $("input[name=league]:radio:checked").val();
if (c == "Other") {
$("#league_other_hide").removeClass("hidden")
} else {
$("#league_other_hide").addClass("hidden")
}
var f = $("select[name=type_incident] option:selected").val();
if (f == "Coach" || f == "Player") {
$("#committer_name_hide").removeClass("hidden");
$("#committer_team_hide").removeClass("hidden")
} else {
if (f == "Referee") {
$("#committer_name_hide").removeClass("hidden");
$("#committer_team_hide").addClass("hidden")
} else {
if (f == "Team") {
$("#committer_name_hide").addClass("hidden");
$("#committer_team_hide").removeClass("hidden")
} else {
$("#committer_name_hide").addClass("hidden");
$("#committer_team_hide").addClass("hidden")
}
}
}
}
function a() {
var d = $("input[name=ind_sent_off_was]:radio:checked").val();
if (d == "Coach") {
$("input[name=send_off_reason]")[0].checked = true
} else {
$("input[name=send_off_reason]")[0].checked = false
}
}
b();
$("input[name=ind_sent_off_was]:radio").click(b);
$("input[name=send_off_reason]:radio").click(b);
$("input[name=lang_at]:radio").click(b);
$("input[name=title]:radio").click(b);
$("input[name=league]:radio").click(b);
$("select[name=type_incident]").change(b);
a();
$("input[name=ind_sent_off_was]:radio").click(a)
});
$("#league").change(function() {
var a = $("#league option:selected").val();
if (a == "2010_SOR_O-_") {
$("#league_other_hide").removeClass("hidden")
} else {
$("#league_other_hide").addClass("hidden")
}
}).trigger("change");
--steve
On 12/8/11 at 1:03 PM, [email protected] (not a web
developer) pronounced:
Hello,
I am not a web developer. I am trying to make a simple web app that
allows me to have a single form with 7-8 radio buttons, 5 or so text
input boxes, a drop-down menu and 26 check boxes. That is something I
can do. However, I would like to have the ability to make some radio
buttons or text boxes disappear or appear based on the current
selections in the form. I am struggling to find a way to do this. If
someone has an example they could point me to or some general
recommendations, that would be fantastic.
Cheers
--steve
--
You received this message because you are subscribed to the Google Groups
"pylons-discuss" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/pylons-discuss?hl=en.
