I'm wrapping some radion button to give them a better style, using css and jquery to handle the radion selection.
I'm using this HTML to wrap the radio input element:
<button class="radio-button inches inches-selected">
<input type="radio" id="inches" name="unit" value="inches" checked="checked">
</button>
All works well as expected in each browser, but in IE when I try to get the checked status (set by default in the HTML) I get "undefined".
I've tried:
$("#inches").is(":checked");
$("#inches").attr("checked");
$("input[value=inches]").is(":checked");
but I always get "undefined".
Any suggestion?
I didn't think you could wrap an <input> in a <button>. But assuming you can, you should not use the selector $("input[value=inches]") since that would also select any other input elements (e.g. text boxes) that have inches as its current value. Other than that, I'm not familiar with the button wrapping technique so I am suspicious of that approach overall.
Related
I'm using the jQuery plugin ScrewDefaultButtons to style my radio buttons, but it seems it comes with a side effect that it doesn't return the correct value when getting it via jQuery. I am running a function when they are clicked and I am trying to get the value of the radio button the user selected, but it seems to returns the value of the previously selected radio button instead of the one that was just selected.
If I remove the class pretty_rb, which disables the styling then it works fine.
I am trying to get the value with:
jQuery('input[name=tax_account_type]:checked').val();
My HTML:
<input type="radio" name="tax_account_type" id="individual" class="pretty_rb" value="0" onclick="updateRegForm();" checked required>
<input type="radio" name="tax_account_type" id="business" class="pretty_rb" value="1" onclick="updateRegForm();" required>
Edit: Fiddle: http://jsfiddle.net/94UtB/2/
The problem is that ScrewDefaultButtons wraps the input elements in a div and then hides the input element.
This div has a click event that checks the correct hidden input element.
However. Since you have an onClick event YOUR event is run before the change.
That is why you get the old value.
To solve this add the following code after the call to screwDefaultButtons:
$('.styledRadio').on('click', updateRegForm);
or
$('.pretty_rb').on('click', updateRegForm);
Remember to remove the onlick attribute from the HTML.
I'm using a form to get information from the user, and i am also using some radio buttons and textarea's, if the user hasn't picked an option from the radio buttons i want to focus that radio button so the user can know what data is missing.
I've tried:
document.FORM.RADIOBUTTON[INDEX].focus();
and it actually works well in google chrome, but for some reason it doesn't work on firefox,
i tried to use a setTimeout(.....); and again, it does work on google chrome but i don't get anything in firefox.
any ideas in how to get this to work?
It indeed works in firefox but the issue is the focused item is not highlighted in firefox. If you try to navigate the next DOM element using tab key, you will find it works. Some styling can be applied to element but DOM element styling also differ from browser to browser. See an example here
http://jsfiddle.net/uQ3vk/
Without seeing your HTML the best option I can suggest is to give your radio buttons (or at least the one(s) you want to be able to focus programmatically) an ID:
<input type="radio" id="radio1" name="someradiogroup" value="somevalue">
<input type="radio" id="radio2" name="someradiogroup" value="someothervalue">
<script>
document.getElementById("radio1").focus();
</script>
As with any programmatic access to DOM elements your code won't work if the element(s) haven't been parsed yet, so the code should be either in the document.ready / onload handler or later in the source than the element(s) in question. (Or in a submit handler, assuming a submit won't happen before the page loads.)
I think the missing outline in Firefox is the issue, I know it was for me. I added some CSS and got it to show.
input:focus
{
outline:#000 dotted 1px;
}
select:focus
{
outline:#000 dotted 1px;
}
On a form I've two radio button Yes and No. I want to change the default look of radio buttons
to like this.
Edit: I would like to change the radio buttons into <a> anchor when JavaScript is enabled if it's not easy to change the look of default radio via css.
Easiest way? Set the images as labels with the for attribute pointing to the radio buttons. Then set the radio buttons to display:none;
<input type="radio" name="radio[1]" /><label for="radio[1]"><img src="/yes.png"></label>
<input type="radio" name="radio[2]" /><label for="radio[2]"><img src="/no.png"></label>
p.s. This uses built in HTML functionality that works everywhere and doesn't require javascript. Use some CSS meta selectors (:hover etc...) to add animation.
UPDATE:
Just looping back after a long time and realised this could do with a little more explanation for beginners. When the for attribute is set on a label, clicking the label is functionally the same as clicking the element it's for attribute points to. For completeness, the for attribute should be set to the id of the form element.
Rather than try to coerce the images to work with the <radio> tag, I would just put the images where you want them, bind the various behaviors to them using jQuery, and have them modify hidden input fields. I think it will be much easier that way.
I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.
i am dynamically creating radio using jquery as shown belown.
but they value only selected in ff,ie8.
ie6,ie7 not selecting the values.
how can i select the radio button value in ie6/7.
rand=$("<input type='radio' ></input>");
rand.attr("checked","checked");
$(document).append(rand);
My guess is that <input> does not have a closing tag.
Also give it a name attribute. If need be, set the checked attribute after appending to the DOM.
You could also do it like so
rand=$("<input type='radio' checked='checked' name='radio'/>");
$(document).append(rand);
Besides the missing name attribute as Russ Cam mentioned, and also losing the </input>, your radio button should also have a value. My guess is the browser relies on value especially for radios, to implement the "only one can be checked at a time" functionality...
Good luck!