0

I need to fade out row when a specific select value is selected (let's say "termination"). Fade in, when any other is selected. Code works fine with div ID outside the table, but when div is encapsulated with tr & td (put into table), it stops to work. I tried my luck with tbody ID, but no luck. Please help me with pure javascript. My brain somehow does not like jQuery. But I think the function for fading is fine, I just need to make it work with a row in the table.

Here is my code:

<table>
  <tr>
    <td>Select Type:</td>
    <td>
      <select
        name="vipselect"
        id="vipselect"
        onchange="fade('vipselect','agencyrow')"
      >
        <option value="0" selected value="0" selected style="display: none">
          Please Select
        </option>
        <option value="fastL4">ltm virtual V10.112.x.x_any (Fast L4)</option>
        <option value="passthrough">ltm virtual Vx.x.x.x_443 (Standard)</option>
        <option value="termination">
          ltm virtual Vx.83.x.x_443 (Standard)
        </option>
      </select>
    </td>
  </tr>
  <tr>
    <td>test:</td>
    <td><input id="other" name="other" type="othertext" /></td>
  </tr>
  <tbody id="agencyrow" style="display: none">
    <tr>
      <td>test:</td>
      <td><input id="sslcert" name="sslcert" type="text" /></td>
      //this row to fade/unfade
    </tr>
  </tbody>
</table>

javascript:

function f_fade(parent, elm) {
  var x = document.getElementById("vipselect");
  if (x.options[x.selectedIndex].value == "termination") {
    document.getElementById(elm).style.display = "block";
    f_fade_in(0, elm);
  } else {
    f_fade_out(100, elm);
  }
}

function f_fade_out(para, elm) {
  document.getElementById(elm).style.opacity = para / 100;
  var t1 = setTimeout(function () {
    if (para > 0) {
      f_fade_out(para - 1, elm);
    } else {
      document.getElementById(elm).style.display = "none";
    }
  }, 1);
}

function f_fade_in(para, elm) {
  document.getElementById(elm).style.opacity = para / 100;
  var t1 = setTimeout(function () {
    if (para < 100) f_fade_in(para + 1, elm);
  }, 1);
}
MUHAMMAD ILYAS
  • 1,402
  • 7
  • 23
PureJavaMan
  • 1
  • 2
  • Well first, this is an inappropriate use for tables. Tables should only be used to render tabular data, never for layout. All you need here is 3 block level elements to create three layout rows. Next, even if you were going to use a `table`, you are using the `tbody` incorrectly. You can't just make some arbitrary rows the `tbody`. – Scott Marcus Jan 11 '21 at 19:06
  • thx for guidance. Now I know what to do. I will redesign page, add layers. Then it should work. – PureJavaMan Jan 11 '21 at 20:49

2 Answers2

0

As I stated above, don't use tables for layout. You only need to use block level elements to create new lines of information in your page. Also, don't use inline HTML event attributes - - do all your event binding in JavaScript.

Now, all you need to do here is to apply CSS Transitions to the element that should be faded.

const message = document.getElementById("message");

// Set up your events in JavaScript, not in HTML
document.getElementById("select").addEventListener("change", function(){
  if(this.value === "Show"){
    message.classList.remove("hidden");
  } else {
    message.classList.add("hidden");  
  }
});
#message {
  transition:opacity 1.5s ease; /* Sets up CSS transitioning */
  opacity:1;  /* CSS properties that should be transitioned must have a defined initial value*/
}

#message.hidden {
  opacity:0;
}
<label for="select">Select Type:</label>
<select id="select">
  <option selected>Please Select</option>
  <option>Show</option>
  <option>Hide</option>
</select>

<div id="message" class="hidden">
  <label for="other">Text: </label> <input id="other">
</div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • The code here is somewhat different; it doesn't incorporate the `display: none` aspect. It's important; currently, when the div is "hidden", hovering the mouse over the place where the textbox is shows the text input cursor, and you can type (unseen) text, which will be shown when displayed. These are things the OP can take care of through judicious use of `height` etc. – Heretic Monkey Jan 11 '21 at 22:22
-1

Use this below:

const message = document.getElementById("message");

function getValue(id) {
  const optionValue = document.getElementById(id).value;
  if (optionValue == "0") {
    message.style.display = "none";
  } else if (optionValue == "1") {
    message.style.display = "block";
  }
}
#message {
  display: none;
}
<div class="container">
  <label for="vipselect">Select Type:</label>
  <select id="vipselect" onchange="getValue('vipselect')">
    <option value="null" selected>Please Select</option>
    <option value="0">No</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
  </select>
</div>

<div id="message">
  <label for="other">Text: </label> <input id="other" name="other"/></td>
</div>

Codepen: https://codepen.io/manaskhandelwal1/pen/zYKJMQZ

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24