Conditional field jQuery library not working with Checkbox - javascript

I am using a small jQuery library jQuery-Visibly
A jQuery Plugin designed to easily Conditionally show elements based on values of other Form elements.
Project page and documentation: http://www.danielrivers.com/visibly
Project GitHub Page: https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js
Some key features that put it above some other libraries:
Multiple fields and values can be set as a rule for revealing a hidden field instead of only a single field to field rule like other libraries do. Example; To show field 3 I can require both field 1 and field 2 to have a certain value set in both at the same time in order for field 3 to become visibble.
RegEx matching - require a text inputs text value to match the regex pattern in order for a conditional field reliant on it to be shown.
Below is my demo where I am trying to use checkboxes to reveal a hidden DIV.
In DIV ID #test I have a conditional rule set with visibly="foo:checked;foo3:checked"
This means field #foo and #foo3 should both be checked in order to reveal #test
However it is not working. It is possibble that the library only supports select and input fields and not checkbox fields but looking at the library code (125 lines) https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js on line 60 mI saw :checked which made me think it is supported but I am not 100% certain of it?
Could someone look at this to see if checkboxes should work with what I am doing?
DEMO: https://jsfiddle.net/955us4ge/
HTML
<label for="foo">
<input id="foo" name="foo" type="checkbox"> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox"> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox"> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
this should be hidden until checkbox #foo and #foo3 are both checked
</div>
JS
$(document).ready(function() {
$('#test').Visibly();
});

