jQuery: Show div depending on dropdown selection - javascript

This is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
$('select[name=payment]').change(function() {
var value = $(this).val();
if (value == "debit") {
$(".box").not(".debit").hide();
$(".debit").show();
} else if (value == "transfer") {
$(".box").not(".transfer").hide();
$(".transfer").show();
}
});
});
</script>
</head>
<body>
<select name="payment">
<option data-calc="0" value="" disabled selected>Chose payment ↓</option>
<option value="transfer">transfer</option>
<option value="debit">debit</option>
</select>
<div class="debit box">debit</div>
<div class="transfer box">transfer</div>
</body>
</html>
That works very good. But I don't want to call my class debit box. I want to call it debit instead.
That means <div class="debit">debit</div> instead of <div class="debit box">debit</div>.
How can I get rid of this box thing?

Put all the boxes inside another DIV.
<div id="boxes">
<div class="debit box">debit</div>
<div class="transfer box">transfer</div>
</div>
Then you can do:
$("#boxes > div").hide();
$(".debit").show();

If you want the className to be debit, and identify it with this classname in the jquery hide method, then the method should look like this:
<script>
$(document).ready(function() {
$('select[name=payment]').change(function() {
var value = $(this).val();
if (value == "debit") {
$(".transfer").hide();
$(".debit").show();
} else if (value == "transfer") {
$(".debit").hide();
$(".transfer").show();
}
});
});
</script>
But I think it highlights that you want what Barmar suggests because you'll need to update hiding and showing manually for any choice element you'll add. But for two elements this might be ok.

This might be works for you:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
$('select[name=payment]').change(function() {
var value = $(this).val();
$(".boxes div").hide();
$("." + $value).show();
});
});
</script>
</head>
<body>
<select name="payment">
<option data-calc="0" value="" disabled selected>Chose payment ↓</option>
<option value="transfer">transfer</option>
<option value="debit">debit</option>
</select>
<div class="boxes">
<div class="debit">debit</div>
<div class="transfer">transfer</div>
</div>
</body>
</html>

Related

jquery Iterate through ID's to hide/show div

