Cant toggle forms using JavaScript - javascript

I have this html
<body>
<section id="content" class="m-t-lg wrapper-md animated fadeInDown">
<a class="nav-brand" href="index.html"></a>
<div class="row m-n">
<div class="col-md-4 col-md-offset-4 m-t-lg">
<section class="panel">
<header class="panel-heading bg bg-primary text-center">
<div class="m-b-sm">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio1"> <i class="icon-ok text-active"></i>Credit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio2"> <i class="icon-ok text-active"></i>Debit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio3"> <i class="icon-ok text-active"></i>Internet Banking
</label>
</div>
</div>
</header>
<form method="post" action="http://www.bjhhbhjh.com/webapp/TokenProcess.php" class="panel-body" id="cardpayment">
<div class="form-group">
<input type='hidden' id='ccType' name='ccType'/>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="form-group">
<label class="control-label">Card Number</label>
<input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control">
</div>
<div class="form-group">
<label class="control-label" style="display:inline">Expiry</label>
<select class="form-control" id="expiry_month" name="expiry_month">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="form-control" id="expiry_year" name="expiry_year">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option> <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
<div class="form-group">
<label class="control-label">CVV</label>
<input type="password" id="cvv" name="cvv" placeholder="123" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Name on card</label>
<input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
<div class="line line-dashed"></div>
<p class="text-muted text-center"><small>Already have an account?</small></p>
</form>
<form method="post" action="http://www.bmbmnbmnb.com/webapp/IB.php" id="internetpayment" class="panel-body">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<label class="control-label" style="display:inline">Bank</label>
<select class="form-control" id="BankId" name="BankId">
<option selected>Select Bank</option>
<option value="CORP">CORPORATION </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
</form>
</section>
</div>
</div>
</section>
<!-- footer -->
<footer id="footer">
<div class="text-center padder clearfix">
<p>
<small>Mobile first web app framework base on Bootstrap<br>© 2013</small>
</p>
</div>
</footer>
</body>
this primarly has 2 forms with ids "cardpayment" and "internetbanking".
I have a 3 radio buttons in which when i select "creditcard" form with id "card payment" is shown.When I click on "debit card",again the same form.And when I click on "internet banking" form with id"internetbanking" is shown and "cardpayment" form is hidden.
I have tried the following javascript
var radios = document.getElementsByName("radios");
var cardpayment = document.getElementById("cardpayment");
var internetpayment = document.getElementById("internetpayment");
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' || val == 'radio2'){
cardpayment.style.display = 'block';
internetpayment.style.display = 'none';
}
else if(val == 'radio3'){
cardpayment.style.display = 'none';
internetpayment.style.display = 'block';
}
}
}
I have a fiddle demo with all the details here
http://jsfiddle.net/7DCY8/

Your code seems fine except you should change
var val = this.value;
to
var val = this.id;
Here's the working fiddle.

Related

change classname dynamically when append div

it's working fine for a single row. but when I am appending extra rows that time it shows all the hidden div and when I change the route to value all destination div are changing. but I need to change each row accordingly. here is my code sample.
//add div by onclick event from button
function add() {
var div = document.createElement("div");
div.innerHTML = `
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>`;
document.getElementById("appenhere").appendChild(div);
}
//hide div by css class
$(document).ready(function() {
$(".department").hide();
$(".employee").hide();
$(".area").hide();
});
//show div by onchange event
function change(select) {
// console.log(select.value);
var parent = $(select).siblings().siblings();
console.log(parent);
if (select.value == "department") {
$(".department").show();
$(".employee").hide();
$(".area").hide();
} else if (select.value == "employee") {
$(".department").hide();
$(".employee").show();
$(".area").hide();
} else if (select.value == "area") {
$(".department").hide();
$(".employee").hide();
$(".area").show();
}
}
<head>
<title>test page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container pt-4">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>
<div id="appenhere"></div>
<button onclick="add()">Add more</button>
</div>
</body>
Get the containing row with $(select).closest(".row"). Then you can change just the elements in the same row.
Use CSS to initially hide the dependent menus, instead of calling .hide() in $(document).ready(), so it will apply to the elements that are added dynamically.
//add div by onclick event from button
function add() {
var div = document.createElement("div");
div.innerHTML = `
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>`;
document.getElementById("appenhere").appendChild(div);
}
//show div by onchange event
function change(select) {
// console.log(select.value);
var parent = $(select).closest(".row");
console.log(parent);
if (select.value == "department") {
parent.find(".department").show();
parent.find(".employee").hide();
parent.find(".area").hide();
} else if (select.value == "employee") {
parent.find(".department").hide();
parent.find(".employee").show();
parent.find(".area").hide();
} else if (select.value == "area") {
parent.find(".department").hide();
parent.find(".employee").hide();
parent.find(".area").show();
}
}
.department,
.employee,
.area {
display: none;
}
<head>
<title>test page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container pt-4">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>
<div id="appenhere"></div>
<button onclick="add()">Add more</button>
</div>
</body>