The Visibly plugin seems to check the value attribute of the elements that you added to the rules and checks if the value meets the condition. So if you want it to work with checkbox elements you will need to change the value attribute on them.
Here is an example.
$('#test').Visibly();
$("input").on("click", function() {
if($(this).prop("checked")) {
$(this).val("checked");
} else {
$(this).val("");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/DanielRivers/jQuery-Visibly/master/js/jquery-visibly.js"></script>
<label for="foo">
<input id="foo" name="foo" type="checkbox" value=""> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox" value=""> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox" value=""> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
This should be hidden until checkbox #foo and #foo3 are both checked
</div>

In case you'd like to do this with plain jQuery:
https://jsfiddle.net/rjmu8dus/
$(document).ready(function() {
$("input[type=checkbox]").on('change',function(){
if( $("#foo").prop('checked') == true && $("#foo3").prop('checked') == true) {
$("#test").show();
}
});
});
Something you might add is create an else that says if they are not clicked to not show them.

Related

Change the text from DOM with JavaScript

<label class="checkbox-1">
<input class="checkbox" type="checkbox" name="" value=""> Add
</label>
How to change the text "Add", with java script? Note: I don't want to delete the checkbox, only to change the text.
add id attr to the html and use the following JavaScript code:
var selector = document.getElementById('someText');
selector.lastChild.textContent = 'hiiiiiiiii';
<label id="someText" class="checkbox-1">
<input class="checkbox" type="checkbox" name="" value="" > Add
</label>
Depends on whether you want to do this in native javascript or another external library; like JQuery. Assuming native javascript, it can be done like so:
document.getElementById("checkbox1").textContent= "<modifiedtext>" ;
<label class="checkbox-1">
<input class="checkbox" id="checkbox1" type="checkbox" name="" value=""> Add
</label>
Notice the new id to make searching and variablising the dom element easier. Ideally DOM manipulation is better done in JQuery. At least from my experience.
The previous answer that I contributed did not target the main problem. So because the label text exists as a parent of the input we need to go through another way.
I have posted a snippet using JQuery.
// find elements
var checkbox = $("#checkbox1")
var labelCheckbox = $("#checkbox1").parent('label')
$( document ).ready(function() {
console.log( "ready!" );
checkbox.text('New')
labelCheckbox.text('Hello')
});**strong text**
Once the document is loaded, it will change the text by finding the parent element of the input type which we assume is the label and then change the text.

Show one div and hide the other by checked radio button

I'm trying to learn how to use jquery to show/hide elements dependent on values. i'm not sure if .show / .hide is the right choice so any help will be appreciated...
Here is my example on jsfiddle where I have 2 radio buttons and 2 divs.
I want Jquery to show a single div by the dependency of the checked radio button, so it will show only the one that is checked.
HTML:
<input type="radio" name="one" value="01" checked> Male<br>
<input type="radio" name="two" value="02"> Female<br>
<div class="showhide">
show me when 01 is checked.
</div>
<div class="showhide">
show me when 02 is checked.
</div>
JQuery (trying to understand what to do here):
$("div.showhide").hide();
$("div.showhide").show();
// or maybe with:
$("div.showthis").toggle(this.checked);
Using data-* attributes comes in handy in such practices. Rember that the radios name attributes must be the same that one and only one checkbox can be checked at any given time. And, there is no p tag in your code, at least in the example provided, so why bother prefixing the selector with it?
The following example makes use of data-section attribute which has the selector for the element that must be shown when the checkbox is checked. It is worth mentioning that this is code is dynamic and does not require changing the code when adding more inputs with divs.
$(function() {
// listen for changes
$('input[type="radio"]').on('change', function(){
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$( $target.attr('data-section') ).show();
// trigger the change on page load
}).trigger('change');
});
.showhide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="one" data-section="#div-1" value="01" checked>Male<br>
<input type="radio" name="one" data-section="#div-2" value="02">Female<br>
<div id="div-1" class="showhide">
show me when 01 is checked.
</div>
<div id="div-2" class="showhide">
show me when 02 is checked.
</div>

Unchecking a radio box without use of id's

I'm setting up a table, where each row will contain several radio boxes. There are certain conditions for the radio boxes, for example:
If "Home" is checked, the "Text" radio box will be unchecked and "Voice" will be checked instead (ie. You can't text a home phone number). Similarly, when "Home" and "Voice" are checked, clicking "Text" will force "Home" to be unchecked and "Cell" will become checked.
I can get this working fine for one instance, with the use of .getElementById and the click function, but where I run into trouble is when things are scaled up. This table might have 20 or 30 rows, each of which containing a cell with these radio boxes.
I'm not great with jQuery, so I'm not sure how to make a more general version, so that each set of radio boxes are their own contained units, so to speak. I made a jsfiddle where you can see that only the first instance is working, likely because I am targeting the boxes using their id and you can't have two elements with the same id... help? Thanks!
http://jsfiddle.net/3uHqS/
Script
$( document ).ready(function() {
document.getElementById('contact-home').onclick = function () {
document.getElementById('format-voice').checked = true;
};
document.getElementById('format-text').onclick = function () {
document.getElementById('contact-cell').checked = true;
};
});
HTML
<form>
<input type="radio" name="contact" value="" id="contact-cell" />
<label for="contact-cell">Cell</label>
<input type="radio" name="contact" value="" id="contact-home" />
<label for="contact-home">Home</label>
<input type="radio" name="format" value="" id="format-voice" />
<label for="format-voice">Voice</label>
<input type="radio" name="format" value="" id="format-text" />
<label for="format-text">Text</label>
</form>
You are going to want to assign every radio box a descriptive class like 'text-radio' or 'home-radio'. Then when you need to change all of the Text radio boxes you do something like the following in jQuery:
$(".text-radio").attr('checked', 'checked');

get the value of input field of radio type in jquery

I have an input field like below
<input class="d_o" type="radio" value="super" name="old_or_new" checked="checked"> Get this value actually</input><br/>
I have to get the value of the input field i.e., Get this value actually, so tried the below jquery code
console.log($('.d_o').text());
But i am surprised that its returning nothing, and its working when tried to get the value like $('.d_o').val()
So how to get the text value from the above input field using jquery am i missing anything ?
The entirety of your <input> element is
<input class="d_o" type="radio" value="super" name="old_or_new" checked="checked">
The text that's after it, and the invalid html </input> are completely different nodes in the DOM tree. So val returns the value "super" as expected, but there's no text for text to return.
The .text() method cannot be used on form inputs or scripts
http://api.jquery.com/text/
Although I am not sure what approach jQuery follows on this : One explanation can be the "Content Model" specification of each HTMLElement .
Content model
A normative description of what content must be included as children and descendants of the element.
For example :
For Input type : http://www.w3.org/TR/html5/forms.html#the-input-element
Content model:Empty.
However for Title Element this is defined as
Content model : Text
http://www.w3.org/TR/html5/document-metadata.html#the-title-element
Eager to see the validations on this postulate :)
<input class="d_o" type="radio" value="super" name="old_or_new" checked="checked"> Get this value actually</input><br/>
This is not the correct way to handle the <input> tag. You should use :checked and .val() instead:
$(document).ready(function(){
$('#hey').on('click', function(event){
alert($('.check:checked').val());
});
});
<h2>Select old or new</h2><br>
<b>Old</b>:<br>
<input type="radio" class="check" name="old_or_new" value="old"><br>
<br>
<b>New</b>:<br>
<input type="radio" class="check" name="old_or_new" value="new"><br>
<br>
<input type="button" id="hey">
Check the fiddle: http://jsfiddle.net/MLWCK/

Dojo/Dijit: Dynamically choosing input required attribute

I am attempting to put together a fairly complex form using dojo and dijit widgets. The form has multiple 'sections' which allow the user to attach an existing object (via select tag) or create an entirely new object inline in the form.
My inputs are rendered conditionally based radio buttons and manipulated via javascript. What I am having problems doing, is conditionally making dijit widgets required based on whether the inputs are rendered or not (which itself depends on which radio button is selected.
My html (actually jsp)
<div>
<input id="useExisting" type="radio" name="radio" checked value="useExisting" onclick="renderExistingInput()" /> <label for="useExisting">Use Existing</label>
<input id="new" type="radio" name="radio" value="new" onclick="renderNewInputs()"/> <label for="new">Create New</label>
</div>
<br>
<div id="newInputs">
<div class="row">
<label class="label" for="newName">Name </label>
<span class="formInput"><input type="text" id="newName" name="newName" required="true" dojoType="dijit.form.ValidationTextBox"/></span>
</div>
<!-- More inputs with required="true"-->
<br>
</div>
<div id="existingInput>
<div class="row">
<label class="label" for="existingSelect">Existing Object </label>
<span class="formInput">
<select name="existingSelect" id="existingSelect" dojoType="dijit.form.Select">
<!--JSTL tags for compiling list of options -->
</select>
</span>
</div>
</div>
Accompanying javascript functions:
function renderExistingInput() {
dojo.fx.wipeOut(getWipeArguments('newInputs')).play();
dojo.fx.wipeIn(getWipeArguments('existingInput')).play();
}
function renderNewInputs() {
dojo.fx.wipeOut(getWipeArguments('existingInput')).play();
dojo.fx.wipeIn(getWipeArguments('newInputs')).play();
}
function getWipeArguments(id) {
var wipeArgs = {
node : id
};
return wipeArgs;
}
The basic 'flow' of user interactions is User clicks a radio button, the correct div renders as a result of that. What I want then are inputs that are not rendered to not be considered required. I'm not entirely sure how to do this. Is it possible to manipulate that particular attribute directly via dojo? Or is there a better way to do this entirely?
Seem's like My answer was staring me right in the face. I simply needed to pull together the different parts I had come across. My final function for changed the 'required' attribute looks like:
function setWidgetRequiredAttributes(baseDomNodeId, requiredValue){
foundWidgets = dijit.findWidgets(dojo.byId(baseDomNodeId));
console.log(foundWidgets);
foundWidgets.forEach(function(widget){
widget.required=requiredValue;
});
}

Categories