The problem is mostly summed up in the title.
I am using the custom radio/checkbox code from accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/
This is the jist of their code (I modified it to allow defining different style depending on the label's title)
$(this).each(function(i){
if($(this).is('[type=radio]')){
var input = $(this);
// get the associated label using the input's id
var label = $('label[for='+input.attr('id')+']');
var labelTitle = label.attr('title');
// wrap the input + label in a div that has class "custom-radio-LabelTitle"
$('<div class="custom-radio-' + labelTitle + '"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
var allInputs = $('input[name='+input.attr('name')+']');
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function(){
if (input.is(':checked')) {
if (input.is(':radio')) {
allInputs.each(function(){
$('label[for='+$(this).attr('id')+']').removeClass('checked');
});
};
label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }
})
.trigger('updateState')
.click(function(){
$(this).trigger('updateState');
})
}
});
From my understanding, their code basically finds all the radio inputs and then defines a special trigger called updateState. Then they trigger it inside the input's click function.
So every time the input radiobutton is clicked, updateState is trigger, which in turn sets a class for that radiobutton's label. The changing of the class changes the CSS of the label.
When the label is clicked, The input that the label is for is also clicked (JQuery's .click() function is ran).
What I did was set all my input radiobuttons to display:none. That way the user only clicks the label, and secretly they clicked a radio button.
The .click() function won't run for the input if the input is hidden.
I assume there are two ways pass this:
instead of have the radio's .click() function trigger the handlestate, have the label's .click() function handle it instead. This may not work right though, because then the radio button may not actually be clicked (which messes up my form)
when the label is clicked, trigger the radio's click function manually. However, this may cause it to be triggered twice in every browser but IE. I don't know how to reference the label's radio nor to stop it from triggering twice.
a) instead of have the radio's
.click() function trigger the
handlestate, have the label's .click()
function handle it instead. This may
not work right though, because then
the radio button may not actually be
clicked (which messes up my form)
This may work right, on you label's .click() trigger also force the radio button to be checked like this,
$('#radiobutton').attr('checked', 'checked');
I got what I wanted with:
$("label[title='Plan']").click(function() {
var id = $(this).attr('for')
$("input[id='"+id+"']").trigger("click");
$("input[id='"+id+"']").trigger("updateState");
PlanChange();
});
Then removed all the onClicks.
Related
In the following code why doesn't the radio report the correct value when checked via its variable name?
var $myRadio = $('input[type=radio][name=options]:checked');
$('#button').click(() => {
// this works
console.log($('input[type=radio][name=options]:checked').val());
// this doesn't :(
console.log($myRadio.val());
});
https://jsfiddle.net/charsi/p4beztwx/13/
I am using mdl radio buttons so that could be causing it. I have also tried getting the value with $myRadio[0].MaterialRadio.value but that doesn't work either.
EDIT: This was a poorly worded question and didn't really have anythng to do with mdl. What I really wanted was the ability to set the DOM variable for my radio button somewhere else without having to select it by name again to check the value.
The reason for getting incorrect values when checked via its variable name is because you are setting $myRadio before the click event. $myRadio is set on document ready (before click event) and it gets the value of the checked radio option which at this moment is always 1.
Moving $myRadio inside a click handler should work. Why? Because now it gets the value of the radio (checked) as soon as the click function is called which is actually what you need.
$('#button').click(() => {
var $myRadio = $('[id^="option"]:checked');
// neither of these work
alert($('input[type=radio][name=options]:checked').val());
alert($myRadio.val());
});
fiddle here
For anyone else running into the same issue. Not wanting to call the radio button name when checking for its value, you can use filter -
var $myRadio = $('input[type=radio][name=options]');
$('#button').click(() => {
console.log($myRadio.filter(':checked').val());
}
I have a payment form,in which when I click on the internet banking ,all the input field be disabled and instead show some images. this is the fiddle upto which i have done http://jsfiddle.net/f8Fd3/4/ No where I cant hide the input text field using their class id.
this is the js
function cc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("visa");
}
function dc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("mastercard");
}
function ib()
{
}
please check the fiddle to get a clear picture
It is because, by default, when 'button' tag inside a 'form' is clicked, 'form' will be submitted.
It's not redirecting for the other two because there's a HTML5 form validation that prevents the form from being submitted. (that's why you will see an error message when you click Visa/Mastercard)
if you insist on binding events in the dom...you can pass an event object to the handler:
<button onclick="javascript:ib(event)" class="btn btn-1 btn-1c">Internet Banking</button>
and in your function:
function ib(event) {
event.preventDefault();
}
you may wanna do the same to the other two handlers as well.
so the default submit action will be prevented.
and to disable all the text fields:
$('#cards input[type=text]').prop('disabled', true);
to hide them:
$('#cards input[type=text]').hide();
EDIT
by the way. you don't have to use selectors like $('#cards.credit-card'), 'id' should be unique in the DOM, just by using $('#cards') you will get the same element.
The syntax class="class=tokenex_data full gr-input" is incorrect.
Instead use, class="tokenex_data full gr-input"
Then use :
`function ib()
{
$(".tokenex_data").hide();
$(".monthgr-input").hide();
}
`
You want to select all input & select elements and set their property disabled to true:
$('#cards input, #cards select').prop('disabled', true);
Fiddle
On clicking a radio button in radiogroup2, the selected radio should swap positions with the radio with the id='selectedradio'. fiddle http://jsfiddle.net/DCC66/6/ --- updated --- clear view of radio rows and code is swapping but cancelling out http://jsfiddle.net/DCC66/14/
tried this to sort the id issue: http://jsfiddle.net/DCC66/18/
$(".radiogroup2 input[type='radio']").on('click', function () {
$('#radioselected').closest('label').before($(this).closest('label'));
$(this).closest('label').after($('#radioselected').closest('label'));
$(this).attr('domaintype', 'radioselected');
$('radioselected').attr('radioselected', 'domaintype');
});
and now this:// swaps once then stops and then just makes the clicked radio disapear. think it needs to add the id="radioselected" to the newly swapped radio. also still not swapping though only replacing radio.
$(".radiogroup2 input[type='radio']").on('click', function ()
{
$('#radioselected').closest('label').replaceWith($(this).closest('label'));
});
trying using clone still no luck:
$("div.radiogroup2 input[name='domain_ext']").click(function ()
{
$(this).clone('#radioselected').after(this);
});
Original
$("div.radiogroup2 input[name='domain_ext']").click(function()
{
//only if a the radio in radiogroup to are clicked take radio and swap with id='radioselected'
if ($(this).prop('checked'))
{
$(this).after('#radioselected').add(this);
$('#radioselected').after(this);
}
});
so any radio clicked in the "swap" row should switch positions with the radio in the first row with the id 'selectedradio'
Use a delegate instead of binding the event on the radio buttons directly. That way the radio buttons that are swapped into the div will also work.
Use the closest method to get the label around the radio buttons.
Remove the id from the radio button that you swap with, and add it to the selected radio button.
Use the after method to move the label into the second list next to the selected one, then use prependTo to move the label with the selected radio button into the first list.
You have some invalid HTML code that makes the rows swap place. Change <td><tr> to <tr><td>.
$("div.radiogroup2").on("click", ":radio", function () {
var l = $(this).closest('label');
var r = $('#radioselected');
r.removeAttr('id');
l.after(r.closest('label'));
$(this).attr('id', 'radioselected');
l.prependTo('.radiogroup1');
});
Demo: http://jsfiddle.net/DCC66/16/
I have javascript creating a generic select box when you double click in a table cell and when an option is clicked, the select box is removed and the option selected is recorded. The table cell displays the option selected.
However, if the table cell is double clicked and the select box is created, but then you just click out of the select box without selecting an option, the select box remains and the rest of the page from then on breaks.
I want the select box to be removed if the focus is lost, but the onblur method that works with input boxes doesn't seem to work with select boxes.
Does anyone know what event is triggered?
Javascript code when table cell is double clicked to make a select box:
var object_input = document.createElement ("SELECT"); //Put an select box in the cell
object_input.setAttribute("name", "course_price_select");
object_input.setAttribute("id", "course_price_select");
object_input.style.width = (current_cell.clientWidth - 20) + "px";
object_input.attachEvent ("onblur", focus_lost);
object_input.attachEvent ("onkeypress", checkForEnter);
These two lines don't work! (focus_lost and checkForEnter methods start with alert('hi'); so I know they are not being triggered)
object_input.onchange = function() {focus_lost()};
//Populate with options....
attachEvent is an IE only function. You should also bind your events using addEventListener, for example:
if(object_input.addEventListener)
{
object_input.addEventListener('blur', focus_lost);
object_input.addEventListener('keypress', checkForEnter);
}
else
{
object_input.attachEvent('onblur', focus_lost);
object_input.attachEvent('onkeypress', checkForEnter);
}
You can see a jsFiddle demo here.
You should note that addEventListener does not require the events to be prepended with on, while attachEvent does.
I am creating a menulist popup list dynamically. I the editable and open attributes to true. What I would like to be able to do is to be able to add a new menulist item when the user types in an item that is not already present. Is this possible? If so, how?
I am creating the list like so:
var ml = document.createElement("menulist");
ml.setAttribute("editable","true");
ml.setAttribute("open","true");
ml.setAttribute("oncommand","alert(this.value)");
var mp = document.createElement("menupopup");
var mi = document.createElement("menuitem");
mi.setAttribute("label","item1");
mi.setAttribute("value","1");
mp.appendChild(mi);
//add as many items as i feel
ml.appendChild(mp);
When the value is changed, the alert function is fired when the item is changed but when I type in anything, it is not fired. Basically, I want to eventually pass the value to a funcntion I call from here to add the item to the list.
First of all, you should seriously consider using addEventListener instead of changing attributes like oncommand:
ml.addEventListener("command", function(event) {
alert(this.value);
}, false);
If you want to be notified about changes in the text field then you should add an event listener to the text field:
ml.appendChild(mp);
ml.inputField.addEventListener("input", function(event)
{
alert("Text field value changed");
}, false);
Note that this has to be done after the element is added to the document, before that the inputField property will not be defined (corresponding XBL binding didn't apply yet).
For reference: menulist.inputField, input event