JS library show/hide element on checkbox status - javascript

I'm fairly new to JS and am trying to write my own library using this blog post, and would like a hand. (Apologies if this is too vague for an SO question)
I'm trying to write a function that shows or hides a queried element based on the status of a queried checkbox (and another for a radio button if I can't do it in one method) on a form.
So I'm looking to end up with something like this:
$(divId).checkToggle(checkBoxId);
So the div will start as hidden. When the checkbox is clicked, the div will toggle to visible. When the checkbox is unchecked, I'd like the div to hide again and any input fields inside it to be cleared (the probably will be only one input field).
I know that this function isn't really going to be very combine-able or reusable, but I would use it so often for just that one thing that I'm going to overlook it.
Okay, enough preamble. Here's what I have so far.
Could I have some suggestions on how to change/finish my checkToggle method? Thanks!

This worked for me:
$(document).ready(function(){
$('#checkbox1').change(function() {
if($(this).attr('checked')) {
$("#myDiv").slideDown(1000);
}
else
{
$('#myDiv').slideUp(1000);
}
});
});

Related

hide/show form fields based on dropdown choice with class tag

I have a problem with the show/hide function on an app form. The app form is live here -> http://www.specialfinance.co.uk/introducers/submit-an-enquiry/secured-loans.html
Currently the form works as a multipage form (within javascript) which is fine, it's doing the job nicely, but what I can't figure out based on any of the Q&A guides I've looked thru on here (I've gone thru many google searches) is how to integrate a further show/hide script to hide the applicant 2 column if the dropdown at the top has a value of 1.
The column is a table with all the inputs in separate rows, so I was thinking that the easiest way would be to link to a class and then hide the class, but I have no idea how to do this.
I'm getting there with my knowledge of javascript, but this one seems to be a hurdle I can't get over.
You can use the .change() (jQuery) with the dropdown list to see what the value is, then based off that, hide and show what you need.
$("#idOfDropDown").change(function() {
if ($(this).val() == 1) {
//Show or Hide what you need .show()
}
else {
//Show or Hide .hide()
});
Heres a demo: http://jsfiddle.net/Szt59/1/ using a class.
Here is a quick and dirty example. It's easy to see how you can extend it.
$("#drop").change(function(){
if( $(this).val() === "2" ) {
$(".rest").slideDown("fast");
} else {
$(".rest").slideUp("fast");
}
});
Click to see demo
Edited.

jQuery searchable checkbox list and tristate checkbox

I'm building a simple asp page on which I have list of peoples with checkbox on left of every name.
I've managed to create a simple jQuery script that allows hiding and showing rows of table based on input:
http://jsfiddle.net/Tq97v/ (first part)
As You can see I can enter part of name and then specific row are hidden.
Using red "x" I can uncheck all checkboxes.
What I'm trying to do now is to change that static red "x" into tristate checkbox.
Don't have idea how to even start.
Do I must add change listener to every checkbox in my list?
Second thing - how to create multiple instances of the same "plugin" on site.
Right now I'm identifying input by it, but it would be nice to call function with that input as param, and it would fine table after that input and create necessary logic.
This way I could call function multiple times on page to have more than one list.
I'm not asking for whole solution (of course it is always welcome :) ) but what I need is idea how to accomplish this in efficient way and as optimized as possible, because sometimes my list has 500+ elements.
P.S. don't look at HTML code, it is ASP generated.
I found this plugin: https://github.com/bcollins/jquery.tristate, but I have no idea how to use it with my list.
UPDATE:
I've managed to turn my code into functions, but right now I must call 3 functions for every list.
Here is my updated code: http://jsfiddle.net/65MEV/4/
How can I change it to one function? Will it be better?
This is my updated code. Still thinking about way of doing that Indeterminate Checkbox instead of my remove image.
UPDATE2
I build working code :)
http://jsfiddle.net/65MEV/9/
But I would like to improve it as much as possible.
Any suggestions are welcome!
A tristate checkbox is like the Three-Portal Device: an illusion.
What you actually want is to make the checkbox indeterminate (by setting the property of the same name to true). To implement this, you will need a change (or click) handler on each checkbox, then you'll need to check if all of them are in the same state, and if not then you set the indeterminate property. It's a hassle, really, because you rarely see indeterminate checkboxes and so most users don't know what to do with them. To be avoided, if possible.
To create multiple instances of the same plugin access elements relatively to an other element.
For example: in your case instead of keeping the item in a jQuery object var $tableRows = $('table.myList tr'); access them in the event.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
and you only have your actual list.
And for the tree state checkbox you don t need a plugin just add a button or link and every click check it status you can keep the status by jQuery data and change the element image according to this data.

how to pass arguments into an event handler to make it unique?

please run this jsfiddle as an example.
http://jsfiddle.net/AFzqt/11/
in my example, i have a link saying same as above, if you fill out the first box it will copy the value in the second box. look at the code, and look at the display. theres a reiteration of the code just to have the boxes appear twice. well... in my real use of this, i ideally want there to be about 40 of these buttons.
is there a way to do this without copying the code 40 times?
i am new to jquery, usually in another language i would just pass in arguments, but with this syntax I don't see how i can do that? how can i handle this?
feel free to dabble around on my jsfiddle, and hopefully link a new revision, with the goal of reducing the handling of those 2 'same as above' buttons into just one function with the entry id's as parameters
If you add the changeButton class to each of the buttons it will be easier to select each of them to bind the event handler:
Same as Above
Then we can select each of the elements like so:
$(".changeButton").on("click", function(e) {
//select the previous jQuery Mobile select widgets, we will use just the previous two
var $allPrev = $(this).prevAll('.ui-select').find('select');
//change the value of the immediate previous select widget to the value of the one preceding it
$($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh");
e.preventDefault();
});
Here is a demo: http://jsfiddle.net/AFzqt/12/
This code will work for umpteen buttons since it works by using intuitive knowledge of the HTML structure (each link uses the previous two select widgets, no matter where on the page the link resides).
What about something like this?
function bind_click(button_id, target_id, origin_id) {
$(button_id).on("click", function(e) {
$(target_id).val($(origin_id).val());
$(target_id).selectmenu("refresh");
e.preventDefault();
});
}
$(function() {
bind_click("#changeButton2", "#entry_20", "#entry_18");
bind_click("#another", "#entry", "#entry2");
// More binding declarations
});

Creating a dynamic form

I need to create a form which has 2(Yes/NO) options and if the user clicks one of the option then he should get a collapsing subform with more specifics regarding to that particular selection. If he selects other option then he should get another collapsing subform with related info. I know that we have to use JavaScript or Jquery(to get the collapsing effect), but I am new to both. Any simple tutorials or info for beginners is greatly appreciated.
PS: I have seen many questions for this requirement but the fact is me being a beginner makes it tough to understand them.
Thanks,
Basically, you are going to need to wrap the two different subforms in divs and then use the jQuery .show() and .hide() functions to show and hide them when the right radio button is clicked.
Here is a useful tutorial on showing and hiding: http://papermashup.com/simple-jquery-showhide-div/
EDIT: More specific answer for user..
$(document).ready(function(){
$("#check-box").click( function(){
if( $(this).is(':checked')) {
$('#div1').show();
} else {
$('#div1').hide();
}
});
});
You have to render the entire form and hide all the subforms, each with a different ID. Depending on the button/choice pressed, you call $.show() on the corresponding div with code like this:
$("#choice1_subform").click(function(){
$("#div1").show();
});

How do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.
You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work
I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.

Categories