Databases
StackOverflow2013
Postsdbo
POShow/Hide 2 (REQUIRED) Form Fields based on Checkbox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShow/Hide 2 (REQUIRED) Form Fields based on Checkbox
    text
    copied!<p>Okay, I am attempting to show 2 form fields based on a checkbox selection. These 2 form fields are required. So basically when the checkbox is selected I need to show the fields and have them required. Otherwise their hidden and thus not required. I've got the show hide sorta working. It doesn't reliably hide on deselection (selection of another checkbox in the group). Also when they are hidden they are still required so I get a nice error...</p> <p>I'm stuck. Anyone with a suggestion. I'm still pretty new. Thanks in advance. Here's what I have below:</p> <pre><code> &lt;label for="nothing"&gt; Test Method&lt;br/&gt; &lt;label&gt; &lt;input type="checkbox" class="testmethod" id="kickback" name="kickback" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" &lt;?= ( $settings['kickback'] == 'yes' ? 'checked = "checked"' : '' ) ?&gt;&gt; Kickback &lt;/label&gt; &lt;label&gt; &lt;input type="checkbox" class="testmethod" id="manual" name="manual" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" &lt;?= ( $settings['manual'] == 'yes' ? 'checked = "checked"' : '' ) ?&gt;&gt; Manual &lt;/label&gt; &lt;label&gt; &lt;input type="checkbox" class="testmethod" id="beastmode" name="beastmode" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" &lt;?= ( $settings['beastmode'] == 'yes' ? 'checked = "checked"' : '' ) ?&gt;&gt; Beast Mode &lt;/label&gt; &lt;/label&gt; &lt;label for="my-text-field" id="mytextfield" style="visibility:hidden"&gt; My Text Field &lt;em&gt;&amp;nbsp;&lt;small&gt;*Required*&lt;/small&gt;&lt;/em&gt; &lt;input type="text" name="mytextfield" value="&lt;?= $settings['mytextfield'] ?&gt;" tabindex="6" required/&gt; &lt;/label&gt; &lt;label for="my-number-field" id="mynumberfield" style="visibility:hidden"&gt; Number of Images &lt;em&gt;&amp;nbsp;&lt;small&gt;*Required*&lt;/small&gt;&lt;/em&gt; &lt;input type="number" name="mynumberfield" value="&lt;?= $settings['mynumberfield'] ?&gt;" tabindex="7" required/&gt; &lt;/label&gt; </code></pre> <p>And here's my JS</p> <pre><code>$("input.testmethod").click(function() { $('input:checkbox[class="' + $(this).attr('class') + '"]').prop('checked', false); $(this).prop('checked', true); }); function yesnoCheck() { if (document.getElementById('beastmode').checked) { document.getElementById('mytextfield').style.visibility = 'visible' document.getElementById('mynumberfield').style.visibility = 'visible'; } else { document.getElementById('mytextfield').style.visibility = 'hidden'; document.getElementById('mynumberfield').style.visibility = 'hidden'; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload