Dropdown selection short and better code - javascript

I have made a JSFiddle just for better understanding of my question!
So no need to paste code over here everything is visible on fiddle. Ill paste JS part.
JS Fiddle
$('select[name="chooseGW"]').change(function(){
if ($(this).val() == "fileiceGW") {
$('input#fileiceGW').css('display', 'block');
} else {
$('input#fileiceGW').css('display', 'none');
}
if ($(this).val() == "adworkGW") {
$('input#adworkGW').css('display', 'block');
} else {
$('input#adworkGW').css('display', 'none');
}
if ($(this).val() == "cpaleadGW") {
$('input#cpaleadGW').css('display', 'block');
} else {
$('input#cpaleadGW').css('display', 'none');
}
});​
Ok... so my question is how to make this code better and shorten cause I believe it can be for sure... Something like match data-gateway with specified id or something...
The code in JSfiddle works just fine but its too much of duplicate I believe.
Your help is appreciated, thank you !
P.S. explanation of how your shorten code works and what for is specified thing is more then appreciated.

The simplest update would be:
$('select[name="chooseGW"]').change(function() {
var val = $(this).val();
$('input').hide();
$('#' + val).show();
});​
JS Fiddle demo.
This version assumes you want to hide all other input elements when you show the selected element. If you want previously-shown input elements to remain visible, omit the line ending in hide():
$('select[name="chooseGW"]').change(function() {
var val = $(this).val();
$('#' + val).show();
});​
JS Fiddle demo.
You can, of course, omit the creation of a (more or less-) unnecessary variable:
$('select[name="chooseGW"]').change(function() {
$('input').hide();
$('#' + $(this).val()).show();
});​
JS Fiddle demo.
References:
hide().
show().
val().

<select name="chooseGW">
<option value="noneGW">-- none --</option>
<option value="fileiceGW">Fileice Gateway</option>
<option value="adworkGW">Adworkmedia Gateway</option>
<option value="cpaleadGW">CPALead Gateway</option>
</select>
<div style="display: inline;" >
<input type="text" id="fileiceGW" style="display: none;" value="fileice()" />
<input type="text" id="adworkGW" style="display: none;" value="adwork()" />
<input type="text" id="cpaleadGW" style="display: none;" value="cpalead()" />
</div>​
var inputs = {
fileiceGW: "input#fileiceGW",
adworkGW: "input#adworkGW",
cpaleadGW: "input#cpaleadGW"
};
$(function () {
$('select[name="chooseGW"]').change(function () {
$("input").hide();
var val = $(this).val();
var selector = inputs[val];
$(selector).show();
});
});

$('select[name="chooseGW"]').on('change', function() {
$('input').hide();
if(this.value !== 'noneGW') {
$('#' + this.value).show();
}
});
http://jsfiddle.net/f0t0n/tHckA/

Related

Using jQuery to show/hide an element if some value is found in document

