Is there a way to display Radio Buttons in a Form, but make them read-only (without using JavaScript)?

I would like to create a page entitled "Friend-Requests made to Other Members" which displays one of three choices for each Friend-Request:

Request Pending

Accepted

Declined

However, since the current user would be the "requestor", he/she has no say in whether or not his/her request is accepted, and therefore should NOT be able to click on a Radio Button and change the value.

(The purpose of this new page would be to show you where your Friend-Requests are in the process. Where you accepted, rejected, or is the person just taking their time in making their mind up?!)

Hope that makes sense?!

Thanks,

Debbie

Pullo
—
2013-01-26T16:36:05Z —
#2

Hi there,

One idea would be to disable the radio buttons, and store their default value in a hidden field of the same name.This way your back-end logic need not change.

The easiest way is to recreate the radio button in its on and off states and save them as images, then you could have a simple <ul> with one (or more) item marked as <li class="selected">. Then just set the appropriate image as background image for li and li.selected, and you're done. Alternatively, if you think that would be inaccessible for people with images disabled, you could include the image inline (with alt text) instead of having it as a background image.

felgall
—
2013-01-26T21:43:39Z —
#4

Pullo said:

One idea would be to disable the radio buttons

The question was about making the button readonly not about disabling it. If it is readonly then it still gets passed to the server and there would be no need for a hidden field to pass the value.

If I load a Form with 3 radio buttons like described in my OP, and I used the code above, what would the User see?

When the Form is loaded, I would want to see the proper radio button selected based on what is stored in my database. (Personally I like the look of a "disabled" control, so it is self-evident that the control cannot be modified, but whatever.)

And even though there won't be a "Submit" button, if the Form were submitted, then what would happen to the control and to the values stored in my database?

Debbie

felgall
—
2013-01-27T04:01:39Z —
#7

DoubleDee said:

If I load a Form with 3 radio buttons like described in my OP, and I used the code above, what would the User see?

The third button would be coded like the other two. the checked="checked" would be on whichever of the three buttons you want checked.

DoubleDee said:

When the Form is loaded, I would want to see the proper radio button selected based on what is stored in my database.

That's controlled by CSS. You can change the appearance of the radio buttons by styling them.

DoubleDee said:

And even though there won't be a "Submit" button, if the Form were submitted, then what would happen to the control and to the values stored in my database?

readonly fields get submitted with the form, disabled fields don't get submitted with the form - that's the difference between those two options in terms of what they do.

If you are not going to have a submit option then a better alternative is to not have a form at all and just display the values styled so they look like a form.

DoubleDee
—
2013-01-27T04:38:48Z —
#8

felgall said:

The third button would be coded like the other two. the checked="checked" would be on whichever of the three buttons you want checked.

But all three radio buttons would have...

readonly="readonly"/>

Right?

readonly fields get submitted with the form, disabled fields don't get submitted with the form - that's the difference between those two options in terms of what they do.

I want to display what Friend-Request Status was selected, not re-submit it.

If you are not going to have a submit option then a better alternative is to not have a form at all and just display the values styled so they look like a form.

And how would I do that?!

Besides, the goal is to take 3 separate scripts, and combine them into one, where 2 of the 3 Forms allow the User to update the "Incoming Friend-Requests" and "Declined Friend-Requests" forms, while the "Friend-Requests that I made to others" view would be read-only.

Follow me?

Debbie

xhtmlcoder
—
2013-01-27T10:13:37Z —
#9

Radio buttons don't really have the 'readonly' attribute since it is meant for unmodifiable text input.

DoubleDee
—
2013-01-27T20:03:28Z —
#10

Pullo said:

Hi there,

One idea would be to disable the radio buttons, and store their default value in a hidden field of the same name.This way your back-end logic need not change.

The last field with each name that is submitted with the form is what actually gets sent. If you have two hidden fields with the same name then only the second one will be sent.

If you have a hidden field and a field after it with the same name that is sometimes disabled and sometimes not then the hidden field will only be sent when the following fields with the same name are disabled.

If you have a hidden field followed by a checkbox or radio buttons with the same name then the hiden field will only be sent if none of the following fields with that name are checked.

DoubleDee
—
2013-01-27T22:40:39Z —
#12

felgall said:

The last field with each name that is submitted with the form is what actually gets sent. If you have two hidden fields with the same name then only the second one will be sent.

If you have a hidden field and a field after it with the same name that is sometimes disabled and sometimes not then the hidden field will only be sent when the following fields with the same name are disabled.

If you have a hidden field followed by a checkbox or radio buttons with the same name then the hiden field will only be sent if none of the following fields with that name are checked.

Hmmm, I'm not sure I'm following you...

Maybe it is easier to work off of actual code?

Here is some updated code that I thought would fix the problem I was having before you replied, but it isn't working either...

The code above is what exists when my "Manage Friend-Requests" page is displayed. (As you can see, "Accept" is selected.)

When the Form is submitted, the above Friend-Request changes to "Decide Later" for some unknown reason. (The other Friend-Request below it also changes from "Accept" to "Decide Later".)

This problem really has me stumped, and I'm not sure what is wrong...

Sincerely,

Debbie

Stomme_poes
—
2013-02-04T17:31:27Z —
#18

[ot]

felgall said:

You don't need names on disabled fields as they are not going to be submitted anyway.

I thought for radios and checks names are required anyway? It's how radios know they belong to the same group.

A note on disabled buttons: it's not uncommon that they cannot be read out by screen readers or accessed by speech-recognition software like Dragon, because being disabled means no user interaction allowed. Similarly I found I can't right-click on these elements in order to inspect them in the browser debugger; I click a sibling and navigate my way to the disabled element, if I want to inspect it.[/ot]

felgall
—
2013-02-04T18:13:58Z —
#19

Stomme_poes said:

Off Topic:

It's how radios know they belong to the same group.

But if they are disabled then they can't be changed and it doesn't matter that they are not grouped. Only if they are going to be able to be actually used would they need a name - such as if there was some JavaScript to set disabled=false.