Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
JS: Restrict "show DIV if radio button selected" function to fieldset
Hi,
I have found this code to show/display a specific DIV depending on which radio button is selected:
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});(Source)
Since there are three fieldsets (sets of radio buttons), the DIV does vanish again if one clicks a radio button in another fieldset.
I would like to restrict this show/hide behaviour to that specific set of radio buttons (i. e. keep it independent from the other fieldsets).
Is there a way to restrict this function to a specific set of radio buttons (“fieldset”) so that this disturbing effect does not occur?
Thank you very much,
Alex
Last edited by ar (2023-08-12 11:13:32)
Offline
Re: JS: Restrict "show DIV if radio button selected" function to fieldset
Can you share the html from two of the radio button sets?
Offline
Re: JS: Restrict "show DIV if radio button selected" function to fieldset
This is the HTML, if you like you can also look in the source directly (see FYI post):
<label for="versicherung">Meine Versicherungsart:</label><br />
<fieldset style="" required><input type="radio" id="GKV" name="versicherung" value="GKV"><label for="GKV">gesetzlich</label> <input type="radio" id="PKV" name="versicherung" value="PKV"><label for="PKV">privat</label> <input type="radio" id="SZ" name="versicherung" value="SZ"><label for="SZ">ich zahle selbst</label></fieldset>This should be shown when radio button “gesetzlich” (value: GKV) is selected:
<div class="GKV box"><p>This should be shown. And it should hide when PKV or SZ is being selected. </p><div class="PKV box">another DIV being shown when PKV button is selected</div><div class="SZ box">another DIV being shown when SZ button is selected</div>The GKV DIV that is triggered contains radio buttons as well. And those radio buttons disappear, when in the following question a radio button is clicked, which is very confusing for my visitors:
<label for="antrag">Waren Sie in den vergangenen zwei Jahren bereits in einer Verhaltenstherapie?</label><br />
<fieldset style="" required><input type="radio" id="LZT" name="antrag" value="LZT"><label for="LZT">ja</label> <input type="radio" id="KZT" name="antrag" value="KZT"><label for="KZT">nein</label></fieldset></div>Then, at the end of my questionnaire, there is also a third fieldset. By clicking some of this items, the DIV “box” does also hide, which I don’t want:
<label for="video">Sind Sie offen für Videositzungen?</label><br />
<fieldset style="" required><input type="radio" id="VJ" name="video" value="VJ"><label for="VJ">auf jeden Fall</label> <input type="radio" id="VG" name="video" value="VG"><label for="VG">gelegentlich</label> <input type="radio" id="VN" name="video" value="VN"><label for="VN">nein</label></fieldset>So, to be concise: The content of GKV box, PKV box and SZ box should change, when the corresponding radio buttons INSIDE that fieldset are selected. But using other radio buttons in other fieldset should not interfere with that fieldset.
Your help is very much apprechiated.
Thank you very much,
Alex
Last edited by ar (2023-08-12 20:33:26)
Offline
Re: JS: Restrict "show DIV if radio button selected" function to fieldset
@agovella, you can see the source in the linked page.
@ar, looking at your particular situation, because your .box divs are outside the fieldset, it makes it more difficult to target them independently by identifying the parent fieldset. If you need a generic solution that will work in other situations, you could put the .box divs inside the outer fieldset, but in your particular situation, you only need the box switcher for the very first fieldset, as the other fieldsets don’t have any switchable panels.
Suggestion:
1. Add a class to your first fieldset so it looks like this:
<fieldset class="KVswitch" style="width:300px;padding-bottom:5px;margin-bottom:15px;" required>2. Then modify your jQuery function to only add the switching function to the radio buttons in that fieldset like this:
$(document).ready(function(){
$(".KVswitch").find('input[type="radio"]').click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});Instead of adding a click event handler to every radio input, it now adds it only the the radio buttons inside the fieldset with the class .KVswitch. The other radio inputs no longer run this function and hence don’t interfere with the box switching.
TXP Builders – finely-crafted code, design and txp
Offline
Re: JS: Restrict "show DIV if radio button selected" function to fieldset
Tausend Dank!! Thank you very much! — it works! :-)
My other question would have been how to prevent that PKV and SZ are getting two different IBAN/BIC forms, because there is only one necessary.
However, using just one DIV <div class="PKV SZ box"> instead of two <div class="PKV box"> and <div class="SZ box"> seems to combine it.
Do you also happen to know if this is the right way to achieve this?
Thanks again, I appreciate your time!
Have a pleasant evening,
Alex
Last edited by ar (2023-08-12 20:35:25)
Offline
Re: JS: Restrict "show DIV if radio button selected" function to fieldset
ar wrote #335657:
Tausend Dank!! Thank you very much! — it works! :-)
My other question would have been how to prevent that PKV and SZ are getting two different IBAN/BIC forms, because there is only one necessary.
However, using just one DIV
<div class="PKV SZ box">instead of two<div class="PKV box">and<div class="SZ box">seems to combine it.
Yes, having one div with both PKV and SZ classes allows you note the radio button choice while providing only one text input for the bank details. That looks fine to me.
TXP Builders – finely-crafted code, design and txp
Offline