I'm trying to hide an element if some specific value of input is not found on the site.
I can hide an element by:
$(document).ready(function() {
$("#someid").hide();
});
But how to show it, if the value is found? I'm trying to do something like this:
$(document).ready(function() {
$("#someid").hide();
$("input[value$='somevaluetobefound']").ready(function() {
$("#someid").show();
});
});
What am I doing wrong?
Try this:
$(document).ready(function() {
$("#someid").hide();
$('#inputID').on('input', function() {
if ( $('input').val() === 'test') {
$("#someid").show();
}
else $("#someid").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type 'test' to show DIV<br>
<input id="inputID" type="text">
<div id="someid">DIV</div>
I had not fully understood what you where trying to acomplish:
$( document ).ready(function() {
if (!$('input[value="somevaluetobefound"]'))
$("#someid").hide();
$(':input').on('keyup', function(){
if ($(this).val() == 'somevaluetobefound')
{
$("#someid").show();
} else {
$("#someid").hide();
}
});
});
I have updated the code here
EDIT: Based on new info provided by OP
$( document ).ready(function() {
if ($(':radio[value="somevaluetobefound"]').length !== 0)
$("#someid").show();
else
$("#someid").hide();
});
Sample here
<script type="text/javascript">
$(document).ready(function () {
$("input[value=somevaluetobefound]").closest('#someid').hide();
});
</script>
you can try this :
$(document).ready(function() {
$("#someid").hide();
if($("#someid").val() !=''){
$("#someid").show();
}
});
Improvising on #Arkej's answer:
$(document).ready(function() {
$("#someDiv").hide();
$(':input').on('input', function() {
if ( $('input').val() === 'somevalue') {
$("#someDiv").show();
}
else $("#someDiv").hide();
});
});
Here I am using :input to find all input boxes on the page. Since you need to either have an ID the input field you want or just have all input text boxes be used to show or hide your div depending on what the value you are looking for.
Also refer to this for guidance on getting val from inputs:
Get the value in an input text box
Cheers

Disabling submit button until multiple checkboxes are checked

I would like to disable a form submit button until 4 checkboxes are checked. I created a quick jsfiddle to represent my code that is not working as expected.
Here is my JS:
$(function() {
$("#question1, #question2, #question3, #question4").change(function() {
if( $("#question1").checked && $("#question2").checked && $("#question3").checked && $("#question4").checked ) {
$('.next_button').disabled = false;
}
else {
$('.next_button').disabled = true;
}
});
});
And the HTML:
<input id="question1" name="question1" type="checkbox" value="1">
<input id="question2" name="question2" type="checkbox" value="1">
<input id="question3" name="question3" type="checkbox" value="1">
<input id="question4" name="question4" type="checkbox" value="1">
<input class="next_button" name="commit" type="submit" value="Next" disabled="">
I am missing something simple here. Appreciate any thoughts!
Two issues here.
First, .checked is a Javascript attribute so using it on jQuery object wouldn't work. You will need to use jQuery's .is(':checked') call instead.
Second, on the JSFiddle you posted, you were using jQuery version 1.4.4, which didn't have .prop() support for the disabled attribute, thus you will need to use the attr() function to toggle the disabled state, instead.
See the updated function below:
$(function () {
$("#question1, #question2, #question3, #question4").change(function () {
if ($("#question1").is(':checked') &&
$("#question2").is(':checked') &&
$("#question3").is(':checked') &&
$("#question4").is(':checked') ) {
$('.next_button').attr('disabled', false);
} else {
$('.next_button').attr('disabled', true);
}
});
});
Working code at: JSFiddle
Try this
$(function() {
$("#question1, #question2, #question3, #question4").on( 'change', function() {
$('button.next_button').prop( 'disabled', $(':checkbox:checked').length === 4);
});
});
You have used old jQuery version 1.4 in Fiddle demo, so new function will not work properly
please try this way..
$(function() {
$("input[type=checkbox]").bind("click", function(e){
if($("input[type=checkbox]").serializeArray().length ==
$("input[type=checkbox]").length){
$(".next_button").removeAttr('disabled');
}else{
$(".next_button").attr('disabled', "disabled");
}
})
});
FIDDLE DEMO
I would preferred single selector e.g. class, element type instead of repeated ids of all elements
Instead of $('.next_button').disabled = false;, try using $('.next_button').prop("disabled", false); - likewise for setting it true. Some properties are removed, not set to false, so using the prop syntax will handle this for you.
Use this function
$(function() {
$("#question1, #question2, #question3, #question4").change(function() {
if( $('#question1').attr('checked') && $('#question2').attr('checked') && $('#question3').attr('checked') && $('#question4').attr('checked') ) {
$('.next_button').removeAttr('disabled');
}
else {
$('.next_button').attr('disabled','disabled');
}
});
});
Here is the fiddle link http://jsfiddle.net/CPFns/51/
I have updated your fiddle
Here is what I have changed in your code:
$(function() { $("#question1, #question2, #question3, #question4").change(function() {
if( $("#question1").attr('checked') && $("#question2").attr('checked') && $("#question3").attr('checked') && $("#question4").attr('checked') ) {
$('.next_button').attr("disabled",false);
}
else {
$('.next_button').attr("disabled",true); } });});
Thanks
try this
$(function() {
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]:checked').length >= 4){
$('.next_button').removeAttr('disabled');
}
else{
$('.next_button').attr('disabled', 'disabled');
}
});
});
Use
$(function() {
$(':checkbox').on( 'change', function() {
if( $(':checkbox:checked').length === 4 ) {
$('input.next_button').prop( 'disabled', false );
} else {
$('input.next_button').prop( 'disabled', true );
}
});
});
JS FIDDLE DEMO
You may try this:
$(function () {
$("input[name^=question]").change(function (e){
e.stopPropagation();
var toDisabled = (4 !== $("input[name^=question]:checked").length);
$(".next_button").prop('disabled', toDisabled);
});
});
DEMO

