Develop Reference

JavaScript to Toggle Material Design Lite Switch

I have the following Material Design Lite switch in my HTML and is looking for some javascript help.
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
<span class="mdl-switch__label">USEREMAIL Subscribed</span>
</label>
Upon clicking the switch, I'd like to add:
Toggle functionality to update the checked to unchecked - like on and off switch, but is looking for JavaScript help here.
I would like to really have values of "subscribed" and "unsubscribed" as text that is displayed next to it as shown (but hardcoded in the html). Is this feasible to change dynamically?
Thanks for your time. I did find this as a reference, but it was using CheckBox.

If you refer to the mdl's source code, you will find that the check and uncheck functions are bound with label tag.
You can specify an id to label like below:
<label id="check" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input"/>
<span class="mdl-switch__label">Subscribed</span>
</label>
<input type="button" value="test switch" id="btn"/>
MDL natively supports on/off status switch on button click. You can also control the status by another button.
$("#btn").click(function() {
if($('#check').is('.is-checked')) {
$('#check')[0].MaterialSwitch.off();
}
else {
$('#check')[0].MaterialSwitch.on();
}
});
To update the switch label dynamically, the code can be put like below. Bind the input's change event on page load and update label text if the on/off status changes.
//toggle label
$('#check input').change(function(){
if($(this).is(':checked'))
$(this).next().text("Unsubscribed");
else
$(this).next().text("Subscribed");
});
Here is the jsFiddle code. The answer comes a bit late for you but I hope it still helps.

Referring to the code in above question:
var myCheckbox = document.getElementById('switch-1');
myCheckbox.parentElement.MaterialSwitch.off();
…
myCheckbox.parentElement.MaterialSwitch.on();

Below code maybe solve your problem:
var isChecked = $('#switch-1').is(':checked');
if(isChecked) {
alert("subscribed");
} else {
alert("not subscribed");
}

Add required attribute when radio is checked

I have a set of radiobuttons called 'price'. When the '€' radio button is selected, I want to focus on a text input field and that text input field should be required.
When I click another option, the requried attribute should be removed.
Is this possible through Javascript or jQuery?
I found a jQuery snippet here, but it doesn't seem to be working. This is what I have now:
<input type="radio" name="price" value="value" id="value_radio" onclick="document.getElementById('value_input').focus()" required>
<label for="value_input">€</label>
<input type="text" name="price_value" id="value_input" pattern="\d+(,\d{1,2})?"
onclick="document.getElementById('value_radio').checked=true">
<script>
$('#value_radio').change(function () {
if($(this).is(':checked')) {
$('#value_input').attr('required');
} else {
$('#value_input').removeAttr('required');
}
});
</script>
<input type="radio" name="price" id="free" value="free">
<label for="free">Free</label>
JSFiddle: http://jsfiddle.net/fhfrzn1d/

According to this answer, you have to monitor the change on both radio inputs. So move your javascript script after the second radio.
Also there was missing a )
Fiddle updated: http://jsfiddle.net/fhfrzn1d/1/
$('input[name="price"]').change(function () {
if($("#value_radio").is(':checked')) {
$('#value_input').attr('required', true);
} else {
$('#value_input').removeAttr('required');
}
});

You have two (really three) mistakes in your code.
First. The syntax is invalid. You should fix the closing brace as #Hushme recommends in the comments.
First (2). Your usage of jsfiddle is invalid too. You should paste the code to the JavaScript section of the site and also enable jQuery library.
Second. $('#value_input').attr('required') is not creating an attribute; it's a getter. You should use the proper setter there:
$('#value_input').attr('required', true);
Third. The radiobutton change event is not firing when user deselects the radiobutton. So you should handle events on all the buttons:
$('input[name="price"]').change(function () { ... });
I've fixed your jsfiddle, see http://jsfiddle.net/fhfrzn1d/4/

Unexpected response for checkbox jQuery

I have horizontal jQuery checkbox. It should display some text when it is clicked and remove the text when it is clicked again and unchecked. However, when i first load the page and click on the box nothing happens. Then when i click it again to uncheck the text appears. It seems the opposite behaviour of what i expect is going on. Here is the code:
(I can solve this problem by simply inverting the boolean sign but i want to understand why this is happening).
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
</fieldset>
</form>
<script>
function onfilter(){
if ($("#checkbox-h-2a").prop('checked')){
document.getElementById("hehe").innerHTML = "Yo there";
}
if (!($("#checkbox-h-2a").prop('checked'))){
document.getElementById("hehe").innerHTML = "";
}
}
</script>

You're already loading jQuery , so just use jQuery for everything - it is much easier , works better, really the only downside to jQUery is having to load it - and you're already doing that. So I would suggest using something like this:
$(function(){
$(document).on('click', '#checkbox-h-2a', function(){
if ( $(this).is(':checked') ) {
// Do stuff
}
else{
//Do stuff
}
});
});
Also, I hope you are actually closing your input element in your HTML , and that this is just a typo in your question
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
try:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<label for="checkbox-h-2a" >Vegetarian
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
</label>
</fieldset>
see how the label goes around the checkbox? also you can get rid on the inline function in HTML with the jQuery I provided
EDIT:
2 problems - one you selectd jQuery 1.6 , to you .on() you need a newer version , if you must use old jQuery let me know ,
the other problem is that all jQuery code must be wrapped in
$(document).ready(function(){
/// code here
});
or for short:
$(function(){
// code here
});

