How to disable a radio button but not it's label? - javascript

Okay so I am working on an html page with jquery mobile and I am disabling my radio buttons when the form they are on gets submitted but this causes the labels to get grayed out. I don't want the labels to be greyed out because I want to user to be able to see their previously entered choices. How can I disable the radio button but not disable/grey out the label when I disable the radio button?? Thanks for help in advance!
EDIT:
So to provide an example of what is happening go to this web page with radio buttons:
http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html
Then open up the console in the inspector and type these two lines:
$('input:radio').attr('disabled', true);
$('input:radio').checkboxradio("refresh");
The radio buttons will all be greyed out. I am trying to leave everything greyed out except for the labels.

You're using "disabled" semantics incorrectly. If they're disabled, they have no previous value, they have no value at all, and they will be absent from the form when submitted to the server.
If you want them to retain their value, don't disable them, make them read-only.

Related

Add Dropdown to a Text Field with AutoComplete in Oracle APEX

Currently, I have an Text Field with AutoComplete item added to my page. I have a requirement to add a dropdown arrow button to the right of that item. The user should have the ability to use the features of AutoComplete but also have the ability to click the dropdown arrow to activate the list that appears from the AutoComplete item. For example, if the AutoComplete item is null and the user clicks the dropdown arrow, the list of all possible values should appear. However, if the user actually types something into the AutoComplete field, then the list of values will display specifically to what was keyed into the AutoComplete field.
Thus far I haven't come across any information online to help figure out how to achieve this task. Can anyone provide an solutions?
At the moment i have this functionality partially working... I have added the dropdown arrow as a button. When this button is clicked, it activates a dynamic action that executes JavaScript. The JavaScript I have is:
if ($(".ac_results").css("display") == "none"){
$(".ac_results").css("display","block");
}
else{
$(".ac_results").css("display","none");
}
This only works when the user has entered a value into the AutoComplete field (which initiates something in the background to create a with the class .ac_results). Then, the user removes the value keyed in and then clicks the dropdown arrows. The list appears for a split second then is gone. But if the button is clicked again the list of values appear and disappear as they should with the button clicks.
Any suggestions or solutions would be wonderful.
Thanks.
Use the Select2 Plugin instead. It has all the features you're looking for and will save you a lot of time getting all the CSS correct. Demo of it: https://apex.oracle.com/pls/apex/f?p=64237:20:0:

Radio Buttons with X-editable

I've recently started using http://vitalets.github.io/x-editable/ with jQueryUI.
I successfully used it with input text and select menus, and next wish to implement radio buttons. The UX should be the same as with other input types (i.e. user clicks some text, two or more radio buttons popup along with a enter and cancel icon).
Is this possible, and if so, how?
The following script works as necessary...
https://gist.github.com/taivo/da6d47c7b291f71b9502

JQGrid Edit Form does not get focus on submit button

I have started to use JQGrid with version 4.6 since last few days. I have used jqgrid data form to insert and update data of the grid. In the form I have used several text-boxes. I get focus to next text-box by pressing tab key as usual. This works fine. But when last textbox is reached and press tab button, the focus should be transfer to the submit button as it is the next element in the form. But it doesn't. I have also observe this behavior on jqgrid demo site. It would be much better if focus is shifted to the submit button when tab key is pressed from the last element of the edit form of JQGrid.
Please help me out on this.
you can check the behaviour on http://trirand.com/blog/jqgrid/jqgrid.html and go to "New in version 3.5" -> Form Navigation.
Thanks & Regards,
Kartik Jajal

Chrome's clear form option from Autofill

I'm working on a form that have several fields with user's information (like his address) and, in the same form, several checkboxes and radio buttons. I want to keep autofill on, but only for the text fields. The radios and checkboxes all have custom events that trigger some ajaxes to update the page summaries and some other things.
Problem is: I did put autocomplete="off" on all fields I don't want autofill to mess up.. and that does work. But on chrome, when you have an autofilled a form, a "clear form" option shows up when you double click any field that is part of the autofilled form.
This clear form triggers a reset on the form object but this reset just don't fire any event. And it clears the whole form, even the radios and checkboxes. This breaks the functionality of my form because the custom events on the radios and checkboxes are not triggered.
The only solution I could think was to, using javascript, try to cache the current selections on the fields and keep comparing using a interval function... but that looks like a lame solution to me... it is kind of heavy and not very intuitive for other people to maintain this code. Does anyone know if this is a chrome bug or if there is any secret event I should be listening to, instead of "reset"?
Thank you

javascript editing fields after manual edit of field

I've looked everywhere on this.
basically what I have is a script that changes the value of some fields based on a radio selection.
For example: Think of it like a radio button that gets credit card data.
it works initially when the page loads and selects a radio. It will correctly load the data of that radio button.
Now when I choose to edit the fields manually, using it like a "new card" form, if I change my mind and go to select a presaved card, it will no longer update those fields I edited manually. It will completely ignore my request for it to change values via my javascript code that was just previously working. Note: It will actually still continue to work for any fields I left alone *did not manually type into/edit
so I was just wondering who else had that problem and what one does to fix it.
I am not sure if I understand exactly but I'll take a shot. My suggestion would be set apply a css class like "is-dirty" to the field once it has been updated and then you check to see if a given field has that class before updating it.

Categories

Resources