Using jQuery to remove multiple textarea boxes

I am still very new to JavaScript and jQuery.
I have the jQuery "add boxes" functionality working for adding dynamic <textarea>s, but the remove portion does not work.
My code:
$(function() {
var i = $('textarea').size() + 1;
$('#remove').click(function() {
if (i > 1) {
$('.this:last').remove();
i--;
}
});
$('.Add').live('click', function(e) {
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
});
Demo: http://jsfiddle.net/dnwTV/
Any help would be greatly appreciated.
You are selecting .this:last, and no elements with a class of this exists. Use textarea:last as a selector instead. Also, your markup is inconsistent; the original should have another <div> wrapping the two <textarea>s. Here is a corrected version of your jsFiddle.
$(function() {
var i = $('.Option > div').size() + 1;
$('#remove').click(function(e) {
if (i > 1) {
$('.Option > :last').remove();
i--;
}
e.preventDefault();
});
$('.Add').click(function(e) {
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
});​
That said, I don't believe your current code is either sufficiently neat or generic. See this jsFiddle for an example of how you might make this cleaner.
Note
You're creating multiple textarea with same id. It is not allowed.
You can change your add code like following:
$('.Add').live('click', function(e) {
$('<div><textarea id="txt'+ i +'"></textarea> <textarea id="txt'+ (i+1) +'"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
And one more thing
Instead of live, use on(). As you're not adding .Add dynamically so you not need live delegation for that. Just use following:
$('.Add').on('click', function(e) {
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
Your complete code should look like:
$(function() {
var i = $('textarea').size() + 1;
$('#remove').click(function() {
i = $('textarea').size() + 1;
if (i > 1) {
$('.Option > textarea:last').last().remove();
i--;
}
});
$('.Add').on('click', function(e) {
$('<textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i + 1) + '"></textarea>').fadeIn('fast').appendTo('.Option');
i++;
});
});
Working sample
I believe that this is the effect that you are trying to achieve:
Demo: http://jsfiddle.net/SO_AMK/dnwTV/4/
Code:
HTML:
<div class='Option'><textarea id="txt"></textarea> <textarea id="txt2"></textarea> </div>
Remove
<br/><br/>
<span class='Add'>Add Option</span>
​jQuery:
$(function() {
var i = $('textarea').size() + 1;
$('#remove').click(function() {
if (i > 1) {
$('textarea:last').parent().remove();
i--;
}
});
$('.Add').click(function(){
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
});​
here's an updated fiddle that works
http://jsfiddle.net/dnwTV/5/
Javascript:
$(function() {
$('#remove').click(function() {
$('.Option div:last').remove();
});
$('.Add').live('click', function(e) {
var i = $('textarea').length + 1;
$('<div><textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i+1) + '"></textarea></div>').fadeIn('fast').appendTo('.Option');
});
});​
Also fixed the fact that you're reusing html id's which should be unique per page.

jquery toggle with a master switch

I am trying to use jquery toggling to show and hide features of a specific product. I have it working, however it's not perfect and wondered if anyone could help please?
Basically what I'm having problems with is that when you use the master open all and then close all of the individual items on their own, I need the master switch to revert back to show all text.
In addition I want to have a + and - icon on each of the items but can't figure out how to only replace the clicked image and not all of them in the list!
Any help would be greatly appreciated, thanks.
Script
$(document).ready(function() {
$('.toggle').hide();
$('.toggler').click(function() {
var target = this.id + '_content';
var imgtarget = this.id + '_expand';
$('#' + target).slideToggle();
$('.toggleall').text('Hide all');
$('<img src="images/collapse.gif">').prependTo('.toggleall');
});
$('.toggleall').click(function() {
if ($('.toggle').is(':visible')) {
$('.toggle').slideUp();
$('.toggleall').text('Show all');
$('<img src="images/expand.gif">').prependTo('.toggleall');
} else {
$('.toggle').slideDown();
$('.toggleall').text('Hide all');
$('<img src="images/collapse.gif">').prependTo('.toggleall');
}
});
});
Html
<div class="toggleall"><img src="images/expand.gif">Show all</div>
<br><br>
<div class="toggler" id="toggle1"><img src="images/expand.gif" class="toggle1_expand">Toggle 1</div>
<div class="toggle" id="toggle1_content">only toggle1</div>
<div class="toggler" id="toggle2"><img src="images/expand.gif" class="toggle2_expand">Toggle 2</div>
<div class="toggle" id="toggle2_content">only toggle2</div>
<div class="toggler" id="toggle3"><img src="images/expand.gif" class="toggle3_expand">Toggle 3</div>
<div class="toggle" id="toggle3_content">only toggle3</div>
Here is the jfiddle of the code (thanks François Wahl): jsfiddle.net/GUYfG
Here is the working version in a proper format :-
$(document).ready(function() {
$('.toggle').hide();
$('.toggler').click( function() {
var target = this.id + '_content';
var imgtarget = this.id + '_expand';
$('#' + target).slideToggle(function(){
if( $('.toggle').is(':visible') ) {
$('.toggleall').text('Hide all');
$('<img src="images/collapse.gif">').prependTo('.toggleall');
} else {
$('.toggleall').text('Show all');
$('<img src="images/expand.gif">').prependTo('.toggleall');
}
});
if( $('.toggle').is(':visible') ) {
$('.toggleall').text('Hide all');
}
});
$('.toggleall').click(function() {
if ($('.toggle').is(':visible')) {
$('.toggle').slideUp();
$('.toggleall').text('Show all');
$('<img src="images/expand.gif">').prependTo('.toggleall');
} else {
$('.toggle').slideDown();
$('.toggleall').text('Hide all');
$('<img src="images/collapse.gif">').prependTo('.toggleall');
}
});
});
EDIT:
Here is the fiddle
I have edited the code check now. Also check the fiddle.
To expand-collapse you can toggle a class with different background images inside a DIV, or use unordered lists (UL / LI).

jQuery .select() inside .live() does not work on IE7 and IE8

jQuery(document).ready(function($) {
$('input[type="text"]').live('focus', function() {
if (this.value == 'someValue') {
this.select();
}
});
});
The same result with .delegate() and .on().
What am I missing?
Any help is appreciated.
Works fine for me using .on. Perhaps you want it to select the text when you click?
$("form").on("click", ":text", function(){
if ( $(this).val() === "someValue" ) {
$(this).select();
}
});​
Fiddle: http://jsfiddle.net/jonathansampson/nfKm7/
It kind of does work, the text just becomes deselected as soon as it has been selected when using the focus event
Using on() and an event other than focus seems to work better
see this fiddle
DEMO: http://jsfiddle.net/hjgZ3/
remove $ from function($)
<input type="text" value="someValue" />
$(function(){
$('input[type="text"]').live('focus', function() {
if (this.value == 'someValue') {
alert('hi');
//this.select();
}
});
})

Categories

Resources