Why are my HTML Radio Buttons checking the last option regardless of what option is selected?

Question

I'm working on a form, and I'm using stars and thumbs instead of the standard radio buttons, to spice up my form. I gave the input[type=radio] a display:none; and then rigged up some jQuery to check the previous radio button for whatever star/thumb gets clicked on. I made sure this worked by turning off the display: none; and watched the proper button get highlighted when I click on a star/thumb. Everything on the form is all filled out and my form validation jQuery works, but when I'm checking the form values with some PHP (to print the $_POST values), I realize that the radio buttons for my star/thumb fields aren't returning the proper values.

For the star field, there are 5 stars, representing values of 1 - 5. Naturally. However, regardless of what star is clicked, the form returns a value of 5. Well, all fields except for the last star field for some reason, which WILL return the proper value. This doesn't make sense to me, as these fields were copy/pasted while coding. The code should be/is exact. I've run the test 5 times, clicking all the same stars each time. Each time every star except the last one returns a value of 5, and my thumbs return a value of no, even if the "yes" thumb is clicked.

Here is my jsFiddle

Here is what the screen looks like, with some stars checked, and the thumb checked.

Here is another image with the radio buttons showing to prove the right button is being checked.

And the PHP print_r for the $_POST array and results

What the heck is going on?

HTML

<div class="r-form">
<div>
<div class="thumbs">
<label name="thumbs">Would you recommend this host?</label>
<input type="radio" id="thumbs" name="thumbs" value="yes">
<img class="thumb_r" src="/imgs/thumbs-up-green.png">
<input type="radio" id="thumbs" name="thumbs" value="no">
<img class="thumb_r" src="/imgs/thumbs-down-red.png">
</div>
<div class="star-chart">
<table>
<tr id="features">
<td><lable name="features">Features</lable></td>

<td class="star-row"><input type="radio" id="features" name="features" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>  
<tr id="security">
<td><lable name="security">Security</lable></td>

<td class="star-row">
<input type="radio" id="security" name="security" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>
<tr id="support">
<td><lable name="support">Service</lable></td>

<td class="star-row">
<input type="radio" id="support" name="support" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>
<tr id="reliability">
<td><lable name="reliability">Reliability</lable></td>

<td class="star-row">
<input type="radio" id="reliability" name="reliability" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>
</table>
</div>
</div>

CSS (not sure if needed, but just in case)

.r-form {
    width: 100%;
    padding: 10px;
    border: 1px solid grey;
}

.r-form table img {
    display: inline-block;
}

.r-form lable,
.r-form input[type="text"],
.r-form .radio,
.r-form textarea {
    color: #7b7b7b;
}

.r-form lable {
    margin: 10px 15px 10px 0px;
}

.r-form input[type="text"]{
    width: 250px;
    margin: 20px;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #bbb;
    box-shadow:inset 2px 2px 2px #bbb;
    font-style: italic;
}

.r-form input[type="radio"] {
    margin: 0px 3px;
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    position: relative;
    top: 2px
}

.r-form .star-chart input[type="radio"] {
    display: none;
    width: 10px;
    height: 10px;
}

.r-form textarea {
    width: 80%;
    font-size: 1em;
    padding: 7px;
    text-align: left;
    margin: 10px 0px;
}

.r-form textarea[placeholder] {
    color: #aaa;
}

.r-form table {
    border: 1px solid grey;
    color: #7b7b7b;
    margin: 25px 0px 10px;
    width: 45%
}


.r-form .thumbs {
    border: 1px solid grey;
    width: 45%;
    display: inline-block;
    float: right;
    margin: 0px 5% 0px 0%;
}

.r-form .thumbs lable {
    display: block;
}

.r-form .thumbs input[type="radio"] {
    display: none;
    margin: 0px;
    padding: 0px;
}

.r-form .thumbs img {

    width: 80px;
    height: 80px;
    opacity: .3;
    margin: 10px 5%;

}

.r-form .thumbs img:hover {
    opacity: 1;
}

.r-form .thumbs img.checked {
    opacity: 1;
}

.r-form input[type="submit"] {
    float: right;
    padding: 5px;
    font-size: 1em;
    width: 190px;
}

PHP

$title = htmlspecialchars($_POST["title"]);
$type = htmlspecialchars($_POST["type"]);
$features = htmlspecialchars($_POST["features"]);
$security = htmlspecialchars($_POST["security"]);
$support = htmlspecialchars($_POST["support"]);
$reliability = htmlspecialchars($_POST["reliability"]);
$thumb = htmlspecialchars($_POST["thumbs"]);
$comment = htmlspecialchars($_POST["comment"]);

