0

I want to remove HTML field according to Yes/No condition. Currently, all code that I am using I have submitted below to make understand better.

I want when I select Yes it will remove No Field/Input/Box & if I select No it will remove Yes Field/Input/Box.

function AutoCheck() {
if (document.getElementById('yesCheck').checked) {
  document.getElementById('ifYes').style.visibility = 'visible';
} else {
  document.getElementById('ifYes').style.visibility = 'hidden';
}     

if (document.getElementById('noCheck').checked) {
  document.getElementById('ifNo').style.visibility = 'visible';
} else {
  document.getElementById('ifNo').style.visibility = 'hidden';
}
<div>
  <label class="radio">
  <label style="float: left; width: 90px;"><input name="auto" id="yesCheck" value="1" type="radio" onclick="javascript:AutoCheck();"> Auto</label>
  <label style="float: left; width: 90px;"><input name="auto" id="noCheck" value="0" type="radio" onclick="javascript:AutoCheck();"> Manual</label>
</div>
  
<div id="ifNo" style="visibility:hidden">
  <input id="mcstore_limit" name="mcstore_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
    
  <div id="ifYes" style="visibility:hidden">
    <input id="initial_limit" name="initial_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
    <input id="acstore_limit" name="acstore_limit" placeholder="Initial Store Limit" type="number" min="1" step="1">
    <input id="auto_limit" name="auto_limit" placeholder="Auto Increment Limit" type="number" min="1" step="1">
  </div>
</div>

Update

I am using Jscripts to remove a field, because there are two field names the same to input data into the database. Here is my HTML code:

<div class="control-group">
    <label class="control-label" style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" for="prefix">Select Storing Mode</label>
    <div class="controls">
        <label class="radio">
            <label style="float: left; width: 90px;">
                <input name="auto" id="yesCheck" value="1" type="radio" onclick="javascript:AutoCheck();"> Auto
            </label>
            <label style="float: left; width: 90px;">
                <input name="auto" id="noCheck" value="0" type="radio" onclick="javascript:AutoCheck();"> Manual
            </label>
        </label>
    </div>
</div>
    
<div class="control-group">
    <label class="control-label" style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" for="cstore_limit">Caller or Callee Store*</label>
    <div class="controls">
        <div id="ifNo" style="visibility:hidden">
            <input style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" id="cstore_limit" name="cstore_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span>
        </div>
        <div id="ifYes" style="visibility:hidden">
            <input style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" id="initial_limit" name="initial_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span><br>
    
            <input style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold;margin-top: 5px;" id="cstore_limit" name="cstore_limit" placeholder="Initial Store Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span><br>
    
            <input style="font-family:Verdana, Geneva, sans-serif;font-size:12x;font-weight:bold;margin-top: 5px;" id="auto_limit" name="auto_limit" placeholder="Auto Increment Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span><br>
        </div>
    </div>
</div>

See, there are two fields with the same name & id also cstore_limit to store in DB, but if I use CSS in DB storing value 0 because there is the same field trying to store. Where have I gone wrong?

Improve this question

2 Answers 2

Reset to default
2

JavaScript isn't needed for hide/show if you are using radio buttons and/or checkboxes. The following is required for a pure CSS solution:

HTML - Link Checkboxes/Radio Buttons and Labels

  • Checkboxes and/or radio buttons with #id

  • A label for each chx (a.k.a. checkbox(es)) and rad (a.k.a. radio button(s)) with [for="#ID of chx or rad"]

    • Each paired chx/rad|label combo are linked in a way that if the label gets clicked then its associated chx/rad is also clicked if both are in the same document.

      <label for='ID' >REMOTE BUTTON</label>

      <input id='ID' type='checkbox'>

CSS - :checked Pseudo-class and Adjacent Sibling Combinator

  • Hide chx/rad and the elements you wish to show/hide.

    input[type="radio"] { display:none }

  • For each target (a.k.a. show/hide element), place a chx/rad before it in HTML. This type of positioning is called Adjacent Sibling. In the perspective of the chx/rad, it must be the chx\rad first (like an older brother/sister) then target next (like a younger brother/sister).

    • A special CSS selector called the Adjacent Sibling Combinator can isolate a sibling pair (or pairs) using a "+" with or without the use of the usual #id, .class, or [attribute]:

      input[type="radio"] + fieldset { display:none}

      Older Brother + Younger Brother { CSS style rules for Younger Brother}

  • Alternative positions can be used without the ASComb (a.k.a. Adjacent Sibling Combinator). Instead of chx/rad being the preceding sibling older sister to the target, it can be an ancestor. An ancestor is a parent element to the target, or simply put: the target's parent, grandmother, great grandpa, etc.

    • Although it is a feasible selector, it is harder to isolate in complex and/or cluttered HTML layouts.

      input[type="radio"] fieldset { display:none}

      Mother/Father                 Son/Daughter

  • chx/rad can invoke changes upon elements that are in certain positions in relation to the chx/rad when in and out of checked state. This checked state is more effective when chx/rad and target are isolated (using ASComb). The pseudo-class selector :checked acts like a switch if paired up as Mom and Son (ok) or Big Sister and Little Brother (best):

    • :checked applies to chx/rad state exclusively. The following example shows the final CSS rule with all the previously mentioned selector, and positioning.

      input[type="radio"]:checked + fieldset { display:block }

References

Exposing Form Fields Radio Button CSS

The Checkbox Hack

Pure CSS Accessible Checkboxes and Radio Buttons

Demo

.button {
  float: left;
  width: 90px;
  border: 3px ridge grey;
  border-radius: 6px;
  text-align: center;
  margin: 5px;
  cursor:pointer;
}

label {
  display: inline-block;
  width: 19ch
}

[type='number'] {
  width: 8ch
}

#y,
#Y,
#N,
#n {
  display: none;
}

