Need Help with Form js

Mike Richards · August 2016

Hi all, we are creating a new form for our foundation as our last forms weren't ideal. We have created all of the necessary elements and are beginning now to work on the styling and the drop downs.

One problem that I am facing is, we want to hide things like honoree's unless the box is selected. I know this is done with js but seeing as though I don't know js, does anyone have some code I could put into my <head> document to accomplish this?

Thank you for your time!

Romany Nassief · August 2016


<span>Assuming your HTML like that:<br/></span>


<span><input</span><span> </span><span>type</span><span>=</span><span>"checkbox"</span><span> <span style="color:#0000CD;">data-toggle="#</span></span>honoree<span><span style="color:#0000CD;">"</span>> Show/Hide</span><span> toggle box<br/></span><span><div</span><span> </span><span style="color:#0000CD;"><span>id</span><span>=</span><span>"</span></span>honoree<span style="color:#0000CD;"><span>"</span></span><span>></span><span><br/></span><span>Show/hide content goes here<br/></span><span></div></span>

You can make a jquery like that:


<span>$</span><span>(</span><span>'[data-toggle]'</span><span>)</span>.bind('click change', function() {


<span>$</span><span>(</span><span>$(this).data('toggle')</span><span>).</span><span>toggle</span><span>(</span><span>this</span><span>.</span><span>checked</span><span>);</span>


}).change();

You can use it as many times with other checkboxes to show/hide panels based on checkbox status:

<input type="checkbox" data-toggle="#example1">

<div id="example1">

#1- Show/hide content goes here

</div>

<hr>

<input type="checkbox" data-toggle="#example2" checked="true">

<div id="example2">

#2- Show/hide content goes here

</div>

Daniel Hartanto · September 2016

Mike,

There is no single snippet package where you would be able to to throw in straight away without I would say medium to heavy dose of repurposing / re-tweaking the samples that we share here in the community; this is because every template is coded differently when it comes to layout structure as well as approach each of us used to develop since they would have serve distinct purposes for each org, not to mentioned the way we named uniquely identify those HTML component being used in our template a.k.a. selectors, how we form them in such format (i.e. camelcase or something else), some templates are developed to be compatible with older browsers vs HTML5 browser compliant only which that would drive further the approach one would take (that's what I mean by example of serving different purposes / requirements) -- and all of these are critical when it comes to DOM manipulation in Javascript.

What Romany has is good starting point on building yours from direction wise, but on top of that you would have to populate the listener with functions you wanted the webpage / Javascript to do when the toggle is clicked. Notice in his example he's using the selector ID "examples", "examples2" and your actual one might not be coded exactly as his hence the need to re-tweak/repurpose as you analyze and digest his snippet.

Here's another live/actual toggle show/hide behavior implementation that we have on our donation form (although not necessarily to hide the 'honoree portion') -- on the "Page 2" past the first section of the form, there is a dropdown that would hide / show the eCard / Print Component for one to toggle as he/she decided whether or not to send eCard to honor someone.

https://donations.diabetes.org/site/Donation2?df_id=19105&19105.donation=form1&loc=header&s_src=dorg&s_subsrc=in-memorial

This is a demonstration of what we mean by "populating" your listener with actual Javascript functionality (i.e. when one select Print Card, it won't display the eCard selection component) etc.

Tips: You or your developer team will need to view / analyze / digest these with the use of good console debugger tool (Nowadays browser has built-in one, just press F12, and you could highlight each selectors in corelation with their Javascript DOM manipulation function.

Hope it helps shed some lights, it's an undertaking but a satisfying one hopefully

regards,

Daniel

Romany Nassief:


<span>Assuming your HTML like that:<br/></span>


<span><input</span><span> </span><span>type</span><span>=</span><span>"checkbox"</span><span> <span style="color:#0000CD;">data-toggle="#</span></span>honoree<span><span style="color:#0000CD;">"</span>> Show/Hide</span><span> toggle box<br/></span><span><div</span><span> </span><span style="color:#0000CD;"><span>id</span><span>=</span><span>"</span></span>honoree<span style="color:#0000CD;"><span>"</span></span><span>></span><span><br/></span><span>Show/hide content goes here<br/></span><span></div></span>

You can make a jquery like that:


<span>$</span><span>(</span><span>'[data-toggle]'</span><span>)</span>.bind('click change', function() {


<span>$</span><span>(</span><span>$(this).data('toggle')</span><span>).</span><span>toggle</span><span>(</span><span>this</span><span>.</span><span>checked</span><span>);</span>


}).change();

You can use it as many times with other checkboxes to show/hide panels based on checkbox status:

<input type="checkbox" data-toggle="#example1">

<div id="example1">

#1- Show/hide content goes here

</div>

<hr>

<input type="checkbox" data-toggle="#example2" checked="true">

<div id="example2">

#2- Show/hide content goes here

</div>

Need Help with Form js

Comments

Categories