The problem is at the time of clicking on the label, the checkbox's checked has not been changed, so you have to toggle the logic (although it looks weird) or attach the handler to the onchange event of the checkbox input instead:
<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>
Demo.
It involves how a label works, when clicking on the label, it looks for the attached input element via the for attribute and trying to change the appropriate property (checked for checkbox, radio, ...) or focusing the element (for textbox fields). So at the clicking time, it processes/calls your handler first. Hence the problem.
Note that this answer just fixes the issue, not trying to improve your code.

clear value in an input field with jQuery

Hi I have a number of inputs for telephone numbers, they use the same class and the same show/hide techinque.
I want to be able to clear the contents of the phone number in the input box, i.e. with the class name of input_tel.
However it seems to clear all inputs which I assume is because I am using the following line; input:text , when I put in a class it just fails to work.
My JS and some of my html is below or view a jsFiddle:
$(".contact_numbers").on('click', '.clearnumber', function () {
$(this).siblings('input:text').val('');
});
<div class="telephonetwo contact_numbers">
<input type="text" class="smallinput contactpagelabel" name="faxname" size="10" value="Fax">
<input type="checkbox" class="contact_no" name="showfax" value="Y">
<input type="text" name="fax" size="30" value="016128 13456" class="input_tel">
Hide Clear #
</div>
If you are viewing my JSfiddle click the reveal additional numbers for the clear button to appear.
Update
I want to be able to clear the closest input_tel rather than all of them, as their are multiple numbers.
Thanks in advance

replace:
$(this).siblings('input:text').val('');
with
$(this).siblings('input:text').closest('.input_tel').val('');
JSFIDDLE DEMO

How about targeting the input_tel class then?
$(".contact_numbers").on('click', '.clearnumber', function () {
$(this).parent().parent().find('input.input_tel').val('');
});
Assuming no other input fields have that input_tel class on them.

This should do it...
$(".contact_numbers").on('click', function () {
$(".input_tel").val('');
});

The safe way to clear input fields with jquery
$.fn.noText = function() {/*use the jquery prototype technology to make a chainable clear field method*/
if(this.is('input')){ /*check to c if you the element type is an input*/
this.val('');/*clear the input field*/
}return this;/*means it is chainable*/
};
$('input').noText();

Can't select or change selection with jquery to jq-idealform radiofield

I'm using jq-idealforms to build a nice and easy form. In It i have a radio-field that i would like to fill with jquery after getted info from db. Here there an example (at "step2".. section 2) you can watch how jq-ideal and radio-field work.
It doesn't provide an api to do that, but if i can fill an input[type='text'] element whit jquery, it must be possible whit radio-field too.
You can look here, how jq-idealforms manages radio-field.
I have tryed with the follow part of code:
$(this).prop('checked', true);
$(this).next().addClass('checked');
where $(this) is one of the 3 radio-field, and it is the one which i want select (rest of code is on the example):
<input type="radio" name="radio" style="position: absolute; left: -9999px;" autocomplete="off">
The class "checked" is not putted in the element span.ideal-radio (sibling of input). I'm sure of the DOM, because if i use another class like "foo", this one is added. I think that is a bug from plugin, but what? how i can solve?
And at the and i reload form like explained on documentation:
$(form).data('idealforms').reload().fresh();
Textarea elements and input text type are filled correctly.
Edit:
The problems is more simple, i can't select the first element of my radio checkbox if jq-idealforms is enabled, if i don't use jq-idealforms, the first radio element is selected. Or if you put "checked" on the second radio-element and you use jq-idealforms, it works too.
<html>
<head>
<script src="js/lib/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="css/jquery.idealforms.min.css" media="screen"/>
<script src="js/lib/jquery.idealforms.min.js"></script> <!-- removing it work -->
<head>
<body>
<form id="form-doc" method="post" action="">
<div>
<label>Tipo doc:</label>
<input type="text" name="tipo_doc" />
</div>
<div>
<label>Ruolo ditta:</label>
<label>
<input type="radio" name="ruolo_ditta" checked/>Fornitore
</label>
<label>
<input type="radio" name="ruolo_ditta" /> Cliente
</label>
</div>
<div>
<button type="submit">Salva</button>
<button id="reset" type="button">Reset</button>
</div>
</form>
<script type="text/javascript">
var options = {
onFail: function() {alert( 'fail');},
onSuccess: function() {alert( 'succes');},
inputs: {
'tipo_doc' : {
filters: 'required min max',
data: { min: 3, max: 16 },
},
'ruolo_ditta' : {
filters: 'required min',
data: { min: 1 },
},
}
};
var myform = $('#form-doc').idealforms(options).data('idealforms');
$('#reset').click(function(){
myform.reset().fresh().focusFirst();
});
myform.focusFirst();
</script>`
</body>
</html>
It doesn't work with jquery-1.9.1 and jquery-1.10.1.
SOLUTION:
Documentation is wrong for radio button. You can read on site:
required
The field is required. This filter ONLY works with text inputs (text,
password, textarea). For select use exclude to exclude the default
option. For radio and checkbox use min: 1 which will require at least
one option to be checked.
But using:
'ruolo_ditta' : {
filters: 'min',
data: { min: 1 },
}
or combinated whit 'required' filters (or only required filter) on idealforms option, where "ruolo_ditta" is the value of attribute name of radio elements. The form make a wrong and realy strange behavior.
Deleting it, using checked on the first radio html element works good and
$(this).prop('checked', true).trigger('change');
works as aspected.
thanks,
j.

You must call reload on the form if you are altering values project doc

The plugin abstracts the visual indication of check from the actual property of check, so you have to do one of two things:
trigger the check with a programmatic click:
$(this).trigger('click');
this is as if you were actually clicking on the checkbox. but this could also uncheck a previously checked box. if that's not what you want, use option 2 which ensure that it's checked
ensure that it's checked:
$(this).prop('checked', true).trigger('change');