Toggle Javascript - javascript

Making a password generator website and I don't know how to allow people toggle checkboxes to choose a preference for their password.
I don't know how to allow people to toggle checkboxes more than once. I also would like to know how it to update automatically when someone checks the box.
<label class="input-toggle">
<input type="checkbox" id="checkbox1" checked>
<span></span>
</label>
I've been trying something like this:
$('#checkbox1').click(function() {
});
But I don't know how to make the characters longer or shorter as an option.
What I have so far: http://codepen.io/HaydnAnderson/pen/EKGxJP

Very simple question.
https://jsfiddle.net/41vuxh44/1/
window.passwordGen = {
preferences : {
uppercase : false,
numbers : false
}
};
$("#numbers").on('change', function(event)
{
window.passwordGen.preferences.numbers = $(this).prop('checked');
console.log(passwordGen);
});
In my example, I am binding a living change event to the #numbers checkbox. Using on is the new way of doing living event bindings.
When the checkbox is altered, it fires the event. I then update my global preferences object to be the value of the checked property, which is a boolean representing if the checkbox is clicked.
There's a lot more I could do with this to make my preferences object more robust. Perhaps you'd want to use the new HTML5 DOM storage to retain preferences, and then move this logic to a new global that fires also on page load. You could also conceivably move this to a general function that handles many different inputs being changed to keep code concise, but what I've given will do what you're asking for.

Related

How to uncheck checked items in a matrix choice checkbox? (Wordpress/FormCraft plugin)

I am building a form for users to submit a list of their items that they want to move.
I use Wordpress with FormCraft Premium plugin which has the option to include a choice matrix (checkbox) in the form.
I want users to tell me how many beds do they have, how many night stands, how many mirrors, TVs, etc.
But the problem is that by default users can't uncheck a choice that they make.
So if a user selects accidentally that he has 4 TVs, he can't later uncheck that by clicking on that radio button again.
He is only able to select another radio button (1, 2, 3 or 5+) which is bad in cases when user doesn't have any TVs.
Could you please tell me how is it possible to fix this?
Here is the URL to my form: https://www.tajnezdravlja.com/form-view/4
I guess this can be solved only by using javascript.
I don't have any experience with javascript, I know only HTML and CSS.
I don't know where can I see any relevant code, as I don't have experience with .js
When I inspect the site and open console I don't see anything relevant.
However, the FormCraft plugin has an option to add custom javascript code to the form.
It says in admin panel:
Custom JavaScript
Add any JavaScript code in here, and it will be executed on page load. You don't have to use tags. Make sure this is valid JavaScript!
When I click once on a choice, I expect it to be checked and that happens, that is ok.
But when I click again on the same choice, I expect it to become unchecked, but it remains checked. That is the problem.
Try adding this to Custom JavaScript. It allows users to toggle the radio input type in the matrix fields.
jQuery('.fc-form .matrix-cover :radio').mousedown(function(e){
var jQueryself = jQuery(this);
if( jQueryself.is(':checked') ){
var uncheck = function(){
setTimeout(function(){jQueryself.removeAttr('checked');},0);
};
var unbind = function(){
jQueryself.unbind('mouseup',up);
};
var up = function(){
uncheck();
unbind();
};
jQueryself.bind('mouseup',up);
jQueryself.one('mouseout', unbind);
}
});

Keep cell color changed with checkbox on refresh