I am trying to create a div on the bottom a of an image that when clicked, shows and when clicked again, hides. I can get it working with just one of the divs, but I am trying to do this for all of them containing the same ID.
I was first trying to get the div to initially hide and can't. Thanks for any help.
$(document).ready(function() {
var $dropdown= $('#project-description');
$dropdown.hide()
$('#project-dropdown').each(function(){
$('#project-dropdown').click(function() {
if ($menu.is(':visible')) {
$menu.slideUp("medium", function() {
$menu.hide();
});
}
else {
$menu.slideDown("medium");
}
});
});
});
UPDATE: I am closer to what I am looking for. It kind of works now that I am using classes, but all of the div's open and close together. Is there any way to get them independent of one another?
jQuery
$(document).ready(function () {
var $dropdown = $('.description-dropdown');
var $container = $('.description-container');
$dropdown.hide();
// $($menu).each(function () {
$($container, $dropdown).click(function () {
if ($dropdown.is(':visible')) {
$dropdown.slideUp("medium", function () {
$dropdown.hide();
});
} else {
$dropdown.slideDown("medium");
}
});
// });
});
Div's being manipulated
<div class="container description-container">
<div class="ui divider center aligned"><i class="chevron down icon"></i></div>
<div class="description description-dropdown">
<p><%- project.description %></p>
</div>
</div>
To make them slide independently you need to have your event code only operate on the element that was clicked. To do that you need to find the dropdown inside the container that was clicked:
$($container).click(function () {
var dd = $(this).find(".description-dropdown");
if (dd.is(':visible')) {
dd.slideUp("medium");
} else {
dd.slideDown("medium");
}
});
Note that the call to .hide inside .slideUp is not required as slideUp performs a hide.
The issue is that you're trying to use ID's. ID's can only reference to one element and a class should be used in place of that.
Using classes you can set the same class to mutliple elements and then they'll be called when needed.
Also when it comes to classes, you use a dot instead of a hash.
Hope this helps you out
$(document).ready(function()
{
var $dropdown = $('.project-description');
var $menu = $('.menu');
//$dropdown.hide();
$($dropdown).each(function()
{
$($dropdown).click(function()
{
if ($menu.is(':visible'))
{
$menu.slideUp("medium", function()
{
$menu.hide();
});
}
else
{
$menu.slideDown("medium");
}
});
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="project-description">
INFORMATION BLAH BLAH
</div>
<br>
<select class="menu">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="menu">
<option value="cake">cake</option>
<option value="pizza">pizza</option>
<option value="garlic bread">garlic bread</option>
<option value="mac n cheese">mac n cheese</option>
</select>
<select class="menu">
<option value="games">games</option>
<option value="movies">movies</option>
<option value="music">music</option>
</select>
</body>
</html>

How to get second combobox value after first one changed (jquery)

I have 2 comboboxes, first for Province and second for city/town.
I just wanna get the value of my second combobox (city/town) after first combobox changed and second combobox will change with ajax after user chose first the combobox.
Here is my code, but the problem is that the alert shows up twice!
jQuery('#billing_state').on('change', function() {
jQuery('#billing_city').on('change', function() {
var state = jQuery(this).val();
alert(state);
});
});
Why you made an imbrication of event ? just use change on the first combo .
Here is an example :
state = {"1":["Rome","Milan","Parma"],"2":["Paris","Lile","Nice"],"3":["Algiers","Jijel","Bejaia"],"4":["London","Manchester"]}
$(document).ready(function(){
//this if you want that changing province this alert country value
$("#billing_state").on("change",function(e){
$("#billing_town").children().remove();
var city =state[$(this).val()];
if(!city) return;
$("#billing_town").append('<option value="">- Select -</option>')
for(i=0; i< city.length;i++) {
//console.log(city[i]);
$("#billing_town").append('<option value="'+city[i]+'">'+city[i]+'</option>');
}
});
// when changing country this alert country value itself
$("#billing_town").on("change",function(e){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Province :
<select id="billing_state">
<option value="">- select -</option>
<option value="1">Italy</option>
<option value="2">France</option>
<option value="3">Algeria</option>
<option value="4">UK</option>
</select>
<br><br>
Country :
<select id="billing_town">
</select>
is this what you want. try with demo below
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>texas</option>
<option>colombo</option>
</select>
<hr>
<label>city</label>
<select id="city">
<option>colombo</option>
<option>canberra</option>
<option>silicon valley</option>
<option>ottawa</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $("#city").val(); // if there is any changes to first selection box, then at that time get the value of second selection box.
alert(thevalue); // to check the value of secod check box at the time chage put an alert.
});
</script>
</html>
or else if your want to show values according to user selection of first select box value, you can do it like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>ottawa</option>
<option>western</option>
</select>
<hr>
<label>City</label>
<select id="city">
<option>--select--</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $(this).val(); // if there is any changes to first selection box, then at that time get the
$("#city").text("");
//display values according to the first value
if (thevalue == "california")
{
var cities = ["sillicon valley","st pauls","new york"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else if(thevalue="austin")
{
var cities = ["mirage","manhatten","las vegas"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else
{
//like above you can add relevent values.
}
});
</script>
</html>

Choose fields to hide/show acording to selected option in dropdown (while edit)

EDITED : (corected code mistake)
I have created a form with several fields, chosen via a dropdown.
This works fine and I can save the data to database.
But the problem is that when I need to edit the data with the form, the jQuery "change" function isn't triggered and the fields shown aren't selected with the dropdown (value of the dropdown is save too).
How can I achieve this? Maybe another jQuery function would be better?
This is my markup and code:
html:
<body>
<div class="div1">
<label class="label1">label1</label>
<select id="select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div class="div2">
<label class="label2">label2</label>
<input type="text" name="input1" class="input1">
</div>
<div class="div3">
<label class="label3">label3</label>
<input type="text" name="input2" class="input2">
</div>
<div class="div4">
<label class="label4">label4</label>
<input type="text" name="input3" class="input3">
</div>
<div class="div5">
<label class="label5">label5</label>
<input type="text" name="input4" class="input4">
</div>
</body>
jQuery:
$(document).ready(function() {
$('.div2').hide();
$('.div3').hide();
$('.div4').hide();
$('.div5').hide();
$('#select').change(function () {
if ($('#select option:selected').text() == "option1"){
$('.div2').show();
$('.div3').hide();
$('.div4').hide();
$('.div5').show();
}
else if ($('#select option:selected').text() == "option2"){
$('.div2').hide();
$('.div3').show();
$('.div4').hide();
$('.div5').show();
}
else if ($('#select option:selected').text() == "option3"){
$('.div2').hide();
$('.div3').hide();
$('.div4').show();
$('.div5').show();
}
});
});
</script>
JSFiddle: http://jsfiddle.net/YNnCw/
If you are willing to use jQuery, I wrote a little script to do just that.
This is just a simple little function to show the data which matches the chosen option in the select with choose Option. First it hides all the option class items, then is shows the items with the class which equals the chosen option. The id is the class of all the options used for this instance. This allows you to have more than one of these on a page.
You can look at the example below.
The rows in the form show or don't show based on the classes. For example . The "optionName" in the div class is the same as the ID of the master selector, and thus gets hidden. If the selection value
is option3 then that div will show.
Option Type:
<select name="optionName" id="optionName" class="chooseOption">
<option value = "" >Select a Type</option>
<option value = "option1">option1</option>
<option value = "option2">option2</option>
<option value = "option3">option3</option>
</select>
<div class = "optionName option1"> option1 stuff</div>
<div class = "optionName option2"> option2 stuff</div>
<div class = "optionName option3"> option3 stuff</div>
<script type="text/javascript">
$(".optionName").hide();
$("document").ready(function() { /// have to wait till after the document loads to run these things
$("select.chooseOption").change(function(){
$("."+this.id).hide();
var thisValue = $(this).val();
if (thisValue != "")
$("."+thisValue).show();
});
});
</script>
You make a mistake it should be:
$('#select option:selected').text()
here the updated fiddle

How to select drop-down based on input value of another input box

I have google a lot but I am not able to understand how to do it.
The code is as follows:
<html>
<head>
<script src="jquery-1.8.2.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function (){
$('#emp_id').blur(function(){
alert($(this).val());
$('#emp_name').val($(this).val());
});
$('#emp_name').change(function(){
$('#emp_id').val($(this).val());
} );
});
</script>
<input type="text" id="emp_id" />
<select id="emp_name" name="emp_name">
<option value="00000" >Please Select </option>
<option value="e0001" >James Smith</option>
<option value="e0002" >Roger Sm</option>
<option value="e0003" >Elina Lobo</option>
</select>
</body>
</html>
and running jsFiddle
http://jsfiddle.net/kamleshahire/J3qLv/1/
I have two components:
Input box : user can enter employee id, once employee code entered by user the drop-down has changed based on Employee code. Employee id is part of drop-down.
Drop-down: it conatins employee id and value as Employee name.
I want to show the error message if the input value is not present in the prepopulated drop-down list.
Thanks in advance
Try it this way:
$('#emp_id').change(function(){
if($('option[value='+$(this).val()+']').length){
$('#emp_name').val($(this).val());
}
else{
alert('Employee not found.');
}
});
I edited my answer to meet your updated requirement.. Here's the fiddle!!
The complete solution is
and JSFiddle is
http://jsfiddle.net/kamleshahire/J3qLv/4/
<html>
<head>
<script src="jquery-1.8.2.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function (){
$('#emp_id').blur(function(){
//alert($(this).val());
var inputValue = $(this).val();
$('#emp_name').each(function(){
if(this.value == inputValue){
$('#emp_name').val($(this).val());
return false;
}
alert("Please iput valid value");
$('#emp_name').val('-1');
});
});
$('#emp_name').change(function(){
$('#emp_id').val($(this).val());
} );
});
</script>
<input type="text" id="emp_id" />
<select id="emp_name" name="emp_name">
<option value="-1" >Please Select </option>
<option value="e0001" >James Smith</option>
<option value="e0002" >Roger Sm</option>
<option value="e0003" >Elina Lobo</option>
</select>
</body>
</html>

HTML select dropdownlist with javascript function

This is how far I got:
<head>
<script type="text/javascript">
function showonlyone(thechosenone) {
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}
else {
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select>
<option SELECTED>Choose one</option>
<option value="javascript:showonlyone(id1)">First</option> <!-- That's probably wrong -->
<option value="javascript:showonlyone(id2)">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
Here is what it should do:
Create a dropdownlist (with 3 Values)
If you click on "First" it should only show the of the content of <div id="id1">
If you click on "Second" it should only show the of the content of <div id="id2">
I know that this can't work like this. But I do not know how I can get this working.
There might be a easier way than this javascript function but it has to be this way.
Thank you for your help
Use a onchange event handler instead:
Update your <select> to <select onchange="showonlyone(this)">.
Change your <option> values to only the IDs - not JavaScript calls.
Update your JavaScript to accept the HTMLSelectElement (which will be passed-in by the this, above). (Yes, you were correct here.)
From the chosen HTMLSelectElement, ask it for its value.
Here is a fixed, working version: http://jsfiddle.net/YRF6u/
Also included here:
<head>
<script type="text/javascript">
function showonlyone(selector) {
var thechosenone = selector.value;
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}else{
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select onchange="showonlyone(this)">
<option SELECTED>Choose one</option>
<option value="id1">First</option>
<option value="id2">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
I would not consider this production-ready code, but it should be sufficient enough to solve your current round of questions.

Categories