HTML/CSS Animation on pushed down content - javascript

I have a Bootstrap row that is hidden by default. After a click on a specific button the jQuery toggle() is called to toggle the display of this row.
Is there a way to animate that button to move down? The button is positioned below the row that is toggled to show/hide.
The #advancetoggle button should move down with animation, if I use CSS's transition: transform(0,100px) the button starts to move down but it jumps due to the row above that gets the display:block and it pushes the button far way down.
Thanks :)
$("#advancetoggle").click(function(event) {
event.stopPropagation();
$('#advanced-search').toggleClass('show hide');
if ($('#adv-icon').hasClass('icon-arrowdown')){
$('#adv-icon').removeClass('icon-arrowdown');
$('#adv-icon').addClass('icon-arrowup');
} else {
$('#adv-icon').removeClass('icon-arrowup');
$('#adv-icon').addClass('icon-arrowdown');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form id="advanced-search">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="typeselect">Type</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="typeselect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="btn btn-red">
RESET FILTER
</div>
</div>
</form>
</div>
<div class="row">
<div class="advanced col-sm-2 col-xs-12">
<i class="icon-arrowdown" id="adv-icon"></i> <span class="advanced-text"> Advanced Search</span>
</div>
</div>


You have some issues in your code:
transition: transform(0,100px) should be transform: translate(0,100px).
To get the transition you need to add transition:all .3s ease (for example).
Insert the span .advanced-text into the link #advancetoggle
$("#advancetoggle").click(function(event) {
event.stopPropagation();
$(this).css('transform', 'translate(0,100px)');
console.log($(this));
$('#advanced-search').toggleClass('show hide');
if ($('#adv-icon').hasClass('icon-arrowdown')){
$('#adv-icon').removeClass('icon-arrowdown');
$('#adv-icon').addClass('icon-arrowup');
} else {
$('#adv-icon').removeClass('icon-arrowup');
$('#adv-icon').addClass('icon-arrowdown');
}
});
#advancetoggle {
display:inline-block;
transition:all .3s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form id="advanced-search">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="typeselect">Type</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="typeselect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="btn btn-red">
RESET FILTER
</div>
</div>
</form>
</div>
<div class="row">
<div class="advanced col-sm-2 col-xs-12">
<a href="#" class="glyphdown" id="advancetoggle">
<i class="icon-arrowdown" id="adv-icon"></i>
<span class="advanced-text">Advanced Search</span>
</a>
</div>
</div>


try this, I think this is what you want.hope this will help.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
.myrow{
display: none;
margin: 10px;
}
.myrowtwo{
display: none;
margin: 10px;
}
.buttonone , .buttontwo{
margin:10px;
}
</style>
<body>
<div class="btn btn-default buttonone">Press me !</div>
<div class="row myrow">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
</div><br>
<div class="clearfix"></div>
<div class="btn btn-primary buttontwo">Press me now!</div>
<div class="row myrowtwo">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".buttonone").click(function(){
$(".myrow").toggle();
});
$(".buttontwo").click(function(){
$(".myrowtwo").toggle();
});
});
</script>
</body>
</html>
I have used online bootstrap and jquery.good luck.

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>

To get the selected index for multiple dropdowns of the same class

