SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Read-only Radio Buttons?

    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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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.

    HTML Code:
    <input type='radio' name='val' value='Accepted' disabled='disabled' />
    <input type='hidden' name='val' value='Accepted' />
    Source: http://stackoverflow.com/questions/1...ns-be-readonly

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

    HTML Code:
    <input type='radio' name='val' value='Accepted' checked="checked" readonly="readonly"/>
    <input type='radio' name='val' value='Rejected' readonly="readonly"/>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Man, you live and you learn!
    Nice one felgall, I didn't know you could do that.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.

    HTML Code:
    <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

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

    Quote Originally Posted by DoubleDee View Post
    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.

    Quote Originally Posted by DoubleDee View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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...
    HTML Code:
    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

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Radio buttons don't really have the 'readonly' attribute since it is meant for unmodifiable text input.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

    HTML Code:
    <input type='radio' name='val' value='Accepted' disabled='disabled' />
    <input type='hidden' name='val' value='Accepted' />
    Source: http://stackoverflow.com/questions/1...ns-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...
    HTML Code:
    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...
    PHP 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

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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 Code:
        <?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>\n"
    ;

                }
    //End of LOOP THROUGH REQUESTS
        
    ?>

    I thought adding this line in each Hidden Input would solve my issue...
    PHP Code:
    ((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

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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...
    PHP Code:
        <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

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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

  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I tried modifying my code as you suggested, Felgall, but it didn't help.

    Here is my updated code as shown via View Source...
    HTML Code:
    	<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

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    Quote Originally Posted by 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.

  19. #19
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •