This question already has answers here:
How to uncheck checked radio button [duplicate]
(5 answers)
Closed 6 years ago.
I am using a set of checkboxes to have some drop-down menus by switching their display:none; to display:block when box or radio is checked.
This is the checkbox version : https://jsfiddle.net/hw207q2L/
and this is the radio version : https://jsfiddle.net/3xzuw47x/
I'd like to combine both so that when opening a new part it closes the other ones (radio behaviour) ; while at the same time being able to close the part I opened by clicking it again (checkbox behaviour).
Any ideas that wouldn't involve javascript ? I'd like to restrain from using js, but if it's not possible tell me.
It requires functionality that prevents default behavior, so it's unlikely to make it happen without the using of additional framework or javascript.
This not exactly a duplicate, but please check How to uncheck checked radio button [duplicate].
Just use this javascript in your second version of code:
var allRadios = document.getElementsByName('titles');
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
allRadios[x].onclick = function() {
if(booRadio == this){
this.checked = false;
booRadio = null;
}else{
booRadio = this;
}
};
}
Related
I have an academy platform where the section assessment test is a combination of the following type of questions
Single Answer ( radio button)
Multiple choice ( checkbox)
True or false ( radio button)
reorder ( where I have listed the answers as a drop-down)
I have initialized the following on to the final assessment view:
We are trying to achieve that a user should be able to answer the question as well as at the same time the answer should be validated/checked.
If the user has the right answer to the question then they can move to the next section.
Currently, we are trying to achieve the above-said goal by using the below jquery
var checkedValues = [];
$('.next').click(function() {
var $form = $(this).parent().parent();
var $checked = $(this).parent().parent().find('input[type=radio]:checked')
var isChecked = $checked.length > 0;
if(!isChecked){
alert('Please Choose an option.');
return;
}
checkedValues.push($checked.val());
console.log($checked.val());
$form.hide().next().show(); //hide parent and show next
});
$('.back').click(function() {
console.log('back');
$(this).parent().parent().hide().prev().show(); //hide parent and show previous
});
However, we are unable to achieve to move the user to the next section and also validate the answer. can anyone please help?
PS I have already tried the fieldset method but it does not work in terms of validation and moving to sections. Sections are dynamic. We have to make sure that a user should answer the section assessment before moving to the next section.
IE has a different way of showing the default HTML validation messages. Chrome or Firefox, after submitting form, show pretty bubbles/tool tip with error message. IE underlines the invalid field, but the error message is showing only when the user hovers the field.
Is there any simple way to change how to display messages, similar to how Chrome does it?
Is this based on some pseudo-classes or something?
You can use the oninvalid event.
document.getElementById('input').oninvalid = function(e) {
e.preventDefault(); //prevent default tooltip
this.style.background = '#f2dede'; //whatever
var elem = this.parentNode.getElementsByClassName('tooltiptext')[0]; //select tooltip element
//show the tooltip
elem.style.visibility = "visible";
elem.style.opacity = "1";
}
I made this fiddle https://jsfiddle.net/petekeeports/0yxfj3Lr/, see if that is what you are looking for. Hope this helps!!
I'm trying (with no results) to aply a simple custom width to this validator message:
How can i do it ?
UPDATE: I mean, the message which says "Please select an item from the list" we can supose it has, by default, a width=100px . How can i change this default width to 300px?
This question has already been answered. You can find the answer here. For ease of access the code you'll need is below.
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
This is Chrome's implementation of styling, however it is not officially standard. Hence consider creating your own popup.
Setting content of bubble
Please consider adding what you have already attempted and what results you would expect.
$(document).ready(function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("This field shouldn't be left blank/please select an option!");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
This question already has answers here:
Relative URL to a different port number in a hyperlink?
(12 answers)
Closed 9 years ago.
The tag below ceates a link to a page without having to provide the full URL:
link
So if you click it from example.com/, you'll go to example.com/foo.html. Is there a way to create a link that'll go to example.com:port/foo.html instead?
See here -> https://stackoverflow.com/a/6016361/773263
// delegate event for performance,
// and save attaching a million events to each anchor
document.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName.toLowerCase() == 'a')
{
var port = target.getAttribute('href')
.match(/^:(\d+)$/);
if (port)
{
target.port = port[1];
}
}
}, false);
Seems to be the best way to do it. I don't think a purely HTML solution is possible.
First question here, be gentle. :)
In OS X, tabbing through an HTML form, you'll find that it only stops on text boxes and lists. I need it to stop on all form inputs (not strictly inputs, all form elements that collect data).
As far as I'm aware this can only be configured in System Preferences under Keyboard Shortcuts, but obviously we don't have control over that...
Anybody have any ideas? I'd hate to have write something in jQuery to solve something that seems so trivial.
Thanks!
From my previous question:
Stupid OSX Settings:
You have to change this in System Preferences and there is no way to do it otherwise (to the best of my knowledge).
What you could try is to write a jQuery trigger for any input that has focus, see if the "Tab" key was hit, and if so jump to the next tabindex element.
I'd do something like this to force Safari to behave. The drawback is that you preventDefault on the normal navigator tabulation, which may be a bigger problem for accessibility in some situations. But I doubt it.
var Tab = {};
Tab.i = 1,
Tab.items = 0;
function fixTabulation () {
/* This can be used to auto-assign tab-indexes, or
# commented out if it manual tab-indexes have
# already been assigned.
*/
$('input, select, textarea').each(function(){
$(this).attr('tabindex', Tab.i);
Tab.i++;
Tab.items++;
});
Tab.i = 0;
/* We need to listen for any forward or backward Tab
# key event tell the page where to focus next.
*/
$(document).on({
'keydown' : function(e) {
if (navigator.appVersion.match("Safari")) {
if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
e.preventDefault();
Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
e.preventDefault();
Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
}
}
});
/* We need to update Tab.i if someone clicks into
# a different part of the form. This allows us
# to keep tabbing from the newly clicked input
*/
$('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
Tab.i = $(this).attr('tabindex');
console.log(Tab.i);
});
}
$(document).ready(function() {
fixTabulation();
});
It's a bit hacky, but it's quite better than telling your users to go change their Safari settings in System Prefs, lol.