I'm trying to use jQuery's .toggle() to show and hide one of three divs. The divs have unique ids and the decision which div is got toggled is based on which of the three radio buttons has been selected. The three radio buttons have values that correspond to the ids of the divs. So if someone clicks the -1 radio, the div with the id cMB_0292_A07.m1 should be toggled.
However I'm not getting any response at all and there's no report of any errors in debugger that I've tried. What is wrong?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function showdiv(obj) {
var n = obj.name;
var v = $("input:radio[name='" + n + "']:checked").val();
alert(v);
$("#" + v).toggle();
}
</script>
</head>
<body>
<input name="cMB_0292_A07" value="cMB_0292_A07.m1" onclick="showdiv(this);" type="radio">-1
<input name="cMB_0292_A07" value="cMB_0292_A07.0" onclick="showdiv(this);" type="radio">0
<input name="cMB_0292_A07" value="cMB_0292_A07.p1" onclick="showdiv(this);" type="radio">+1
<div id="cMB_0292_A07.m1" style="display: none">minus1</div>
<div id="cMB_0292_A07.0" style="display: none">zero</div>
<div id="cMB_0292_A07.p1" style="display: none">plus1</div>
</body>
</html>
This is actually a two part issue
First off, you shouldn't have . within IDs.
Secondly, jQuery is seeing this: $('#ID.CLASS')
It is searching the DOM looking for ID: cMB_0292_A07then a child class of m1 for example.
You can fix this, by either removing the periods within your IDs, or using the regex selector [id=""].
$('[id="' + v + '"]').toggle();
jsFiddle DEMO
Other sidenotes, don't use onClick events. It's better to separate your business logic & presentation logic. Use jQuery .on('click', function () {}); events!
You cannot use ., since it will look for its child with class m1 or 0 or p1.
Check out below code snippet:
$(document).ready(function(){
$("input[type='radio']").click(function(){
alert($("#"+$(this).val()).length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">-1
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">0
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">+1
<div id="cMB_0292_A07" style="display: none">minus1</div>
<div id="cMB_0292_A07" style="display: none">zero</div>
<div id="cMB_0292_A07" style="display: none">plus1</div>
Related
May be I'm not clear with my title, looks messy, so here is my code. Making a plugin in WordPress.
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
I have two radio buttons in a form to input data:
<label><input type="radio" name="radio_btn" checked="checked" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
And here are my two divs:
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv" style="display: none;">div 2</div>
Scenario: I'm using the same form for Inserting Data and Editing data as well. When inserting, I can toggle between the two divs, where the first one is checked by default. If I click on the other, then the divs are toggling nicely, I can use any one of them at a single time. So the inserting thing is fine.
Now, when I'm going to edit my data, I'm getting the data using $_GET[] and db query, and passing them to their fields accordingly and they are doing well too. But just the matter of toggling here, when data for <div id="togglediv2"> is isset showing, data for <div id="togglediv3"> is isset is also showing, but if not toggled by click the field is not visible you know. :(
I tried in a basic way swapping the HTML checked="checked" from one to another, I failed, because the jQuery isn't matching them.
So, I need to change the jQuery in a way so that, the toggling works when I'm inputting, as well as when editing my data. What are the changes I can do to change my jQuery to achieve this into my desired way?
You have 2 options:
1) Show/hide divs in your php
2) Pass value of "test" to javascript and add
$("#togglediv" + test).click();
In fact there is a 3th option, which I prefere. Create a .hidden css class and add in your php (to a togglediv which is hidden obvieusly) when you render the page. Then instead of hide()/show() use addClass('hidden') and removeClass('hidden'). I'm not sure if this will be slower/faster but I think it makes it more readable.
CSS
.hidden { display: none; }
JS
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").bind('change', function() {
var test = $(this).val();
$("div.togglediv").removeClass('hidden');
$("#togglediv" + test).addClass('hidden');
});
});
</script>
Give this a try (it worked for me).
It does not show the DIVs when initially loaded, they will show when a radio button is selected.
I added the jQuery library link I used, just in case.
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.togglediv").addClass('hidden');
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<label><input type="radio" name="radio_btn" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv">div 2</div>
</body>
</html>
I would use two hidden inputs that I would toggle the same ways as the divs to know which form is being submited, hiding the div in which the data is entered will still set the variables inside the div for php.
So I would have
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("input.togglevalue").attr('disabled', 'disabled');
$("input#toggleinput" + test).removeAttr('disabled');
$("#togglediv" + test).show();
});
Then in php I would have these two inputs in each of the divs
<div id="togglediv2">
// The current div content
<input type="hidden" name="togglediv2" value="1" class="togglevalue" id="toggleinput2" />
</div>
and
<div id="togglediv3">
// The current div content
<input type="hidden" name="togglediv3" value="1" class="togglevalue" id="toggleinput3" />
</div>
Then in php I would check for these inputs if they are set so you have:
<?php
if (isset($_GET['togglediv2'])){
// Do actions for Paste a Code
} elseif (isset($_GET['togglediv3'])){
// Do actions for Put an Image
}
?>
I am using the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Project Quiz</title>
<link rel="stylesheet" type="text/css" href="z/baseCss.CSS">
<script src="/jquery-1.9.1.min.js"></script>
<script src="/baseJS.js"></script>
</head>
<body>
<div id=header></div>
<div id=contain>
<h1>Welcome to my web application</br>
Please enter your name, click 'continue' and have fun</h1>
<form>
<input type="text" id="name" value="John Doe"/>
</form>
<div class="awesome">Continue</div><br/>
</div>
<div id=footer></div>
</body>
</html>
and a code of jQuery:
$(document).ready(function(){
$("input")
.focus(function(){
$(this).css('outline-color','#559FFF');
$(this).blur(function(){
$(this).css("outline-color","#FF0000");
});
});
$("input").click(function(){
var value = $(this).val(function(){
$(this).html("");
});
});
$(".awesome").click(function(){
b._slide(1000);
});
var b = $("div:nth-child(2)");
alert(b);
});
My problem is that I can't figure it out how to select all children of <div id="contain"> and just make them fade out when I click my div button which is the one with the "awesome" class.
This is what I have tried so far:
$(".contain").each(function(){
$(this).fadeOut(1000);
});
but it didnt work also i tried:
$(".contain").children(function(){
$(this).fadeOut(1000);
});
Same result here.
What am I doing wrong? I only need to fadeOut the content of <div id="contain"> and keep everything else the same as it is.
You need to use:
$("#contain").children().fadeOut(1000);
$(this) is your selector
.children() selects all the children of an element
.fadeOut(1000) fades out the current selection
Your attempts were wrong because:
$(".contain").each(function(){ $(this).fadeOut(1000); });
Selects all the elements with class .contain and hides them
$(".contain").children(function(){ $(this).fadeOut(1000); });
Selects the elements with class .contain, and then you're passing a function to .children() which it does not handle.
Note, in your case contain is an ID and not a class.
beside shangeing the "." to "#" form the jquery selector, if you don't need to insert anything else or display new content into <div id="contain">, you can just do this
$("#contain").fade(1000);
all the child will fade too
I want to do the following:
I have three checkboxes:
Hide Box1
Hide Box2
Hide Box3
I want to use Jquery to:
When Box1 checked, hide box 2 and 3, if unchecked make box 2 and 3 visible. Also where do I place the code?
Thanks in advance
Here is a complete example using the markup you gave in the comment. I also took the liberty to give the checkbox's labels which means when you click the text it will toggle the checkbox (more accessible and usable).
See on JSFiddle
HTML
<form>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box1" />
<label for="box1">Hide Box1</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box2" />
<label for="box2">Hide Box2</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkbox3" id="box3" />
<label for="box3">Hide Box3</label>
</div>
</form>
jQuery
$('.toggle-checkbox input[type=checkbox]').click(function () {
if ($(this).is(':checked')) {
$('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
} else {
$('.toggle-checkbox').show();
}
});
To include jQuery in your page, place the following within your <head> tag.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
You could do this in between tags
$('.one').click(function () {
if ($(this).is(':checked')) {
$('input[type=checkbox]').not(this).hide();
} else {
$('input[type=checkbox]').not(this).show();
}
});
http://jsfiddle.net/davidchase03/MYASr/
Assuming your checkboxes have the ids "box1", "box2" and "box3":
$(document).ready(function(){
$("#box1").change(function(){
$("#box2, #box3").toggle();
}
}
I haven't tested this, but anytime hide box 1 is checked or unchecked, it will toggle the visibility of the other two boxes.
The optimal place for your code would be inside of a script element located just before your closing body tag, so something like
<body>
Your page stuff here
<script>
Code from above here
</script>
</body>
I printed to the screen 16 icons (little pictures).
Now I want to be able to select icons,
and when I press a button the selected icons ids will be sent in a form.
I saw in the net only checkboxes and lists multiselect,
what's the best way to do this?
(I'm pretty new to web design)
thanks ahead!
Although jQuery isn't in your tags, you should introduce yourself to jQuery. It'll make your life easier, for what you're trying to do. Here is the basic steps both if you use jQuery and if use just Javascript:
With jQuery
Give all your icons a class and each one a unique id:
<img src='icon1.png' data-iconID=2233 class='myIcons' />).
Then bind that class to a click event
$('.myIcons').bind('click', function() {
$(this).toggleClass('selectIcon');
});
Attach form submit function to onsubmit:
<form ... onsubmit="submitForm();">
Build submitForm function:
function submitForm() {
var csvIconIds = '';
$.each($('.myIcons.selectIcon'), function (index, value) {
csvIconIds += $(value).attr('data-iconID');
});
//submit scvIconIds here along with other form data (ajax?)
}
With Javascript
Similar as above but way more complicated...
To toggle classes see this thread: How to add/remove a class in JavaScript?
To getting attributes by class see this site: http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/
This could be a way using just plain Javascript or jQuery. I prefer the jQuery version, since it separates the click handler from the markup, instead of using inline onclick handlers, which are in general discouraged.
What this does is use an input element array, which you can create by adding [] to the element name. This same technique can be used on SELECTs and other elements, since it signals to the server that an array has been submitted, as opposed to value known by a single key.
<html>
<head>
<style type="text/css">
div img {
cursor: pointer;
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
if (id != '' && !document.getElementById('input_'+id)) {
var img = document.createElement('input');
img.type = 'text';
img.id = 'input_'+id;
img.name = 'images[]';
img.value = id;
document.imageSubmit.appendChild(img);
}
}
$(document).ready(function(){
$('#jqueryimages img').click(function(){
setFormImage(this.id);
});
});
</script>
</head>
<body>
<pre><?php
if (count($_GET['images'])) {
print_r($_GET['images']);
}
?></pre>
<div style="float: left; width: 49%;">
<h1>Plain ol' HTML</h1>
1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
<br/>
2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
<br/>
3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
<br/>
4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
<h1>jQuery</h1>
5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
<br/>
6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
<br/>
7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
<br/>
8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
<input type="submit" value="View Selected"/>
</form>
</body>
</html>
try this
var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array
I wanted to have some radio buttons that disabled when the mouse went over and enabled again when it went out (just for fun).
<form>
<input type="radio" name="rigged" onMouseOver="this.disabled=true" onMouseOut="this.disabled=false">
</form>
When the mouse goes on it it does what it should be when it goes back off the button wont re-enable. Also, how do I make it default to enable so that when you refresh the page it doesn't stay disabled.
Thanks in advance.
You could achieve the same effect by wrapping your radio buttons in a div tag and setting the onmouseover and onmouseout events.
<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
<input name="rigged" type="radio">
</div>
The above solution only works in IE, for a solution that works in FireFox do the following.
<script type="text/javascript">
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>
*This javaScript function was borrowed from here: Enable or disable DIV tag and its inner controls using Javascript
<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
<input name="rigged" type="radio">
</div>
The inputs do not fire the mouseout events because they are disabled.
So you have to wrap it in a div and catch the div's events.
If you want pure javascript, use Phaedrus's example "toggleDisabled" script.
If you want jQuery and not-so-newbie friendly:
<html>
<head>
<title>Page</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
function toggleDisabled(d) {
var disable = d;
this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
}
$("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
});
</script>
</head>
<body>
<form>
<div class="radios">
<input type="radio" name="rigged" value="1"/> Item One<br />
<input type="radio" name="rigged" value="2"/> Item Two<br />
<input type="radio" name="rigged" value="3"/> Item Three<br />
<input type="radio" name="rigged" value="4"/> Item Four
</div>
</form>
</body>
</html>
I had a similar problem with wanting an image to expose, and then go regular when the mouse left the image. I was using jQuery and ended up hooking into mouseenter and mouseout, instead of the events you are using. You might want to try those.
$('#rigged').mouseenter(function() {
$(this).disabled = true;
}).mouseout(function() {
$(this).disabled = false;
});
Something like that.
Again, that's using jQuery.
(You'll have to give the input radio button the id 'rigged')
I think when it's becoming disabled, it's not going to fire any events.
You could try a few things.
On mouseover, make an invisible div overlay the radio box. This will make it impossible to use. Then on the mouseout of this invisible div, remove the div.
You could play with mouse x and y coords, and see if they overlay your radio elements. This isn't an optimal solution though.
Markup for the first, in jQuery, would go something like this
$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element
$('#rigged').bind('mouseover', function() {
$('#overlay').show();
});
$('#overlay').live('mouseout', function() {
$(this).hide();
});
You'll need to adapt this to work with multiple elements.