CODEWITHSUNDEEP
javascriptformsshow-hide
gdinari
gdinari

Reputation: 637

Show/Hide different forms based on a option selected

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.

Upvotes: 5

Views: 33709

Answers (8)

Umair Hassan Pansota
Umair Hassan Pansota

Reputation: 1

$(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>

Upvotes: 0

Carlos Alberto Blanco Vivas
Carlos Alberto Blanco Vivas

Reputation: 137

make this

  1. create function javascript that help u with that work, something like this
    function FFF(){
        var opc = document.getElementById("form-shower").value;
        switch(opc)
        {
            'form_name1':
                document.getElementById('form_1').style.display = "block"; // or inline or none whatever
                break;

        }
    }
  1. Create event
<select id='id_selec' onChange='javascript:FFF();'>

Upvotes: 0

RocketDonkey
RocketDonkey

Reputation: 37259

If you don't want to use jQuery, you can add this to the top of your HTML:

<script>
function changeForm(form) {
  for (var i=0; i<form.length; i++){
    var form_op = form.options[i].value;
    if (form_op == form.value) {
      document.getElementsByName(form_op)[0].style.display = "block";
    }
    else {
      document.getElementsByName(form_op)[0].style.display = "none";
    }
   }
  }
</script>

and then add onChange="changeForm(this)" to your main form. // onChange not case sensitive.

Upvotes: 1

Javed Khan
Javed Khan

Reputation: 119

$(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>

Upvotes: 0

Nathan Calvank
Nathan Calvank

Reputation: 11

For future readers, this setup will show/hide those forms dynamically with no external libraries:

function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}

Then the html:

<select onchange="changeOptions(this)">
  <option value="" selected="selected"></option>
  <option value="form_1">Form 1</option>
  <option value="form_2">Form 2</option>
  <option value="form_3">Form 3</option>
</select>

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

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

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

Upvotes: 1

Taha Rehman Siddiqui
Taha Rehman Siddiqui

Reputation: 2533

just add this to the end of the HTML

    <script type="text/javascript">
    $('select').change(function(e){
            $this = $(e.target);
            var selected_form = $this.text().replace(' ','_name');
            $('form').hide(2000, 'easeOutExpo');
            $(selected_form).show(2000, 'easeOutExpo');
        });
    </script>

Upvotes: 1

Roger Medeiros
Roger Medeiros

Reputation: 813

<select>
    <option value="" selected="selected"></option>
    <option value="form_1">Form 1</option>
    <option value="form_2">Form 2</option>
    <option value="form_3">Form 3</option>
</select>

<form name="form_1" id="form_1" style="display:none">
<input type="text" value="1">
</form>

<form name="form_2" id="form_2" style="display:none">
<input type="text" value="2">
</form>

<form name="form_3" id="form_3" style="display:none">
<input type="text" value="3">
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS:

$("select").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
});​

Sample at http://jsfiddle.net/dfYAs/

Upvotes: 1

Simon
Simon

Reputation: 1201

You can use jQuery to help you with it : 

<form id="form-shower">
<select id="myselect">
<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_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

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

<form name="form_name3" id="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
<script>
$("#myselect").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
})
</script>

I added an id to your select and change the id name of your three forms :)

Hope it helps :)

Upvotes: 10

Related Questions