jquery addClass and removeClass when an option is selected - javascript

i have a select field, where i have two options in it. If an option is selected i want to add and remove Classe from a div!
On firefox its working fine, not on chrome and safari
Here is the code:
<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
<option id="privat">Privatperson</option>
<option id="firma">Firma</option>
</select>
Here is the jquery for it:
$j(document).ready(function() {
$j("#firma").click(function(){
$j(".input-company").addClass("show");
$j(".leweb_button_firma").addClass("hide");
$j(".leweb_button_privat").removeClass("hide");
});
$j("#privat").click(function(){
$j(".input-company").removeClass("show");
$j(".leweb_button_privat").addClass("hide");
$j(".leweb_button_firma").removeClass("hide");
});
});

The issue is because you're adding click event handlers to option elements. This is not well supported. Instead, add a change event handler to the select and check the chosen value.
Also note that you can use toggle() with a boolean argument to show/hide the elements, instead of adding or removing classes. Try this:
var $j = jQuery.noConflict();
$j("#priv-firma-select").change(function() {
var val = $j(this).val();
$j('.input-company, .leweb_button_privat').toggle(val == 'firma');
$j('.leweb_button_firma').toggle(val != 'firma');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-company">input-company</div>
<div class="leweb_button_firma">leweb_button_firma</div>
<div class="leweb_button_privat">leweb_button_privat</div>
<br /><br />
<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
<option value="privat">Privatperson</option>
<option value="firma">Firma</option>
</select>

$j(document).ready(function() {
$j("#priv-firma-select").change(function(){
if($(this).val() == "firma"){
$j(".input-company").addClass("show");
$j(".leweb_button_firma").addClass("hide");
$j(".leweb_button_privat").removeClass("hide");
}
else{
$j(".input-company").removeClass("show");
$j(".leweb_button_privat").addClass("hide");
$j(".leweb_button_firma").removeClass("hide");
}
});
});

Related

Show Hidden Form Field with Jquery

I seem to be having an issue with Jquery not displaying a hidden DIV after a selected form value is chosen. When a user clicks yes, I want the hidden div to then be revealed. Am I missing something? You can take a look here https://jsfiddle.net/73merxk9/
Javascript
<script>
$(document).ready(function() {
$('#permit').on('permit', function() {
$("#hiddenform").toggle($(this).val() == 'Yes');
}).trigger('permit');
});
</script>
Form
<div>
<label for="permit">Permit</label>
<select id="permit" name="permit">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div id="hiddenform">
<div>
<label for="permit_submitted">Permit Submitted</label>
<input placeholder="Permit Input Here..." name="job_number" type="text" id="job_number">
</div>
</div>
There is no such event "permit". You need to listen onchange event instead. Then you need to compare select value with "1" because Yes is a label, not value:
$(document).ready(function () {
$('#permit').on('change', function () {
$("#hiddenform").toggle($(this).val() == '1');
}).trigger('change');
});
Demo: https://jsfiddle.net/73merxk9/1/

jQuery loop over html, on change, find class, remove it

So I've got multiple forms with selects on a page. For each form I want the submit button to have a class of disabled until an option is selected, at which point the button should lose the disabled class (each form must work independently of the others). I can't seem to get this working using Next or Find. Here's my code:
<-- FORM ONE -->
<form>
<label for="available-countries-#variables.x#">Available Countries</label>
<select id="available-countries-#variables.x#" class="form-control available-countries-selector">
<option value="0">-- Select Country --</option>
<option value="1">Australia</option>
<option value="2">Brazil</option>
</select>
<button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>
<-- FORM TWO -->
<form>
<label for="available-countries-#variables.x#">Available Countries</label>
<select id="available-countries-#variables.x#" class="form-control available-countries-selector">
<option value="0">-- Select Country --</option>
<option value="1">Argentina</option>
<option value="2">France</option>
</select>
<button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>
-- JS --
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).find('btn-default').removeClass('disabled');
} else {
$(this).find('btn-default').addClass('disabled');
}
});
Any help would be appreciated
You need to look for the button in the current form. Best way to do that is using closest().
var isEnabled = $(this).val() !== '0';
$(this).closest("form").find('btn-default').toggleClass('disabled', !isEnabled);
How I would code it with event bubbling:
$(document).on("change", ".available-countries-selector", function(){
var isDisabled = $(this).val() === "0";
$(this).closest("form").find('btn-default').toggleClass('disabled', isDisabled);
});
ideally you would set document to an element that is closer to the forms.
In the JS context, the this is the <select> element. Since the btn-default is not inside the select, it will not find it with that code.
Instead you can go to the closest form parent and find it from there:
$(this).closest("form").find('btn-default').removeClass('disabled');
The submit button is not within the selector you are using so $(this).find will not work. However, you can use $(this).next() since the submit button is immediately after the select dropdown, like this:
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).next().removeClass('disabled');
} else {
$(this).next().addClass('disabled');
}
});
JSFiddle
You're closing your <button>s with a </a> and your find() is not looking for a classname (because you've excluded the dot) nor can you find a sibling. Use next([selector]) to find the next .btn-default:
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).next('.btn-default').removeClass('disabled');
} else {
$(this).next('.btn-default').addClass('disabled');
}
});
http://jsfiddle.net/mL9h2fof/
UPDATE (thanks #TrueBlueAussie)
You could use .toggleClass to make this even simpler:
$('.available-countries-selector').change(function(){
$(this).next('.btn-default').toggleClass('disabled', $(this).val());
});
http://jsfiddle.net/mL9h2fof/1/

showing one of 3 divs depending on which select is chosen [duplicate]

This question already has answers here:
jQuery select change show/hide div event
(10 answers)
Closed 8 years ago.
I have a select box with 3 option body, strength, distance. I want to use javascript / jquery to show a div depending on which of those options is selected. so far I have just got it working on a button push http://codepen.io/Irish1/pen/iwKam
html
<form>
<p>
<label for="select">
Goal Type
</label>
<select class="typeselect">
<option value=""></option>
<option value="body">
Body
</option>
<option value="strength">
Strength
</option>
<option value="distance">
Distance
</option>
</select>
<button class="toggle">push</button>
</p>
<div class="body">
<p>
<label for="body">
Body
</label>
</p>
</div>
<div class="strength">
<p>
<label for="strength">
Strength
</label>
</p>
</div>
<div class="distance">
<p>
<label for="distance">
Distance
</label>
</p>
</div>
</form>
css
.body {
display: none;
}
.strength {
display: none;
}
.distance {
display: none;
}
javascript
$('.toggle').click(function(){
$('.body').toggle();
});
Try
//dom ready handler
jQuery(function () {
//all the elements that has to be shown/hidden, it is cached for easy access later
var $targets = $('.body, .strength, .distance');
//chang handler for the select element
$('.typeselect').change(function () {
//hide previously displayed elements
$targets.hide()
//find the element with the selected option's value as class, if empty option is selected set it to an empty set
if (this.value) {
$('.' + this.value).show()
}
})
})
Demo: Fiddle
If you want to make the button handler work then
//dom ready handler
jQuery(function () {
//all the elements that has to be shown/hidden, it is cached for easy access later
var $targets = $('.body, .strength, .distance');
var $select = $('.typeselect');
//click handler for the button
$('.toggle').click(function (e) {
//prevent the default form action of the button click
e.preventDefault();
//hide previously displayed elements
$targets.hide()
//selected value
var val = $select.val();
//find the element with the selected option's value as class, if empty option is selected set it to an empty set
if (val) {
$('.' + val).show()
}
})
})
Demo: Fiddle
$('#typeselect').change(function(event) {
$('.target').hide();
var option = $(this).val();
if (option != "") $('.'+option).show();
});
and a few minor mods to the html
<form>
<p>
<label for="select">Goal Type</label>
<select id="typeselect" class="typeselect">
<option value=""></option>
<option value="body">Body</option>
<option value="strength">Strength</option>
<option value="distance">Distance</option>
</select>
</p>
<div class="body target">
<p><label for="body">Body</label></p>
</div>
<div class="strength target">
<p><label for="strength">Strength</label></p>
</div>
<div class="distance target">
<p><label for="distance">Distance</label></p>
</div>
</form>
You can view and edit here at codepen: http://codepen.io/anon/pen/ktesh
Give a name / Id to Select and Div's.
var x = document.getElementById("SelectId / Name").selected;
if(x==0) {
document.getElementById("body").style.display = "block";
} else {
\\ Similarly for other div to display on the basis of x
}
Try this:
$('.typeselect').change(function(){
$('div').hide();
if($(this).val() == ""){
$(this).children('option:first-child').show();
}
else
$('.' + $(this).val()).show();
});

In Dropdown list onchange event

My code is as follows:
<!DOCTYPE html>
<html>
<body>
<script>
function tab()
{
current=document.getElementById("test");
next=document.getElementById("run");
if(current.value!="-1")
{
next.focus()
}
}
</script>
<select id="test" onchange="tab()">
<option value="-1">--select--</option>
<option value="1" >TEST</option>
<option value="2">RUN</option>
</select>
<input type="text" name="run"/>
</body>
</html>
Definition: I have a dropdown which is having four values. If I change one value to another value in the dropdown it autotab to the textbox. As per my code, it is working fine.
But the issue is when I select 1st value in the dropdown then the autotab is working and again I select the same value from the dropdown (autotab is not working). I know that the problem is in the event. There is no change so the event won't fire. Please help me to rectify the issue.
There is no element with id run, which is being referenced by:
document.getElementById("run");
You probably intended to write:
<input type="text" name="run" id="run"/>
Use onBlur() instead of onchange().
The onBlur event is fired when you have moved away from an object without necessarily having changed its value.
The onChange event is only called when you have changed the value of the field.
please have a lookinto this to know about events
Try using mouseup & keyup event as a work around:
var current = document.getElementById("test");
var next = document.getElementById("run");
var open = false; //drop-down closed
var watchOpen = function() {
open = !open; //inverse flag to identify state of drop-down
};
var tab = function() {
if (!open && current.value !== "-1") {
next.focus();
}
};
<select id="test" onmouseup="watchOpen();tab();" onkeyup="watchOpen();tab();">
<option value="-1">--select--</option>
<option value="1">TEST</option>
<option value="2">RUN</option>
</select>
<input type="text" id="run" /><!-- replaced name with id -->
try to use onBlur() .It will solve the problem
I think this is possible with html5
onselect
Try this :
<!DOCTYPE html>
<html>
<body>
<select id="test" onchange="tab()">
<option value="-1">--select--</option>
<option value="1">TEST</option>
<option value="2">RUN</option>
</select>
<input type="text" name="run" id="run" />
<script type="text/javascript">
function tab() {
current = document.getElementById("test");
next = document.getElementById("run");
if (current.value != "-1") {
next.focus();
next.value = current.options[current.selectedIndex].text;
} else {
next.value = "";
}
}
</script>
</body>
</html>

Hide elements using jquery based on option select

I have two forms and a selector.
This is my code --
<select>
<option value="1">Pay</option>
<option value="2">Goog</option>
</select>
<form id="pp">
<input type="text">
</form>
<form id="cc">
<input type="text">
</form>
Now if option 1 is selected i want to hide form CC. if 2 hide form PP.
How do i do it with js or jquery? thanks
Try this (using jQuery):
$("select").bind("change", function() {
if ($(this).val() == "1") {
$("#pp").show();
$("#cc").hide();
}
else if ($(this).val() == "2") {
$("#pp").hide();
$("#cc").show();
}
});
Additionally, you could hide both forms using .hide() as shown above before the user selects any option.
bind is attaching an event handler to the "change" event of the select box. This is fired when the user changes what option is selected.
Inside the handler, val is used to determine the value of the currently selected option.
show() and hide() are used on the correct forms, depending on which option was selected.
Working example: http://jsfiddle.net/andrewwhitaker/faqZg/
<script>
function Hide(val)
{
if(val==1)
{
document.getElementById('cc').style.display='none';
document.getElementById('pp').style.display='inline';
}
if(val==2)
{
document.getElementById('pp').style.display='none';
document.getElementById('cc').style.display='inline';
}
}
</script>
<select onchange="Hide(this.value);">
<option value="">Please Select</option>
<option value="1">Pay</option>
<option value="2">Goog</option>
</select>
<div id="pp">
<input type="text">
</div>
<div id="cc">
<input type="text">
</div>

Categories

Resources