Read-only Radio Buttons?

[DoubleDee]

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

[James_Hibbard]

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.

<input type='radio' name='val' value='Accepted' disabled='disabled' />
<input type='hidden' name='val' value='Accepted' />

Source: http://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly

[Stevie_D]

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]

@James_Hibbard

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.

<input type='radio' name='val' value='Accepted' checked="checked" readonly="readonly"/>
<input type='radio' name='val' value='Rejected' readonly="readonly"/>

[James_Hibbard]

Man, you live and you learn!
Nice one felgall, I didn’t know you could do that.

[DoubleDee]

@felgall

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.

<input type='radio' name='val' value='Accepted' checked="checked" readonly="readonly"/>
<input type='radio' name='val' value='Rejected' readonly="readonly"/>

Not sure if I’m understanding your advice, Felgall.

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]

@DoubleDee

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

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

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]

@felgall

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]

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

[DoubleDee]

@James_Hibbard

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.

<input type='radio' name='val' value='Accepted' disabled='disabled' />
<input type='hidden' name='val' value='Accepted' />

Source: http://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly

I have been following everyone’s suggestion in this thread, and have decided that “disabling” my radio buttons seems to make the most sense for a few reasons…

1.) When I put…

readonly="readonly"/>

…in my code it wasn’t working. The user could select another radio button, and my code would update the change in the database.

2.) Read-Only seems confusing to the user, because even if it worked, the user could change the value - and think they actually changed something - when they really didn’t.

3.) Disabled Controls just visually seem more obvious that the fields are “read-only”.

Anyway, I tried applying the advice above, but get the following issue…

If there are two entries on my page, with the first one marked “Decide Later” and the second marked “Declined”, when the form is submitted, both entries change to “Declined”?!

Here is my code…

	<fieldset id='requestChoices'>
		<input id='Requestor" . $requestorID . "_1' name='friendRequestDecision["
		. $requestorID . "]' type='hidden' value='0' />
		<input id='Requestor" . $requestorID . "_1' name='friendRequestDecision["
		. $requestorID . "]' type='radio' value='0' " 
		. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '0') ? "checked='checked'" : "") .
		" disabled='disabled' />
		<label for='Requestor" . $requestorID . "_1'>Decide Later</label>

		<input id='Requestor" . $requestorID . "_2' name='friendRequestDecision["
		. $requestorID . "]' type='hidden' value='1' />
		<input id='Requestor" . $requestorID . "_2' name='friendRequestDecision["
		. $requestorID . "]' type='radio' value='1' " 
		. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '1') ? "checked='checked'" : "") .
		" disabled='disabled' />
		<label for='Requestor" . $requestorID . "_2'>Accept</label>

		<input id='Requestor" . $requestorID . "_3' name='friendRequestDecision["
		. $requestorID . "]' type='hidden' value='2' />
		<input id='Requestor" . $requestorID . "_3' name='friendRequestDecision["
		. $requestorID . "]' type='radio' value='2' " 
		. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '2') ? "checked='checked'" : "") .
		" disabled='disabled' />
		<label for='Requestor" . $requestorID . "_3'>Decline</label>

I don’t think I am understanding how to use the Hidden Fields… :-/

Sincerely,

Debbie

[felgall]

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]

@felgall

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…

	<?php
		// ************************
		// Loop through Requests.	*
		// ************************
		while (mysqli_stmt_fetch($stmt3)){
			// **************************************
			// Build Friend-Request Decision array.	*
			// **************************************
			$friendRequestDecision[$requestorID] = (isset($requesteeApproved) ? $requesteeApproved : 0);


			// **************************
			// Display Friend-Requests.	*
			// **************************
			echo "<li>
					<a href='/account/profile/$username/about-me'>
						$username<br />
						<img src='/uploads/"
						. getSafeUserPhoto($photoName, $photoApproved) .
						"' width='80' alt='Thumbnail of " . $username . "' />
					</a>

					<fieldset id='requestChoices'>

						<input id='Requestor" . $requestorID . "_1' name='friendRequestDecision["
						. $requestorID . "]' type='hidden' "
						. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '0') ? "value='0'" : "") .
						" />
						<input id='Requestor" . $requestorID . "_1' name='friendRequestDecision["
						. $requestorID . "]' type='radio' value='0' " 
						. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '0') ? "checked='checked'" : "") .
						" disabled='disabled' />
						<label for='Requestor" . $requestorID . "_1'>Decide Later</label>

						<input id='Requestor" . $requestorID . "_2' name='friendRequestDecision["
						. $requestorID . "]' type='hidden' "
						. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '1') ? "value='1'" : "") .
						" />
						<input id='Requestor" . $requestorID . "_2' name='friendRequestDecision["
						. $requestorID . "]' type='radio' value='1' " 
						. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '1') ? "checked='checked'" : "") .
						" disabled='disabled' />
						<label for='Requestor" . $requestorID . "_2'>Accept</label>

						<input id='Requestor" . $requestorID . "_3' name='friendRequestDecision["
						. $requestorID . "]' type='hidden' "
						. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '2') ? "value='2'" : "") .
						" />
						<input id='Requestor" . $requestorID . "_3' name='friendRequestDecision["
						. $requestorID . "]' type='radio' value='2' "
						. ((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '2') ? "checked='checked'" : "") .
						" disabled='disabled' />
						<label for='Requestor" . $requestorID . "_3'>Decline</label>

					</fieldset>
				</li>\