#N:checked+fieldset,
#Y:checked+fieldset {
  display: block;
}
<fieldset>
  <legend>Limits</legend>
  <label for='Y' class='button'>Auto</label>

  <label for='N' class='button'>Manual</label>
</fieldset>

<input id="N" name="auto" value="0" type="radio">

<fieldset id="n">
  <legend>Negative</legend>

  <label>MC MAX Store Limit:&nbsp;</label>
  <input id="mc" name="mc" type="number" min="1" step="1">

</fieldset>

<input id='Y' name="auto" value="1" type="radio" checked=true>

<fieldset id="y">
  <legend>Affirmative</legend>

  <label>Initial Store Limit:&nbsp;</label>
  <input id="init" name="init" type="number" min="1" step="1">
  <br>

  <label>AC MAX Store Limit:&nbsp;</label>
  <input id="ac" name="ac" type="number" min="1" step="1">
  <br>

  <label>Auto Increment Limit:&nbsp;</label>
  <input id="auto" name="auto" type="number" min="1" step="1">

</fieldset>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Judging by your code, what's currently happening is that when the yesCheck is checked, everything is hidden.

By moving one of the extra up to after the "mcstore_limit" input, it will then function correctly:

<div id="ifNo" style="visibility:hidden">
<input id="mcstore_limit" name="mcstore_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
</div>

<div id="ifYes" style="visibility:hidden">
<input id="initial_limit" name="initial_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
<input id="acstore_limit" name="acstore_limit" placeholder="Initial Store Limit" type="number" min="1" step="1">
<input id="auto_limit" name="auto_limit" placeholder="Auto Increment Limit" type="number" min="1" step="1">
</div>
Improve this answer

1 Comment

Thanks for your replay, I just checked your replay now, & I was done it earlier, & yes you are right by mistakenly I removed </div> thanks for your reply. Now I wat another info, when I select "Yes" its remove "No" but then if I select again "No" happen nothing I mean not restore the table until reload the page can I make different like if I Unchecked & checked again it will again restore the field...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.