Show/Hide different forms based on a option selected

user_397488 0
Viewed 31078

I would like to know how to show/hide different forms based one form's selection.

In the sample code below all three forms are automatically set to display:none. I would like to only show one of the "hidden" forms if its corresponding value is selected from the "shower" form. So if option "Form 1" is selected from the "shower" form, then show Form 1 below; if option "Form 2" is selected from the "shower" form, then show Form 2; and so on.

Preferably with a fade in/out animation to it or another light animation.

Here is a sample...

<form id="form-shower">
<select>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_3" style="display:none">
<!---- THIS IS FORM 3---->
</form>

Thanks for any help with this.

show-hide forms javascript
8 Answers

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});
.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000ff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery Show Hide Elements Using Select Box</title>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
  <div>
    <select>
      <option>Choose Color</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
  <div id="check" class=" box">You have selected <strong>green option</strong> so i am here</div>
  <div id="check" class="box">You have selected <strong>blue option</strong> so i am here</div>
</body>

</html>

user_66402330 

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});
.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000FF;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery Show Hide Elements Using Select Box</title>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
  <div>
    <select>
      <option>Choose Color</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
  <div id="check" class="green box">You have selected <strong>green option</strong> so i am here</div>
  <div id="check" class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>

</html>

user_171068770
Related