I had a standard set of radio button inputs that used jQuery Validate. It all worked just fine:
<div class="panel-heading">1. What is your impression of ... <label class="error SurveyError" for="Impression"></label></div>
....
<div><label><input type="radio" class="SurveyQuestion" name="Impression" value="Excellent"> Excellent</label></div>
<div><label><input type="radio" class="SurveyQuestion" name="Impression" value="Good"> Good</label></div>
...
And then this script to add validation:
$('.SurveyQuestion').each(function () {
$(this).rules('add', {
required: true,
messages: {
required: "Please answer this question."
}
});
});
Worked great. But now, I need to style the radio button with an image. So the HTML changed to this:
...
<div><input type="radio" id="q1a" class="SurveyQuestion" name="Impression" value="Excellent"><label for="q1a"><span></span>Excellent</label></div>
<div><input type="radio" id="q1b" class="SurveyQuestion" name="Impression" value="Good"><label for="q1a"><span></span>Good</label></div>
...
With this CSS:
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width:20px;
height:20px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url(/images/radio.png) no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(/images/radio-selected.png) no-repeat;
}
Now, the styling looks great! But, the validation stopped working. Even with no answer, the form seems to think the question is valid... or... something.
I have noticed that if I leave the original checkbox visible...
input[type="radio"] {
/*display:none;*/
}
... that the validation still works. So, for some reason when using a fake checkbox made out of images instead of the real checkbox made by the browser, the validation stops working.
And, (kind of a different subject, but as long as we're here) I also noticed that with the imaged radio buttons, it's no longer possible to TAB into this question. Hitting the tab just skips right over all of these radio buttons.
By default, jQuery Validate doesn't check hidden fields. By setting your radio button to display: none, you are causing it to be skipped by the plugin.
You can change this behaviour by updating the plugin's ignore setting, as shown in this answer.
You must be looking for-
input[type="radio"] {
visibility: hidden;
}
to let them leave your document undisturbed-
input[type="radio"] {
visibility: hidden;
position: absolute;
height: 0;
width: 0;
}
Also to have them work in visibility hidden mode, wrap them in a label.
Related
I am enabling and disabling a div by checking two radio button (yes and no) but I am facing an issue when I am putting both id and class in same div and when I am using two div (one for id as parent and another for class as child) then its working fine.
function check1() {
if (document.getElementById("isOutsourcing_yes").checked) {
document.getElementById("s1").hidden = false;
}
if (document.getElementById("isOutsourcing_no").checked) {
document.getElementById("s1").hidden = true;
}
}
.padd_left {
display: inline-block;
padding-left: 40px;
}
<input type="radio" name="isOutsourcing" id="isOutsourcing_yes" onchange="check1()" checked> Yes
<input type="radio" name="isOutsourcing" id="isOutsourcing_no" onchange="check1()"> No
<div id="s1" class="padd_left">
<h1>Hello..</h1>
</div>
above code is not working but when I am replacing last div as below then it's working fine
<div class="padd_left">
<div id="s1">
<h1>Hello..</h1>
</div>
</div>
Inline blocks aren't a big fan of hidden. Try this instead
document.getElementById("s1").style.visibility = "hidden"; // or visible
Also note the difference between the display property and the visibility property. You could set it to display: none if you wanted it to completely disappear from the page without a trace (besides in the source). visibility: hidden will have it take up the same space but not render anything. Depending on how you want your page to look, you'll have to make that decision.
https://www.w3schools.com/jsref/prop_style_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
Here is the more simple solution using only pure CSS and HTML, without javascript
.padd_left {
display: inline-block;
padding-left: 40px;
}
#isOutsourcing_no:checked + #s1 h1{
display: none;
}
<input type="radio" name="isOutsourcing" id="isOutsourcing_yes" checked> Yes
<input type="radio" name="isOutsourcing" id="isOutsourcing_no"> No
<div id="s1" class="padd_left">
<h1>Hello..</h1>
</div>
Good day,
I have a function inside a javaScript file. I have 10 button will trigger this function to do something based on the button name. The code is something as follow:
function doSomething( name ){
switch(name){
case "1";
alert("i am 1");
break;
case "2";
alert("i am 1");
break;
// and so on...
}
}
This doSomething is working fine. However, I would like to alert other things when there is noscript or JavaScript is disable.
I do something like:
<noscript>
// if click on button 1, display <image src="image/img1" />
// if click on button 2, display <image src="image/img2" />
// and so on..
// I would like display different image when different button clicked.
</noscript>
Kindly advise.
No way. HTML5 itself is just a document sturcture and CSS3 provides style. That is, HTML5 as is has no behavior, thus, you won't be able to interact with the document without JavaScript.
If JavaScript is disabled and you provide a <noscript> element, you should tell your users that your Web application won't work without JavaScript.
You could do something like the checkbox hack in css to show a message in a hidden div, Style the labels like your buttons.
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
.to-be-changed {display:none;}
input[type=checkbox]:checked ~ .to-be-changed {
display:block;
margin-top:30px;
font-size:120%;
color:red;
}
<noscript>
<div id="buttons">
<input type="checkbox" id="button1"><label for="button1">button 1</label>
<input type="checkbox" id="button2"><label for="button2">button 2</label>
<input type="checkbox" id="button3"><label for="button3">button 3</label>
<div class="to-be-changed"> You need to have javascript activated for the buttons to work !</div>
</div>
</noscript>
Obviously turn js off to se it working. Here's a link to the page I got the info from Css click events
I have a submit button in my code, and its disabled.. I need it to be enable when the user clicks on the " I agree" check box.. I need it to be in jQuery.. can anyone help me with it? I'm writing my code in html, javascript and jquery..
<input id="agree" type="checkbox" name="agree" >I agree to the terms of service...<br> <br />
<div align="center">
<button style=" color: white; background-color: gray; width: 100px; height: 30px" type="submit" disabled ><b><font color="black">Register</font></b></button>
</div>
When the state of the checkbox changes, set the disabled property of the button based on the checkboxes' current state:
$('#agree').on('change', function() {
$('button').prop('disabled', !this.checked);
});
If you have multiple buttons on the page, the above will set the disabled property on all of them. If you need to get the next button relative to #agree, you'd have to traverse a little bit:
$('~ div:first', this).find('button').prop('disabled', !this.checked);
$('~ div:first', this) will get the first occurrence of a div which comes after this (#agree)
Here's a fiddle
You can use:
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
or:
$('#agree').click(function() {
$(this).next().find('input[type="submit"]').prop('disabled',!this.checked);
});
$('input[type="submit"]').removeAttr('disabled');
$("#checkBoxID").click(function() {
$("#buttonID").attr("disabled", !this.checked);
});
so in your case
$("#agree").click(function() {
$("button").attr("disabled", !this.checked);
});
Demo
I know you want a JS solution, but just to show a different approach, you can actually accomplish something similar in pure CSS.
Note you should also avoid using the font tag, and move your CSS from inline to a stylesheet.
Demo Fiddle
HTML
<input id="agree" type="checkbox" name="agree">I agree to the terms of service...
<div>
<button>Register</button>
<div></div>
</div>
CSS
div {
position:relative;
text-align:center;
}
div div {
height:100%;
position:absolute;
top:0;
left:0;
width:100%;
}
button {
background:grey;
color:#c0c0c0;
}
input[type=checkbox]:checked + div div {
display:none;
}
input[type=checkbox]:checked + div button {
background:#c0c0c0;
color:black;
}
Do like this
$('#agree').change(function() {
$('button[type=submit]').prop('disabled', !this.checked);
});
Try this..Property of button changes when Checkbox state is changed...
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
Demo Fiddle
I have this markup one of my web pages,
<div class="radio-spoof">
<input type="radio" name="enquiry" value="General enquiry" class="radio"/>
<div class="checked"></div>
</div>
<label for="general_enquiry">General enquiry</label>
<div class="radio-spoof">
<input type="radio" name="enquiry" value="Request a brochure" class="radio" checked="true"/>
<div class="checked"></div>
</div>
<label for="request_a_brochure">Request a brochure</label>
Basically what I am doing is trying to spoof some radio buttons, so I can have good looking ones, when a radio is checked I want to display .checked which is set to display:none by default. I need to check for a checked radio button on DOMReady and when ever a radio is clicked, currently I have this page, but it does not seem to be making the selection of the .checked div correctly.
if($('input[type=radio]:checked')) {
console.log("!");
$(this).parent().children('div').show();
}
I would expect the code above the select the radio buttons parent, and then look for a child div (.checked) and show it. Am I mistaken?
`
$(function(){
$(':radio').change(function(){
var $this = $(this);
console.log($this);
$(':radio[name='+this.name+']').next().hide();
if($this.is(':checked')){
$this.next('.checked').show();
}
});
});
For above issue, i have done solution on codebins. So, try it on http://codebins.com/codes/home/4ldqpb6
Solution:
$(document).ready(function() {
$('input[type=radio]').each(function() {
if ($(this).is(':checked')) {
$(this).next('.checked').show();
}
$(this).click(function() {
if ($(this).is(':checked')) {
$(this).next('.checked').show();
}
});
});
});
demo you need to register an event when check box state changes : http://jsfiddle.net/FtPLS/2/ or http://jsfiddle.net/QCkpG/1/
Also I reckon you should use .next instead of .children.
if you want to hide .checked just do this => $('.checked').hide()
you could use $('input[type=radio]').is(':checked') for your check/uncheck condition.
Hope this helps the cause, :)
code
$(function() {
// here ==> $('.checked').hide(); will hide all the div with checked class
$('input').click(function() { // can use .change instead if you want
if ($('input[type=radio]').is(':checked')) {
alert('!')
$(this).parent().next('div').show(); // whatever you wanna show or
//$(this).next('div').show();
}
});
});
It seems to me that you're trying to get custom-styled radiobuttons? A pretty cool way without JS I had in a project was this (adapted to your code):
HTML
<div class="radio-spoof">
<input id="radio-1" type="radio" name="enquiry" value="General enquiry" class="radio"/>
<label for="radio-1">General enquiry</label>
</div>
CSS
.radio-spoof input {
position: absolute;
left: -9999px;
} /* not display: none so it is tabbable */
.radio-spoof label {
display: inline-block;
padding-left: 35px; /* width of your custom image + spacing to text */
height: 30px;
line-height: 30px; /* height of your custom image */
background: url(your/custom/image) center left no-repeat;
}
.radio-spoof input:checked + label {
background-image: url(your/custom/active/image);
}
The checkbox toggles everytime the label gets clicked, they're connected through input id and label for, and the label gets the input style.
If you want the checkboxes to look like default if they're not checked you can set it up like this:
CSS
.radio-spoof input + label { display: none }
.radio-spoof input:checked {
position: absolute;
left: -9999px;
}
.radio-spoof input:checked + label {
display: inline-block;
padding-left: 35px; /* width of your custom image + spacing to text */
height: 30px;
line-height: 30px; /* height of your custom image */
background: url(your/custom/image) center left no-repeat;
}
Then you have default radios and if they're checked the label takes their place...
The site is here
I have opt to using the radiobutton's labels as customized buttons for them. This means the radio inputs themselves are display:none. Because of this, the browsers don't tab stop at the radio labels, but I want them to.
I tried forcing a tabindex to them, but no cigar.
I have came up with just putting a pointless checkbox right before the labels, and set it to width: 1px; and height 1px; which seems to only really work on chrome & safari.
So do you have any other ideas for forcing a tab stop at those locations without showing an element?
Edit:
Just incase someone else comes by this, this is how I was able to insert small checkboxes into chrome & safari using JQuery:
if ($.browser.safari) {
$("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}
Note: $.browser.webkit was not becoming true...so I had to use safari
a working solution in my case to enable tab selection / arrow navigation was to set the opacity to zero rather than a "display: none"
.styled-selection input {
opacity: 0; // hide it visually
z-index: -1; // avoid unintended clicks
position: absolute; // don't affect other elements positioning
}
Keep the radio input hidden, but set tabindex="0" on the <label> element of reach radio input.
(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)
If you separate the label from any field and set a tabIndex you can tab to it and capture mouse and key events. It seems more sensible to use buttons or inputs with type="button",
but suit yourself.
<form>
<fieldset>
<input value="today">
<label tabIndex="0" onfocus="alert('label');">Label 1</label>
</fieldset>
</form>
I have an alternative answer that I think has not been mentioned yet. For recent work I've been reading the Mozilla Developer Docs MDN Docs, Forms, especially the Accessibility Section MDN Docs, Accessible HTML(5), for information related to keyboard accessibility and form structure.
One of the specific mentions in the Accessibility section is to use HTML5 elements when and where possible -- they often have cross-browser and more accessible support by default (not always true, but clear content structure and proper elements also help screen reading along with keyboard accessibility).
Anyway, here's a JSFiddle: JSFiddle::Keyboard Accessible Forms
Essentially, what I did was:
shamelessly copy over some of the source code from a Mozilla source code to a JSFiddle (source in the comments of the fiddle)
create a TEXT-type and assign it the "readonly" HTML5 attribute
add attribute tabindex="0" to the readonly
Modify the "readonly" CSS for that input element so it looks "blank" or hidden"
HTML
<title>Native keyboard accessibility</title>
<body>
<h1>Native keyboard accessibility</h1>
<hr>
<h2>Links</h2>
<p>This is a link to Mozilla.</p>
<p>Another link, to the Mozilla Developer Network.</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!
</button>
<button data-message="This is from the third button">And me!</button>
</p>
<!-- "Invisible" HTML(5) element -->
<!-- * a READONLY text-input with modified CSS... -->
<hr>
<label for="hidden-anchor">Hidden Anchor Point</label>
<input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
<hr>
<h2>Form</h2>
<form name="personal-info">
<fieldset>
<legend>Personal Info</legend>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</fieldset>
</form>
<script>
var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.addEventListener('click', function(e) {
var message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
CSS Styling
input {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
.hidden-anchor {
border: none;
background: transparent!important;
}
.hidden-anchor:focus {
border: 1px solid #f6b73c;
}
BTW, you can edit the CSS rule for .hidden-anchor:focus to remove the highlight for the hidden anchor if you want. I added it just to "prove" the concept here, but it still works invisibly as requested.
I hope this helps!
My preference:
.tab-only:not(:focus) {
position: fixed;
left: -999999px;
}
<button class="tab-only">Jump to main</button>
Another great option would be to nest your input + div in a label and hide the input by setting width and height to 0px instead of display: none
This method even allows you to use pseudo-classes like :focus or :checked by using input:pseudo + styleDiv
<label>
<input type="radio">
<div class="styleDiv">Display text</div>
</label>
input
{
width: 0px;
height: 0px;
}
input + .styleDiv
{
//Radiobutton style here
display: inline-block
}
input:checked + .styleDiv
{
//Checked style here
}
Discard the radio-buttons and instead; keep some hidden fields in your code, in which you store the selected value of your UI components.