I have multiple dropdowns with the same class but different values. On change of a dropdown selected value, I need to know the index. Below is my following code:
$("body").on("change", ".ddlFruit", function () {
var fruitIndex = $(".ddlFruit option:selected").index();
alert(fruitIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Apple</option>
<option value="2">Bannana</option>
<option value="3">Mango</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Water Melon</option>
<option value="2">Kiwi</option>
<option value="3">Peach</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Strawberry</option>
<option value="2">Papaya</option>
<option value="3">Grapes</option>
</select>
</div>
</div>
The issue with this is it always gives the index of the first dropdown even if I change values in second or third dropdown. I tried something like
var fruitIndex = $("this option:selected").index();
but that does not work. How do I figure out the right index in Jquery without having to change anything in the html?

Use the this context as the second argument in the jQuery function.
var fruitIndex = $("option:selected", this).index();
$("body").on("change", ".ddlFruit", function () {
var fruitIndex = $("option:selected", this).index();
alert(fruitIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Apple</option>
<option value="2">Bannana</option>
<option value="3">Mango</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Water Melon</option>
<option value="2">Kiwi</option>
<option value="3">Peach</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Strawberry</option>
<option value="2">Papaya</option>
<option value="3">Grapes</option>
</select>
</div>
</div>
Or use find() method to get element within this context.
var fruitIndex = $(this).find("option:selected").index();
$("body").on("change", ".ddlFruit", function () {
var fruitIndex = $(this).find("option:selected").index();
alert(fruitIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Apple</option>
<option value="2">Bannana</option>
<option value="3">Mango</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Water Melon</option>
<option value="2">Kiwi</option>
<option value="3">Peach</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Strawberry</option>
<option value="2">Papaya</option>
<option value="3">Grapes</option>
</select>
</div>
</div>

change visibility with attr() with click event binding

I'm trying to use the attr() method to change the visibility of the input and select siblings.
The add button works for all hidden elements, but when I want to add the hidden attribute back onto the form elements nothing happens.
$(function() {
$("button[name='add']").click(addSeries);
});
$(function() {
$("button[name='remove']").click(removeSeries);
});
function addSeries() {
$(this).siblings("input").removeAttr("hidden");
$(this).siblings("select").removeAttr("hidden");
$(this).parent().append("<button name='remove' type='button'>-</button>");
$(this).remove();
}
function removeSeries() {
console.log($(this)); //nothing logged
console.log($(this).siblings("input")); //nothing logged
console.log($(this).siblings("select")); //nothing logged
$(this).siblings("input").attr("hidden");
$(this).siblings("select").attr("hidden");
$(this).parent().append("<button name='add' type='button'>+</button>");
$(this).remove();
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</head>
<body>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
</body>
</html>
I'm not well seasoned with javascript, so it may be something simple that I'm missing.
Any help is appreciated, thank you!

you tried to attach event to future elements and you can do that with $(document)
try this hope it help
$(function() {
$(document).on("click","button[name='add']",addSeries);
});
$(function() {
$(document).on("click","button[name='remove']",removeSeries);
});
function addSeries() {
$(this).parent().find("input,select").removeAttr("hidden");
$(this).attr("name","remove").html("-");
}
function removeSeries() {
$(this).parent().find("input,select").attr("hidden","");
$(this).attr("name","add").html("+");
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</head>
<body>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
</body>
</html>

Cannot find the integer or not find the integer error coming while taking the sum of selected option in jQuery?

$(document).ready(function(){
$("#selectFirst").on('change',function(){
var integer=$(this).attr('selected','selected').val();
$("#text1").html(integer);
})
$("#selectSecond").on('change',function(){
var string=$(this).attr('selected','selected').val();
$("#text2").html(string);
})
$("#selectThird").on('change',function(){
var mix=$(this).attr('selected','selected').val();
$("#text3").html(mix);
})
$("#addBtn").click(function(){
var grandTotal= integer + string + mix;
$("#total").html(grandTotal);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper p-5">
<div class="row">
<div class="col-md-8 center-block card p-3 mb-4">
<div class="row">
<div class="col-md-2">
<select class="custom-select form-control" id="selectFirst">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectSecond">
<option selected>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectThird">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="two">two</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-6">
<div class="card bg-primary text-white">
<div class="card-body">
<ul class="list-unstyled">
<li><b>Selected-1:</b><span class="ml-3" id="text1"></span></li>
<li><b>Selected-2:</b><span class="ml-3" id="text2"></span></li>
<li><b>Selected-3:</b><span class="ml-3" id="text3"></span></li>
<li class="mb-3"><b>Total:</b><span class="ml-3" id="total"></span></li>
<input type="button" name="add-btn" value="Add" class="btn btn-danger" id="addBtn">
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!-- row-closed-->
</div>
Here in code snippet you can see my html and jquery I'm using. when I selected values from select option then they will append to the card having selected1 for select option first and selected2 for select option two and selected3 for the select option third and when I clicked the button total then I want the total of the all selected value but there is an error
integer is not defined

You variables integer, string, mix are not defined in the button handler context.
You defined them in the scope of each of the previous handlers individually but not in the button one. You can either have their scope be above the button handlers so they can be accessible or do something like this:
$("#addBtn").click(function(){
var integer=$('#selectFirst').val();
var string=$('#selectSecond').val();
var mix=$('#selectThird').val();
$("#total").html(integer + string + mix);
})

Try this. Problem with code was that you didn't declare the variables globally which was needed in your case.
$(document).ready(function(){
var integer = string = mix = '';
$("#selectFirst").on('change',function(){
integer=$(this).attr('selected','selected').val();
$("#text1").html(integer);
})
$("#selectSecond").on('change',function(){
string=$(this).attr('selected','selected').val();
$("#text2").html(string);
})
$("#selectThird").on('change',function(){
mix=$(this).attr('selected','selected').val();
$("#text3").html(mix);
})
$("#addBtn").click(function(){
var grandTotal= integer + string + mix;
$("#total").html(grandTotal);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper p-5">
<div class="row">
<div class="col-md-8 center-block card p-3 mb-4">
<div class="row">
<div class="col-md-2">
<select class="custom-select form-control" id="selectFirst">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectSecond">
<option selected>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectThird">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="two">two</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-6">
<div class="card bg-primary text-white">
<div class="card-body">
<ul class="list-unstyled">
<li><b>Selected-1:</b><span class="ml-3" id="text1"></span></li>
<li><b>Selected-2:</b><span class="ml-3" id="text2"></span></li>
<li><b>Selected-3:</b><span class="ml-3" id="text3"></span></li>
<li class="mb-3"><b>Total:</b><span class="ml-3" id="total"></span></li>
<input type="button" name="add-btn" value="Add" class="btn btn-danger" id="addBtn">
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!-- row-closed-->
</div>

define integer, string and mix outside the functions not inside thats why they are undefined they are in different scopes
var integer = "";
$("#selectFirst").on('change',function(){
integer=$(this).attr('selected','selected').val();
$("#text1").html(integer);
})

Multi div id hide/show Jquery

I've been trying to get a div to show and hide based on a dropdown.
I have 3 hidden divs but only 2 show. The issue is I have to have multiple ID's for some divs.
the two display as handset are fine but the id="Handset Tablet" won't show. Does my jquery need to see if it just contains the id as I guess it is just looking for "Handset" not two.
Here is my code. I need to have all 3 divs with Handset show and Tablet only show the shared one somehow.
http://jsfiddle.net/jonasj/k2sxdh5s/
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet" >Tablet</option>
</select>
</div>
</div>
<div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div id="Handset Tablet" class="hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<script>
$(document).ready(function () {
$('.hide_listing').hide();
$('').show();
$('#product_type').change(function () {
$('.hide_listing').hide();
$('div#'+$(this).val()).show();
})
});
</script>

Since IDs are unique, you can use classes to achieve what you want:
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet">Tablet</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
And change your function to include the classes:
$(document).ready(function () {
$('.hide_listing').hide();
$('#product_type').change(function () {
$('.hide_listing').hide();
$('div.'+$(this).val()).show();
})
});
Though you may want to just go with classes all together, as to avoid confusion in the future.
DEMO: http://jsfiddle.net/k2sxdh5s/7/

Put this as HTML
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet" >Tablet</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
and put this as jquery
$(document).ready(function () {
$('.hide_listing').hide();
$('#product_type').change(function () {
$('.hide_listing').hide();
var show_div = $(this).val();
if(show_div == "Handset") {
$(".Handset").show();
} else if (show_div == "Tablet") {
$(".Tablet").show();
}
})
});
This will make it work...surely

Categories

Resources