How to show/hide a field on dropdown change?

Question

I searched Stackoverflow and found lots of answers how I can show/hide a field on dropdown change by jQuery or simple inline js. But my problem is with using it inside a table.

For start let's keep it easy and use inline simple js instead of jQuery. I want if recaptcha is chosen then private and public key fields will be visible. I use a table, so the entire row should be hidden. and the rest of form should become upper to be immediately under select menu if those fields should be hidden to avoid gap between rows in table. But it doesn't work for row. and only the second field will be in/invisible because I added the style on field rather than on tr. (just for testing for first one I used it for tr and for second one I used for field to see what happens, but only second one works.) How to set it work for row removal and the rest of form will be upper to avoid two blank rows in form? Answer about how to fix it with jQuery instead of inline simple js is welcome too as my ultimate goal is to go with jQuery.

<tr class="something1">
<td class="left">Activate Captcha: </td>
<td class="right"><select name="activate_captcha" onchange="if (this.value=='recaptcha'){this.form['recaptcha'].style.visibility='visible'}else{this.form['recaptcha'].style.visibility='hidden'};">
<option value="none">None</option>
<option value="recaptcha">ReCaptcha</option>
</select>
</td>

</tr>
<tr class="something1" id="recaptcha" style="visibility:hidden;">
<td class="left">ReCaptcha Public Key: </td>
<td class="right"><input type="text" size="40" name="pub_key" value="" /></td>

</tr>
<tr class="something1">
<td class="left">ReCaptcha Private Key: </td>
<td class="right"><input type="text" id="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" /></td>
</tr>

</tr>
<tr class="something1">
<td class="left">This row should come up under dropdown if rows above are invisible: </td>
<td class="right"><input type="text" value="" /></td>
</tr>

You have multiple elements with `id="recaptcha"`. That's not valid, IDs have to be unique. — Barmar, Sep 06 '16 at 20:33
Oh man, I never would have considered putting an entire function's code in an attribute. You should try to modularize your code more. It will be easier to maintain. — A.Sharma, Sep 06 '16 at 20:35

Barmar · Answer 1 · 2016-09-06T21:37:00.033

1

IDs need to be unique, so you can't have multiple id="recaptcha". Change them to class="recaptcha".

Then change

this.form['recaptcha'].style.visibility = 'hidden';

to:

recaptcha = this.form.getElementsByClassName('recaptcha');
for (i = 0; i < recaptcha.length; i++) {
    recaptcha[i].style.visibility = 'hidden';
}

In jQuery this becomes:

$(this.form).find('.recaptcha').css('visibility', 'hidden');

The complete code could be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table>
    <tr class="something1">
      <td class="left">Activate Captcha:</td>
      <td class="right">
        <select name="activate_captcha" onchange="$(this.form).find('.recaptcha').css('visibility', this.value=='recaptcha' ? 'visible' : 'hidden');">
          <option value="none">None</option>
          <option value="recaptcha">ReCaptcha</option>
        </select>
      </td>

    </tr>
    <tr class="something1 recaptcha" style="visibility:hidden;">
      <td class="left">ReCaptcha Public Key:</td>
      <td class="right">
        <input type="text" size="40" name="pub_key" value="" />
      </td>

    </tr>
    <tr class="something1">
      <td class="left">ReCaptcha Private Key:</td>
      <td class="right">
        <input type="text" class="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" />
      </td>
    </tr>

    </tr>
    <tr class="something1">
      <td class="left">This row should come up under dropdown if rows above are invisible:</td>
      <td class="right">
        <input type="text" value="" />
      </td>
    </tr>
  </table>
</form>

edited Sep 06 '16 at 21:37

answered Sep 06 '16 at 20:37

Barmar

741,623
53
500
612

Many thanks. Would you please give the complete jQuery? I appreciate it. @Barmar – user4271704 Sep 06 '16 at 21:17
1