";

			}//End of LOOP THROUGH REQUESTS
	?>

I thought adding this line in each Hidden Input would solve my issue…

((isset($friendRequestDecision[$requestorID]) && $friendRequestDecision[$requestorID] == '0') ? "value='0'" : "")

…but here is the problem I am having…

I am logged in as DoubleDee, and I made 2 Friend-Requests:

• The request with “User1” is marked as “Accept”. (1)
• The request with “User2” is marked as “Accept”. (1)

All radio buttons are “disabled”. So good, so far.

If I then click on “Update Requests” - which should be hidden for this view, but I left alone for testing - then this is where things break down…

• The request with “User1” changes to “Decide Later”. (0)
• The request with “User2” changes to “Decide Later”. (0)

Any idea what is happening? :-/

Thanks,

Debbie

[felgall]

You have multiple foeld with the same id - that is not allowed as each id must be unique. Fix that and then all the code referencing the ids will know which one it should access.

[DoubleDee]

@felgall

You have multiple foeld with the same id - that is not allowed as each id must be unique. Fix that and then all the code referencing the ids will know which one it should access.

Since it was suggested that I add in a new Hidden Field for each Radio Button, I’m not sure how I should do my ID’s?! :-/

If I do View Source, this is a sample of what I currently have…

	<fieldset id='requestChoices'>
		<input id='Requestor38_1' name='friendRequestDecision[38]' type='hidden'  />
		<input id='Requestor38_1' name='friendRequestDecision[38]' type='radio' value='0'  disabled='disabled' />
		<label for='Requestor38_1'>Decide Later</label>

		<input id='Requestor38_2' name='friendRequestDecision[38]' type='hidden' value='1' />
		<input id='Requestor38_2' name='friendRequestDecision[38]' type='radio' value='1' checked='checked' disabled='disabled' />
		<label for='Requestor38_2'>Accept</label>

		<input id='Requestor38_3' name='friendRequestDecision[38]' type='hidden'  />
		<input id='Requestor38_3' name='friendRequestDecision[38]' type='radio' value='2'  disabled='disabled' />
		<label for='Requestor38_3'>Decline</label>
	</fieldset>

I don’t see where I even use the ID. It seems like the name might be a bigger issue?

Anyways, if you could help me get a better handle on all of this, it would be appreciated.

Sincerely,

Debbie

[felgall]

You don’t need ids on hidden fields.

The ids are being referenced from the for attribute in the corresponding label.

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

[DoubleDee]

@felgall

You don’t need ids on hidden fields.

The ids are being referenced from the for attribute in the corresponding label.

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

So if I make those changes, then you are saying my code will work?

Debbie

[DoubleDee]

I tried modifying my code as you suggested, Felgall, but it didn’t help.

Here is my updated code as shown via View Source…

	<fieldset id='requestChoices'>
		<input name='friendRequestDecision[38]' type='hidden'  />
		<input id='Requestor38_1' type='radio' value='0'  disabled='disabled' />
		<label for='Requestor38_1'>Decide Later</label>

		<input name='friendRequestDecision[38]' type='hidden' value='1' />
		<input id='Requestor38_2' type='radio' value='1' checked='checked' disabled='disabled' />
		<label for='Requestor38_2'>Accept</label>

		<input name='friendRequestDecision[38]' type='hidden'  />
		<input id='Requestor38_3' type='radio' value='2'  disabled='disabled' />
		<label for='Requestor38_3'>Decline</label>
	</fieldset>

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]

[ot]

@felgall

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]

@Stomme_poes

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.