I have cells changing background color on checkbox check and I worked out how to keep the checkboxes checked on refresh (though looking back I don't think that works anymore), but I don't know how to keep the color change on refresh. I don't actually know Javascript at all and this is all from other questions but I want it to work. If I've done something completely wrong please correct me and don't assume I did it on purpose because I have absolutely no idea what I'm doing.
$(document).ready(function() {
$(".colourswitcher").click(function() {
if($(this).is(":checked")) {
$(this).closest("td").css("background","#ff3333");
}else {
$(this).closest("td").css("background","#202020");
}
});
});
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
Since you're new to javascript, I'm going to ask the dumb question: Have you included jQuery?
This code that you've pulled makes use of jQuery, a very useful library (not built-in to javascript) that has become so commonplace that people often don't even state its name when asking or answering a question involving it. But anytime you see that $ notation, you're probably dealing with jQuery.
You need to include the library file in your html file so it knows what those special symbols and syntax are:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
If you're testing this stuff in Google Chrome, press F12 and view the developer console. You will see "undefined" errors in red when you are missing things like this.
Here's another answer assuming you have a better working knowledge than my first answer:
The first bit of your code runs when the html document has loaded and attaches an event listener to change the nearest cell background color accordingly when the checkbox is clicked. Note two things here though. 1) that behavior will be attached to all html elements with the class "colourswitcher", not just inputs. 2) that behavior assumes that what was clicked has a property "checked", which only a checkbox does.
The middle bit I presume is supposed to run once, when the page is first loaded, to get the saved state of the checkbox from localStorage. This bit could be moved into the document ready bit.
The third bit of your code attaches an event listener to every input element (not just checkboxes) such that every time one is clicked, a checked true/false state will be saved in localStorage.
localStorage is a convenient way to save information between browser refreshes. You can save anything you want, ie. localStorage.CandyCanes = 7 and that variable will be stored in the user's browser and can be recalled later. Note that your above code will only work as intended if there's a single checkbox, because you're using one slot, or one variable, in localStorage to save: localStorage.input.
That's all I'm going to elaborate on this for now. If this is more than you expected, then it's time to hunker down and learn, or get a professional involved.

Javascript Disabling Multiple field objects onchange

I was using the following script to disable multiple field objects when one field was selected, I have changed the fields so that they no longer have a default value of zero but can have varying values:
JS
function disablefield(fieldObj)
{
var fields = new Array('Seat_1200', 'Seat_1230', 'Seat_100','Seat_130','Seat_500','Seat_530','Seat_600','Seat_630','Seat_700','Seat_730','Seat_800','Seat_830');
for(var i=0; i<fields.length; i++)
{
fieldObj.form[fields[i]].disabled = (fieldObj.value!=0 && fieldObj.name!=fields[i]);
}
return;
}
Can anyone suggest a way to detect the current value of the fields seat_xxxx (which are loaded dynamically) integrate it into the above script then disable the all fields when the value one changes. Or alternatively if the field is de-selected i.e. the user changes his mind and selects another option, then the field is set to zero automatically to satisfy the above script re-enabling all the selection options.
In response to the problem from the author I have a new code set.
I would use a Jquery button set to represent all the tables you have. Then selectively disable them based on the result. Below is a fiddle
http://jsfiddle.net/05cpss80/
Buttonsets are really just classed checkboxes but they give you what you need.
<input type="checkbox" id="check1"><label for="check1">Table1</label>
As such you can add additional classes to them to stop them from "checking"
$('#check2').attr("disabled", "disabled");
I would recommend you add some css to make it more obvious, but try the fiddle. Click 2, then the button and it will no longer work. (Thus when they make a selection you call disable on whatever tables you need)

How can I exclude controls from making form Dirty?