print_r ($_POST);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    echo "<br><br>";
    echo "The title of my review is <span class='php'>" . $title . "</span><br>";
    echo "The type of host I am reviewing is <span class='php'>" . $type . " Hosting</span><br>";
    echo "I give FEATURES a rating of <span class='php'>" . $features . "</span><br>";
    echo "I give SECURITY a rating of <span class='php'>" . $security . "</span><br>";
    echo "I give SUPPORT a rating of <span class='php'>" . $support . "</span><br>";
    echo "I give RELIABILITY a rating of <span class='php'>" . $reliability. "</span><br>";
    echo "Will I recommend this host? <span class='php'>" . $thumb . "</span><br>";
    echo "I have the following comments:<br><span class='php'>" . $comment . "</span><br>";

}

EDIT TO ADD:

After several requests to include the jQuery, here it is.

jQuery

/*-- Variables -->*/
    var $star = $("img.star");
    var $star1 = $(".star-row").children("img.star-1");
    var $star2 = $(".star-row").children("img.star-2");
    var $star3 = $(".star-row").children("img.star-3");
    var $star4 = $(".star-row").children("img.star-4");
    var $star5 = $(".star-row").children("img.star-5");
    var $thumb = $(".thumbs").children("img");

    /*-- when visitor clicks on a star --*/
     $star.click(function(){
         /*alert("I've been clicked!");*/
         $(this).parent().find(".clicked").removeClass(".clicked");
         $(this).nextAll().attr("src", "/imgs/star-grey-empty.png");
         $(this).prev("input[type=radio]").prop("checked", true);


          if( $(this).is($star1) || $(this).is($star2) ) {

            $(this).attr("src", "/imgs/star-red-full.png").addClass(".clicked");
            $(this).prevAll().attr("src", "/imgs/star-red-full.png").addClass(".clicked");

        } else if ( $(this).is($star3) || $(this).is($star4) || $(this).is($star5) ) {

            $(this).attr("src", "/imgs/star-green-full.png").addClass(".clicked");
            $(this).prevAll().attr("src", "/imgs/star-green-full.png").addClass(".clicked");
        }

});

    /*-- when a visitor clicks on a thumb --*/
    $thumb.click(function(){

        $(this).siblings("img").removeClass("checked");
        $(this).addClass("checked");
        $(this).prev("input[type=radio]").prop("checked", true);


    });

You've tagged this jQuery, but I see no jQuery in your question. As the form looks correct, I'm suspecting your jQuery may be doing something to the form that we can't see based on the code you've provided. — random_user_name, Mar 31 '16 at 23:56
Please show the jQuery code that translates clicking on the star into checking the corresponding radio button. I'll bet the problem is there. — Barmar, Apr 01 '16 at 00:01
Have tried to show radio buttons and set images display none without jquery? I guess it's better to start debugging from there. — Navid, Apr 01 '16 at 01:16

wahwahwah · Answer 1 · 2016-04-01T05:52:01.707

1

You are using the same id attributes for all of your inputs so the result is always the last one in the collection.

Example:

<input type="radio" id="features" name="features" value="3">
<input type="radio" id="features" name="features" value="4">

[As detailed in the comments - I originally, incorrectly, included the name attribute as well. The name attribute should be the same in a radio group.]

The code behind is checking down a list - like reading left-to-right - and because you have two common conventions, it's reading both, taking the last one, overwriting and giving you the last value.

Change the id's to be unique it will solve your problem.

edited Apr 01 '16 at 05:52

answered Mar 31 '16 at 23:56

wahwahwah

3,254
1
21
40

2

That's not the problem - radio buttons HAVE the same name, and the one that is selected is the value that gets sent on submission.... – random_user_name Mar 31 '16 at 23:56
@cale_b My understanding is that form binding is based on name and id. Because the same combination is being used in all inputs, the last value is being taken – wahwahwah Mar 31 '16 at 23:58
1

@wahwahwah Not in the case of radio buttons. Buttons with the same name are part of a group, you can only select one from the group, and the selected one's value is sent in the form data. – Barmar Apr 01 '16 at 00:00
@Bamar - ok, it seems i was wrong about the names being the same. The id's should be unique, though - and maybe im just ignorant - but that might be the source of the problem. Is it too early to tell because there's no jquery posted? Either way, I'll delete my answer. – wahwahwah Apr 01 '16 at 00:05
there is no need to delete answer, same id's on one page may have caused this, I didn't check for solution but you should definitely NOT use multiple ids with same name on same page. Here's link to some old question regarding that: http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme – pegla Apr 01 '16 at 00:07
@pegla - You can't serialize the form the way the OP is trying to - and i should have started there. Also, it could be an issue with the jQuery code that's not posted. – wahwahwah Apr 01 '16 at 00:31
@wahwahwah @pegla - I've updated my post to include jQuery. However, I don't think having the `name` and `id` being the same is the problem. As I stated in my OP, the last field, RELIABILITY, also have identical `id` and `name`, however this field works, whereas the other fields, which also have identical `id` and `name` don't. – Shirley Dodson Apr 01 '16 at 14:18

Why are my HTML Radio Buttons checking the last option regardless of what option is selected?

1 Answers1