SitePoint Sponsor

User Tag List

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

    Separate Radio-Buttons

    Not sure where to ask this question...

    On my website, I allow Members to post Comments beneath Articles.

    And for each Comment, I want to add a radio-button pair so people can vote on "Was this Comment helpful? __Yes __No"

    The problem is that it appears all of my Yes/No button pairs are being treated as one gigantic group?!

    What I want is each pair to be discrete and linked to the "Submit" button next to it.

    In other words, I do NOT want people to go through voting for every Comment all at the same time. This is a "one-off vote" if that makes sense?


    BTW, as you probably know, JavaScript is NOT an option...


    How can I achieve the design I want?

    Sincerely,


    Debbie

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The trick here is to assign unique variables in the form for each comment. Something like this, where the comment ID is 1234...

    Code:
    <form...>
    <!-- use a hidden field to pass the comment ID so you can write the data into your database -->
    <input type="hidden" name= "helpful" value="1234"> 
    <!-- assign your radio buttons using comment ID as the unique ID -->
    <label for="yes1234"><input type="radio" id="yes1234" name="helpful" value="1"> Yes</label>
    <label for="no1234"><input type="radio" id="no1234" name="helpful" value="2"> No</label>
    </form>
    Note: the for and id attributes are in valid if starting with a number so just prepend alpha characters

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    The trick here is to assign unique variables in the form for each comment. Something like this, where the comment ID is 1234...

    Code:
    <form...>
    <!-- use a hidden field to pass the comment ID so you can write the data into your database -->
    <input type="hidden" name= "helpful" value="1234"> 
    <!-- assign your radio buttons using comment ID as the unique ID -->
    <label for="yes1234"><input type="radio" id="yes1234" name="helpful" value="1"> Yes</label>
    <label for="no1234"><input type="radio" id="no1234" name="helpful" value="2"> No</label>
    </form>
    Note: the for and id attributes are in valid if starting with a number so just prepend alpha characters
    Some related questions that you may or may not be able to answer...

    1.) Is it a bad design to just want people to vote on one comment at a time like I described?

    (With your suggestion above, I could probably make it so people could vote on all Comments at once...)


    2.) Would it be better if I had a separate Form for each Comment?

    Sincerely,


    Debbie

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    1. Not at all, in fact I can't imagine many people wanting to sift through numerous comments to mark them useful. I'd think that the majority of times you'd only select one item to mark...?

    2. Depends how you want it to work. You could wrap all comments in one form and let users select many items, but then where would you put your submit button(s)? Could make it hard work! I'd say one form per comment, keep it simple.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    1. Not at all, in fact I can't imagine many people wanting to sift through numerous comments to mark them useful. I'd think that the majority of times you'd only select one item to mark...?

    2. Depends how you want it to work. You could wrap all comments in one form and let users select many items, but then where would you put your submit button(s)? Could make it hard work! I'd say one form per comment, keep it simple.
    Your comments in #2 are my exact concern!!

    I agree that i don't think people naturally would want to reviews 150 comments and then click "Submit"

    I see this more as someone reading a really good or bad comment and wanting to voice their impression.

    Also, how would I handle error messages if I let people vote on numerous comments at once?

    And, yes, where would the submit button go?!


    Okay, but to be clear....

    If I have an article with 227 Comments, you are saying it is okay if my PHP dynamically generates 227 corresponding Forms?!

    Would I have to assign a unique "Form ID" or how would that work?

    Sincerely,


    Debbie

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    The trick here is to assign unique variables in the form for each comment. Something like this, where the comment ID is 1234...

    Code:
    <form...>
    <!-- use a hidden field to pass the comment ID so you can write the data into your database -->
    <input type="hidden" name= "helpful" value="1234"> 
    <!-- assign your radio buttons using comment ID as the unique ID -->
    <label for="yes1234"><input type="radio" id="yes1234" name="helpful" value="1"> Yes</label>
    <label for="no1234"><input type="radio" id="no1234" name="helpful" value="2"> No</label>
    </form>
    Note: the for and id attributes are in valid if starting with a number so just prepend alpha characters
    If you want each pair of radio buttons to be treated separately then you also need to insert the comment ID in the end of the name. If you do that then the hidden helpful field would not be needed,

    Code:
    <form...>
    <!-- assign your radio buttons using comment ID as the unique ID and name -->
    <label for="yes1234"><input type="radio" id="yes1234" name="helpful1234" value="Y"> Yes</label>
    <label for="no1234"><input type="radio" id="no1234" name="helpful1234" value="N"> No</label>
    
    
    <label for="yes2468"><input type="radio" id="yes2468" name="helpful2468" value="Y"> Yes</label>
    <label for="no2468"><input type="radio" id="no2468" name="helpful2468" value="N"> No</label>
    </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="^$">

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you want each pair of radio buttons to be treated separately then you also need to insert the comment ID in the end of the name. If you do that then the hidden helpful field would not be needed,

    Code:
    <form...>
    <!-- assign your radio buttons using comment ID as the unique ID and name -->
    <label for="yes1234"><input type="radio" id="yes1234" name="helpful1234" value="Y"> Yes</label>
    <label for="no1234"><input type="radio" id="no1234" name="helpful1234" value="N"> No</label>
    
    
    <label for="yes2468"><input type="radio" id="yes2468" name="helpful2468" value="Y"> Yes</label>
    <label for="no2468"><input type="radio" id="no2468" name="helpful2468" value="N"> No</label>
    </form>
    Stephen,

    Let me explain again what I am trying to do, and maybe you can share your thoughts with me - since you generally give good advice!

    Beneath one of my articles are Member Comments. I expect any given article could have from 50 to 500 Comments.

    For each Member Comment, I want to ask at least 2 Questions:
    1.) Was this Comment helpful? (Yes/No)
    2.) How would you rate this Comment? (1 to 5 Stars)

    My assumption is that a person would be reading through the Comments, see one that stands out - good or bad - and decide to take my "mini-survey" on said Comment.

    As such, the design I was going for is one which assumes a reader is submitting answers for ONE COMMENT versus going through and rating every Comment.

    The more I think about it, it sure seems to me that each Comment would be encapsulated in its own Form.

    Is my thinking correct?

    Is there any damage if I have 500 Comments on an Article, and thus I need 500 Forms??


    Right now, all of an Article's Comments are already wrapped in a Form because I use that when the reader wants to sort things or navigate between pages.

    I do NOT think it is a good idea to let my two questions above exists in this current "parent" Form because then a reader could go crazy and start rating everything under the stars all at once.


    If it IS okay to encapsulate my two Comment questions in a "mini" Form, then the next question would be, how do I do the HTML?

    Would your advice above still apply or not?

    It seems to me that I would want the NAME to be the same for everything, because there would be a distinct Form for each Comment, and so there wouldn't be any "collisions".

    Anyways, I would be interested to hear your thoughts, Stephen - along with any other gurus lurking out there!

    Sincerely,


    Debbie

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    bluedreamer's solution will work if you want each as a separate form . I was providing an alternative for if you want everything in the one form. It all depends on how many submit buttons you want on the page and what you want to happen if someone decides to fill out fields in more than one form before trying to submit any of it.

    As long as it is clear to your visitors whether the page is all one form or lots of separate forms then there shouldn't be too much of a problem. You will get people upset if they fill out all of the fields thinking it is all one form and then submitting only captures a small part of what they typed or of they think they are all separate forms, part fill out one then change their mind, go to fill out another and find that the part they thought they'd abandoned part way through gets submitted with the one they wanted to submit.
    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
  •