I'm using this: $('form').dirtyForms(); from https://github.com/snikch/jquery.dirtyforms to check if my form is dirty. However, on my page I have some dropdown's that are simply used for filtering (they should not make my form "dirty"). Right now when I select any of these drop down's it causes my form to become dirty. Using jquery.dirtyforms (I read their docs but do not see how), how do I exclude selectors (dropdowns, textboxes, etc.) maybe via a class name so that they do not mark the form as dirty.
I tried various things like assigning these dropdowns / filters a class called ignoreDirty then in my jquery I did this:
$('form').dirtyForms().ignoreClass('ignoreDirty');
This produces an error, so I must be doing something wrong.
Note I've also tried setting it via property:
$('form').dirtyForms({ ignoreClass : "ignoreDirty" });
But this still makes my form dirty for any control whose class name is still ignoreDirty
Please note these filters cause postbacks but lets say I go to my form and have not made a single change. I start clicking on these filters and the minute they post back this happens:
What can one say, the plugin code makes almost no sense to me :D However to make it quickly work for ignoring select boxes, you could replace its onSelectionChange with following
Original function
var onSelectionChange = function() {
$(this).dirtyForms('setDirty');
}
New version
var onSelectionChange = function () {
//this is the new line. self explanatory
if ($(this).hasClass($.DirtyForms.ignoreClass)) return;
$(this).dirtyForms('setDirty');
}
After this you should rely on the original developer for a proper fix. I just posted this as an answer because of space in comments
There seems to be 2 different issues here.
First of all, you are attempting to set the ignoreClass to ignoredirty. ignoredirty is the default value, so there is no reason to set it. However, if you do need to set it to something else, you can do so using the syntax:
$.DirtyForms.ignoreClass = 'my-ignore-class';
Secondly, in version 1.0.0 the ignoreClass only worked on Hyperlinks. This behavior has been amended to work with input and selection elements in version 1.1.0.
In version 1.2.0, you can now also set the ignoreClass to parent container elements to ignore input or clicks from any element within.

Toggle classes with radio button in jQuery

I have a set of radio buttons where when I click a radio button, I want the label to change color or whatever. But when I click another radio button, the color goes away. Therefore I have something like this:
jQuery('label').mouseup(function(){
jQuery(this).prev().attr('checked', 'checked');
jQuery('input').next().removeClass('selected');
jQuery('input:checked').next().addClass('selected');
});
if you need to see some html:
<input type="radio" id="radio1" name="myRadio" value="option-1" />
<label for="radio1">Label 1</label>
<input type="radio" id="radio2" name="myRadio" value="option-2" />
<label for="radio2">Label 2</label>
This first removes 'selected' class from all the labels and then re-applies to only the checked labels.
It works and is simple, but I was thinking this might not be the most efficient way of doing this. I imagine that javascript is iterating through each input element and using more resources than necessary.
I'm curious if anyone knows of a common way of doing this more efficiently. I seem to be doing this type of thing quite often in my jQuery code. I've just been using jQuery for the past 3 months or so btw.
There are a few things I think are worth mentioning.
Clicking on a <label> will automatically change the value of the <input>. You don't need to set the checked attr manually, and therefore could bind to the change event on the radios instead. This will also allow keyboard events to select/deselect the radios, and will work anytime the radio values change, not just when someone raises their mouse over a label.
Also, you can save the whole collection of radio inputs in its own variable to make referencing them later not have to search through the DOM again.
Suggested code (w/ jsfiddle preview)
var $radios = jQuery('input[type=radio]');
$radios.change(function() {
$radios.next().removeClass('selected');
$radios.filter(':checked').next().addClass('selected');
});
Besides the use of mouseup who seems a little bit unusual in this case (at least, to me), your code is fine.
I'd use click or change.
It actually looks like it works when clicking the label. I wouldn't worry too much about the number of DOM elements searched as long as the performance is ok. Optimize when it becomes a problem and not before. Clarity/readability is probably more important. You might be able to improve it, though, by using some information from the label or its related input to narrow down the selectors. Using end and filter would also allow you to reuse the second query.
$('label').click(function(){
var radio = $(this).prev();
radio.attr('checked', 'checked');
var name = radio.attr('name');
$('input[name=' + name ']').next()
.removeClass('selected')
.end()
.filter(':checked')
.next()
.addClass('selected');
});
Note that using change on the actual radios, as some others suggest might be better. You could use the same techniques with that.
$('input[type=radio]').change( function() {
$('input[type=radio]').next()
.removeClass('selected')
.end()
.filter(':checked')
.next()
.addClass('selected');
});
Use live handlers if you are adding radios dynamically to the page.

Categories