Show/Hide Form on Radio Check

I am trying to show the "individual" form and hide the "parent" form when the "individual" radio is checked, and show the "parent" form and hide the "individual" form when the parent radio is checked. My JavaScript function doesn't seem to be working, any ideas with what's wrong with it?
HTML:
<!-- Radio check 1 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked>
Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()">
Parent of a child
</label>
</div>
<!-- Form for individual -->
<form id="individual">
<!-- Individual's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="First name">
</div>
<!-- Individual's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Last name">
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email">
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password">
</div>
<!-- Individual's birthday -->
<label>Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
<!--Form for child-->
<form id="parent" class="hidden">
<!-- Parent's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's first name">
</div>
<!-- Parent's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's last name">
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email">
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password">
</div>
<!-- Child's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Child's first name">
</div>
<!-- Child's birthday -->
<label>Child's Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
CSS:
#individual {
display: block;
}
#parent {
display: none;
}
JavaScript:
function radioCheck() {
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var individual = document.getElementById("individual");
var parent = document.getElementById("parent");
if (radio2.checked == true){
individual.style.display = "none";
parent.style.display = "block";
}
else {
individual.style.display = "block";
parent.style.display = "none";
}
}
Since one of your radio button is selected by default you have to call or invoke radioCheck() on page load. And also do not forget to close all of your input elements.
function radioCheck() {
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var individual = document.getElementById("individual");
var parent = document.getElementById("parent");
if (radio2.checked == true){
individual.style.display = "none";
parent.style.display = "block";
}
else {
individual.style.display = "block";
parent.style.display = "none";
}
}
radioCheck()
<!-- Radio check 1 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked/>
Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"/>
Parent of a child
</label>
</div>
<!-- Form for individual -->
<form id="individual">
<!-- Individual's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="First name"/>
</div>
<!-- Individual's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Individual's birthday -->
<label>Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
<!--Form for child-->
<form id="parent" class="hidden">
<!-- Parent's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's first name"/>
</div>
<!-- Parent's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Child's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Child's first name"/>
</div>
<!-- Child's birthday -->
<label>Child's Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
Yes I agree ,First you have to close all the input tags.
But the code in question is working fine for me without any changes:
<script>
function radioCheck() {
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var individual = document.getElementById("individual");
var parent = document.getElementById("parent");
if (radio2.checked == true){
individual.style.display = "none";
parent.style.display = "block";
}
else {
individual.style.display = "block";
parent.style.display = "none";
}
}
</script>
<!-- Radio check 1 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" />
Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"/>
Parent of a child
</label>
</div>
<!-- Form for individual -->
<form id="individual" style="display:none">
<!-- Individual's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="First name"/>
</div>
<!-- Individual's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Individual's birthday -->
<label>Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
<!--Form for child-->
<form id="parent" class="hidden" style="display:none">
<!-- Parent's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's first name"/>
</div>
<!-- Parent's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Child's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Child's first name"/>
</div>
<!-- Child's birthday -->
<label>Child's Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);"/>
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>

Hiding then showing HTML based off select value