That is the complete jQuery. – Barmar Sep 06 '16 at 21:18
Then the 3rd row will come up under select menu when those 2 fields are hidden? – user4271704 Sep 06 '16 at 21:32
For the private key, why do you just hide the input, not the whole row like you do for the public key? – Barmar Sep 06 '16 at 21:41
To your question: sorry, for start I wanted to know which one will be hidden. Now your code works fine except, when hidden the row under private ket is not coming up under select menu to avoid gap in rows. How to fix it? – user4271704 Sep 06 '16 at 21:47
another issue, when select menu is recaptcha from start, it should still show the fields, not only on changed. How to fix it? – user4271704 Sep 06 '16 at 21:49
I edited the code in your post for private key to get snippet working for second field too. Now two issues remaining as I said in 2 comments above. I appreciate your advice. @Barmar – user4271704 Sep 06 '16 at 22:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122791/discussion-between-user4271704-and-barmar). – user4271704 Sep 07 '16 at 04:47
@user4271704 To avoid the row gap, you should use `display: none`, not `visibility: hidden'`. You can do this with jQuery `.hide()`. See http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Barmar Sep 07 '16 at 14:54
To make it show the fields at the start, change the `style=` attribute to match the initial value of the select menu. You can also move the jQuery code into a named function, and call it after the page is loaded. – Barmar Sep 07 '16 at 14:56

score 0 · Answer 2 · answered Sep 06 '16 at 20:33

You don't have any form with the name recaptcha so you can't really use this.form['recaptcha'], however, since you have the id you can use the document.getElementById function to get that specific element, and from there your code is the same.

Check here:

<table>
<tr class="something1">
<td class="left">Activate Captcha: </td>
<td class="right"><select name="activate_captcha" onchange="if (this.value=='recaptcha'){document.getElementById('recaptcha').style.visibility='visible'}else{document.getElementById('recaptcha').style.visibility='hidden'};">
<option value="none">None</option>
<option value="recaptcha">ReCaptcha</option>
</select>
</td>

</tr>
<tr class="something1" id="recaptcha" style="visibility:hidden;">
<td class="left">ReCaptcha Public Key: </td>
<td class="right"><input type="text" size="40" name="pub_key" value="" /></td>

</tr>
<tr class="something1">
<td class="left">ReCaptcha Private Key: </td>
<td class="right"><input type="text" id="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" /></td>
</tr>

<tr class="something1">
<td class="left">This row should come up under dropdown if rows above are invisible: </td>
<td class="right"><input type="text" value="" /></td>
</tr>
</table>

`this.form['recaptcha']` isn't looking for a form named `recaptcha`, that would be `document.forms['recaptcha']`. `this.form['recaptcha']` is a field named `recaptcha` in the form that contains `this`. — Barmar, Sep 07 '16 at 14:53

gaetanoM · Answer 3 · 2016-09-06T21:58:33.080

Instead to add code inline, I prefer to add it at run time.

I changed from visibility to display because you asked to remove blank lines.

My proposal is:

// Polyfill for Internet Explorer 8
if(!("nextElementSibling" in document.documentElement)){
  Object.defineProperty(Element.prototype, "nextElementSibling", {
    get: function(){
      var e = this.nextSibling;
      while(e && 1 !== e.nodeType)
        e = e.nextSibling;
      return e;
    }
  });
}

window.addEventListener('DOMContentLoaded', function (e) {
  [].forEach.call(document.querySelectorAll('tr.something1 select'), function (element, index) {
    element.addEventListener('change', function (e) {
      if (this.value == 'recaptcha') {
        this.closest('tr').nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.nextElementSibling.style.display = 'block';
      } else {
        this.closest('tr').nextElementSibling.style.display = 'none';
        this.closest('tr').nextElementSibling.nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.nextElementSibling.style.display = 'block';
      }
    })
  });
});

<table>
    <tbody>
    <tr class="something1">
        <td class="left">Activate Captcha:</td>
        <td class="right"><select name="activate_captcha">
            <option value="none">None</option>
            <option value="recaptcha">ReCaptcha</option>
        </select>
        </td>

    </tr>
    <tr class="something1" style="display:none;">
        <td class="left">ReCaptcha Public Key:</td>
        <td class="right"><input type="text" size="40" name="pub_key" value=""/></td>

    </tr>
    <tr class="something1"  style="display:block;">
        <td class="left">ReCaptcha Private Key:</td>
        <td class="right"><input type="text" id="recaptcha" size="40" name="priv_key"
                                 value=""/></td>
    </tr>

    </tr>
    <tr class="something1"  style="display:block;">
        <td class="left">This row should come up under dropdown if rows above are invisible:</td>
        <td class="right"><input type="text" value=""/></td>
    </tr>
    </tbody>
</table>

not working, if you run snippet here, it is not working neither here. — user4271704, Sep 06 '16 at 22:04

How to show/hide a field on dropdown change?

3 Answers3