Is there anyone about that is familiar with using jQuery to hide/show divs based on using radio buttons to select which div class to show/hide?

I'm almost there using some code I found online but the problem I am having
is when I reuse the same code for another section of the online form to
repeat the same functionality.

The set up is looks like this

OPTION 1

Two radio buttons offering an option A or B choice that in turn are linked to two divs below (each with a different class) that display (or not) based on
the button selected.

OPTION2

Two radio buttons offering an option A or B choice that in turn are linked to two divs below (each with a different class) that display (or not) based on
the button selected.



Now I can set an initial display state for all four classes in jQuery so for each option only one button is active and the associated div class is visible with the other hidden.

The issue is when I choose the other button for each option it's not just hiding the other div class associated with that option, it's hiding the other two div classes of the option not being changed.

Here's the jQuery

$('.ChooseGlobal').show()
$('.ChooseSpecific').hide()

$('.ChooseBinkP').show()
$('.ChooseQWK').hide()

$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".hubpass").not(targetBox).hide();
$(targetBox).show();
});
});

$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".txmode").not(targetBox).hide();
$(targetBox).show();
});
});

I essentially copied the first $(document).ready(function() and tweaked it
for the second set of radio button options,,,

Ideally I think I need to negate the $(".hubpass").not(targetBox).hide(); code to stop hiding everything on the page, using something more targeted instead.

It would be good if there's a way to state in jQuery to show/hide specific classes such that if one is on the other is off... and then be able reuse
that code for other radio button options later in the page.

Any help appreciated.

Best, Paul

--- Mystic BBS v1.12 A46 2020/08/26 (Windows/32)
* Origin: Agency BBS | Dunedin, New Zealand | agency.bbs.nz (21:1/101)

I know very little about jQuery, but...

$(".hubpass").not(targetBox).hide();

...would seem to be very good at:

it's hiding the
other two div classes of the option not being changed.

Since those are (I assume), not the targetBox.

I'd code around it by either being more specific, somehow (either straight up just saying which boxes to hide/show in a particular instance, or having a toggle variable that gets flipped, rather than using a general "hide
everything not this in this section".)

But, hopefully obviously, this is just my attempt at having _an_ answer for you. I do hope there are people who know something about jQuery that can help.

--- Mystic BBS v1.12 A46 2020/08/26 (Linux/64)
* Origin: Storm BBS (21:2/108)

var inputValue = $(this).attr("value");

Maybe it's because in both functions your inputValue uses "this" to define where the value is coming from, instead perhaps you should use the element name or id there?

I'm not great in javascript though, but that's my 2 cents worth =)

---
|14Best regards,
|11Ch|03rist|11ia|15n |11a|03ka |11Me|03aTLoT|11io|15N

|07ÄÄ |08[|10eml|08] |15ml@erb.pw |07ÄÄ |08[|10web|08] |15www.erb.pw |07ÄÄÄ¿ |07ÄÄ |08[|09fsx|08] |1521:1/158 |07ÄÄ |08[|11tqw|08] |151337:1/101 |07ÂÄÄÙ |07ÄÄ |08[|12rtn|08] |1580:774/81 |07ÄÂ |08[|14fdn|08] |152:250/5 |07ÄÄÄÙ
|07ÄÄ |08[|10ark|08] |1510:104/2 |07ÄÙ

--- Mystic BBS v1.12 A47 2020/12/04 (Linux/64)
* Origin: thE qUAntUm wOrmhOlE, rAmsgAtE, uK. bbs.erb.pw (21:1/158)

On 24 Dec 2020 at 10:18a, Adept pondered and said...

But, hopefully obviously, this is just my attempt at having _an_ answer for you. I do hope there are people who know something about jQuery that can help.

Thanks for the reply :)

I've made some progress and found this works to hide/show the divs I want to when a radio button is clicked.

$(function () {
$("input[name='PasswordChoice']").click(function () {
if ($("#globalPassword").is(":checked")) {
$("#ChooseSpecific").hide();
$("#ChooseGlobal").show();

} else {
$("#ChooseGlobal").hide();
$("#ChooseSpecific").show();
}
});
});

My next problem is trying to remove the 'required' element from inputs in a hidden div so the submission process runs smoothly.

I've been testing the following and can't seem to get things to work :(

$('input').attr('required', false)

$('input[id="bbsAreaFix"]').removeAttr('required');

$(":input").removeAttr("required");

So yeah, one step forward and another back it seems ...

--- Mystic BBS v1.12 A46 2020/08/26 (Windows/32)
* Origin: Agency BBS | Dunedin, New Zealand | agency.bbs.nz (21:1/101)

My next problem is trying to remove the 'required' element from inputs
in a hidden div so the submission process runs smoothly.

Have you tried setting a default value, so that it always has something? It seems like the way to do so is set the value as (some result) (or sign) "default value".

Maybe that's not an acceptable workaround, though.

--- Mystic BBS v1.12 A46 2020/08/26 (Linux/64)
* Origin: Storm BBS (21:2/108)

On 27 Dec 2020 at 10:55p, Adept pondered and said...

Have you tried setting a default value, so that it always has something? It seems like the way to do so is set the value as (some result) (or
sign) "default value".

Maybe that's not an acceptable workaround, though.

Thanks :)

Yep what I have been doing is setting some elements in the HTML with a 'required' attribute then working to remove it using jQuery id the section those elements of the form are nested in are not required to be completed because the user has chosen another option on the form. e.g. BinkP vs QWK

I'd been banging my head trying to remove the 'required' attribute using
syntax I had found online that was telling me it would work but yet when I checked it did not seem to :(

I made some headway today when I had an aha moment and realized the way I am checking success or failure of my scripting was incorrect. I was not looking
at the DOM output rather the unchanged source HTML. So now (long story short)
I think I am getting somewhere and also learning a bit about jQuery at the
same time as I am about BootStrap 4 and form building elements in HTML5...

My primary school had a motto 'Learn by Doing' and I am certainly doing that
at the moment. But I am taking it in measured steps spanning days of intermittent tinkering so as not to get too frustrated and also taking the
time to experiment.

--- Mystic BBS v1.12 A46 2020/08/26 (Windows/32)
* Origin: Agency BBS | Dunedin, New Zealand | agency.bbs.nz (21:1/101)

My primary school had a motto 'Learn by Doing' and I am certainly doing that at the moment. But I am taking it in measured steps spanning days of intermittent tinkering so as not to get too frustrated and also taking
the time to experiment.

Yeah, your story is interesting, and also very familiar-sounding. :)

I'm not sure how experienced coders deal with things, but it sometimes feels odd to have any idea about a framework or the syntax of doing pretty basic things.

And then there's always the bugs, of course, oftentimes being like what you experienced, where you were looking in the wrong place for a while.

Anyway, thanks for the updates, and do keep us posted on your progress.

--- Mystic BBS v1.12 A46 2020/08/26 (Linux/64)
* Origin: Storm BBS (21:2/108)