I am trying to show html content based off a select value. When anything other than cables is selected I want to show Manufacturer and Model but when cables is selected I want to not show those two inputs. I want to so that I can select cables then when I select aps that it will bring those two fields back. What is the best/most proper method of doing this? Code snippet to show what I am getting. I removed a lot of the options for simplicity's sake.
var sel=document.getElementById("type");
var manufacturer=document.getElementById("manufacturer");
var model=document.getElementById("model");
var typeInputs=document.getElementById("typeInputs");
var aps = '<h1>aps</h1>';
var cables = '<h1>cables</h1>';
function typePicker(){
if(sel.value=="aps"){
typeInputs.innerHTML=aps;
}
if(sel.value=="cables"){
manufacturer.innerHTML= "";
model.innerHTML= "";
typeInputs.innerHTML=cables;
}
};
<div class="form-group" id="manufacturer">
<label for="manufacturer" class="control-label">Manufacturer</label>
<select class="form-control selectpicker" title="Manufacturer" name="manufacturer" data-live-search="true">
<option value="cisco">Cisco</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="model">
<label for="model" class="control-label">Model Name</label>
<input type="text" class="form-control" id="model" name="model" placeholder="Model Name">
</div>
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="other">Other</option>
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
</select>
</div>
<div class="form-group" id="typeInputs">
</div>
for hide:
_element.style.display = 'none';
for show:
_element.style.display = 'block';
var sel=document.getElementById("type");
var manufacturer=document.getElementById("manufacturer");
var model=document.getElementById("model");
var typeInputs=document.getElementById("typeInputs");
var aps = '<h1>aps</h1>';
var cables = '<h1>cables</h1>';
function typePicker(){
if(sel.value=="aps"){
typeInputs.innerHTML=aps;
}
if(sel.value=="cables"){
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML=cables;
}else{
manufacturer.style.display = 'block';
model.style.display = 'block';
}
};
<div class="form-group" id="manufacturer">
<label for="manufacturer" class="control-label">Manufacturer</label>
<select class="form-control selectpicker" title="Manufacturer" name="manufacturer" data-live-search="true">
<option value="cisco">Cisco</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="model">
<label for="model" class="control-label">Model Name</label>
<input type="text" class="form-control" id="model" name="model" placeholder="Model Name">
</div>
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="other">Other</option>
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
</select>
</div>
<div class="form-group" id="typeInputs">
</div>

How to set via selected options changes in popup menu?

I have these options:
<form>
<select id="poSelect" >
<option selected disabled>Choose here</option>
<option id="buyeroption" value="100101">I am a Buyer</option>
<option id="garageoption" value="100102">I am a Garage</option>
</select>
<label>Full Name</label>
<input type="text" />
<label>Email Address</label>
<input type="email" />
<label>Password</label>
<input type="password" />
<label id="industrylabel" >Select Your Brand</label>
<select id="industryoption">
<option selected disabled>Select</option>
<option value="Renault">Renault</option>
<option value="Pegaut">Pegaut</option>
<option value="Citroen">Citroen</option>
</select>
<div class="form-check-label">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
So what I need is when user select I am a Buyer label "Select your Brand" and industry option select to be hidden but when I click I am garage to appear.
<form>
<select id="mySelect">
<option id="apple">Apple</option>
<option id="orange">Orange</option>
<option id="pineapple">Pineapple</option>
<option id="banana">Banana</option>
</select>
</form>
<p></p>
<button onclick="myFunction()">textbox1</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").options.namedItem("banana").text;
document.getElementById("demo").innerHTML = x;
}
</script>
Maybe you want something like that if you want to change any thing please check this link:-http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_options6

Hide Base on select (multiple)

I want to hide and show input just closest select
script
$(function() {
var inputToHide = $('div[id=other]');
$('#showhide]').on('change', function() {
var selected = $('#other option:selected').val();
if (selected === "other") {
$(this).closest('div[id=other]').show();
} else {
$(this).closest('div[id=other]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
<br>
<br>
<br>
<br>
<br>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
end html
How to do this?
There were a lot of incoherences when I reviewed your code.
You use the same id multiple times. You should, at all cost, always try to avoid that! read here
Also, I was not sure what you were aiming to do. Was it to show the input when the selected option is other? Your code was a little confusing about that.
So I fixed the problems, and acted as you wanted the input to be shown if the selected option was "Other". (note that inputs are hidden on startup, instead of shown)
The code :
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
<br>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
html
$(function() {
$('.other').hide();
$('.showhide').change(function() {
var selected = $(this).find("option:selected").val();
if (selected === "other") {
$(this).parent().next(".other").show();
} else {
$(this).parent().next(".other").hide();
}
});
});
js
jsfiddle
First i can see that you have identifiers problem, you should use unique ids in same document, when you solve that you can improve your script to be like following example and it will work.
Hope this helps.
$(function() {
$('body').on('change', '#showhide', function() {
if ($(this).val() == "other")
$('#other').show();
else
$('#other').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
$(function() {
$('.other').hide();
$('.showhide').on('change', function() {
if ($(this).val() == "other") {
$(this).closest('.section').find('.other').show();
} else {
$(this).closest('.section').find('.other').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="section">
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" placeholder="first input"/>
</div>
</div>
<br/>
<br/>
<br/>
<div class="section">
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" placeholder="second input" />
</div>
</div>

Categories

Resources