I'm using jQuery successfully and creating radio buttons nicely. However, I am annoyed that the labels on the buttons can be highlighted with a click-drag operation. When I've had too much caffeine or clicking multiple buttons in rapid succession, sometimes I will hold down the mouse button too long while moving the mouse and end up selecting the label text instead of clicking on the button itself. Here's the representative code I'm using:
HTML:
<span id='yesNoSelector'>
<input type='radio' id='yesNoSelector0' name='yesNoSelector' value='Yes'>
<label for='yesNoSelector0'>Yes</label>
<input type='radio' id='yesNoSelector1' name='yesNoSelector' value='No'>
<label for='yesNoSelector1'>No</label>
</span>
JavaScript: (the validate() function is my own to ensure the value is "legal")
<script>
$( #yesNoSelector ).buttonset();
$( input[name='yesNoSelector']).change(function(){ validate(); });
</script>
I have no CSS (beyond what is provided with jQuery). Can anyone tell me if it's possible to not make the label text highlightable (without requiring images), or provide a workaround?
Thanks!
Related
I've worked on this for quite some time now, and am stumped. I'm hoping someone has some direction for me. First the code:
The jQuery:
$("#paperwork").bind("onFail", function(e, errors) {
if (e.originalEvent.type == 'submit') {
$.each(errors, function() {
var input = this.input;
input.parent().css({color: 'red'}).change(function() {
input.parent().css({color: '#444'});
});
});
}
});
And a sampling of the HTML:
<input id="group_1" required="required" type="radio" name="attending" value="Yes" />Yes
<input id="group_1" type="radio" name="attending" value="No" />No
<input id="group_1" type="radio" name="attending" value="Not Provided" />Not Provided
<input id="group_1" class="single_text_input" type="text" name="primary_referral" />
<input id="group_1" class="single_text_input" type="text" name="secondary_referral" />
<span class="group_1">Referrals</span>
There are several sections that look much like the above. Each with a corresponding <span> (e.g. "2", "3", etc...) What I'm trying to accomplish is this:
When the validator runs, the .parent() element of each input turns red. That is working. When the user makes a change to the input, the .parent() element returns to its original color. That is also working.
In addition to this, I would like to turn each input section's corresponding <span> red (text or background). Then, when all the inputs within that section are changed, the corresponding <span> is returned to its original appearance. One issue (at least for me) is that the div containing the inputs and the corresponding <span> do not seem to be related to each other, whether by .parent(), .child(), or .closest.
One issue (at least for me) is that the div containing the inputs and
the corresponding do not seem to be related to each other,
whether by .parent(), .child(), or .closest.
Check if that is true by trying to reach the span in a live console like the Google Chrome Inspector's one.
Just set a class common to those divs, so you can select them later by that class.
I've got a form in which the user can give a rating from 1 to 5, this is done through radio boxes. But without check the user can click on the same button multiple times how do I prevent this? the code is simply written
echo "<input type='hidden' name='risk' />
<td>1<input type='radio' name='question[]' id=1 value=1 onclick='calculate_score(".$number.",this.value)'/></td>
<td>2<input type='radio' name='question[]' id=2 value=2 onclick='calculate_score(".$number.",this.value)'/></td>
<td>3<input type='radio' name='question[]' id=3 value=3 onclick='calculate_score(".$number.",this.value)'/></td>
<td>4<input type='radio' name='question[]' id=4 value=4 onclick='calculate_score(".$number.",this.value)'/></td>
<td>5<input type='radio' name='question[]' id=5 value=5 onclick='calculate_score(".$number.",this.value)'/></td>
</table></form>";
could anyone tell me how to handle this?
note that the code above is only a snip it from the code and it does actually work. it's purely functional. As you can see once this radio box is clicked it goes to a javascript function do I build the check there and how would I go about something like that?
You need to write the calculate_score() function so that it calculates according to the status of user selections, not according to the action of checking or unchecking a button. It would be bad usability and bad functionality to prevent the user from changing his selection (except perhaps in a special game or test).
You can disable the button that was just checked, enabling all others, once the user changes its value , previous ones will be enabled and the new one will be disabled preventing further clicks by user to that
I would recommend you to use a good framework (like jQuery) and put your javascript logic into a <script> tag, but if you did this way, you must have your reasons. To disable the clicked input element try the following snippet:
// i am assuming (\") will escape the quote (") character to echo
onclick='calculate_score(".$number.",this.value); this.onclick=\"\";'
Wondering how to approach this... Best to look at the picture to visualize the, hopeful, UI for a form for choosing options in a list. Users need to be able to make a first choice and a second choice for each option. One and only one can be selected in each column, and for that matter, each row.
At first I thought, naturally, 2 radio button groups might work...but not sure how? Perhaps hidden radio_buttons whose values are manipulated via Javascript/JQuery in a click event on each div? Event should also check/handle "collisions" when user tries to select same option for both choices.
Or, would this perhaps be better with two hidden collection_selects...or even simpler, just two hidden text_fields...which javascript can populate with the ID of the selected option?
Or maybe I'm overlooking something more obvious.
I'm new(ish) to javascripting with Rails so looking for advice/validation.
Thanks.
I think something like this is what your looking for:
HTML:
<form>
<p class="exclusiveSelection">
Selection One
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Two
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Three
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<input type="button" id="submitForm" value="Submit">
</form>
JavaScript:
$(function() {
$(".exclusiveSelection input[type='radio']").click(function() {
$exclusiveSelection = $(this).parent();
$('input[type='radio']', $exclusiveSelection).attr('checked', false);
$(this).attr('checked', true);
});
});
It ensures that the values are unique across column and row and works with jQuery 1.2.6 - 1.7.1. There is also a JSFiddle example.
If you need help adapting this for Rails let me know, however it should be straight forward.
i made 3 buttons in jquery mobile lets say (coffee, cola, water) grouped horizontally, I want them to behave like when I click one of them (coffee) the clicked button will change its appearance to clicked state and I wont be able to click it again (take note that when I disable a button it changes its color to gray also). then when i click cola, coffee returns to normal and cola turns to clicked state.
<div id="ui-26">
<div class="ui-segment" data-role="controlgroup" data-type="horizontal" >
<input type="button" name="segment-coffee" id="segment-coffee" class="custom" value="coffee" />
<input type="button" name="segment-cola" id="segment-cola" class="custom" value="cola" />
<input type="button" name="segment-water" id="segment-water" class="custom" value="water" />
</div>
</div>
i tried using the radio button but i cant assign a background image on it so i decided to use grouped buttons. how should this be done on jquery? thanks in advance!
I think http://jsfiddle.net/rcNfJ/2/ is what you are looking for? I just used attr("disabled") but you can do whatever you want to them (change their css, manipulate data, etc).
http://jqueryui.com/demos/button/#radio
I think this is what you are searching for :)
You can use icons option to set icons for them.
EDIT:
Here is alternative solution then :)
$(function() {
$('#ui-26 > .ui-segment > input').click(function(){
if($(this).is(':disabled')) return;
$('#ui-26 > .ui-segment > input').prop('disabled',false);
$(this).prop('disabled',true);
});
});
I have a web form that has 2 radio buttons, depending on which one is clicked it displays a hidden element
This works fine in all browsers except for IE6, which, after I click on the radio button, I have to click again (anywhere on the window) and then the element is displayed...has anyone had behavior like this before?
I tried to not use jQuery and do straight getElementById() but I get the same behavior...
Javascript
function showHidden(divid) {
$('#'+divid).css( {'display':'inline'} );
}
HTML
<input type=radio name=borp value=1 onChange='showHidden("brandchecks")' > Brand
<input type=radio name=borp value=2 onChange='showHidden("productchecks")' > Product
<div id='brandchecks' style='display:none;'>
Blah
</div>
<div id='productchecks' style='display:none;'>
Blah
</div>
I thought I remember something about IE firing the onChange event after the focus was lost. This behavior would match what you have seen (ie clicking somewhere else to active your code)
Try to change the onChange in onClick for better results.
Note: To be able to click on the text accompanying the radio buttons you could use the <label> tag, this results in a more user-friendly page.