getting the text of radio button instead of values

Question

this is the JS

    <SCRIPT type="text/javascript">
    $(function() 
    {   

        var ids = new Array();

        for(var i = 0; i < <?php  echo $numR; ?>; i++)
        {
            ids.push(i);
        }

        function f(place) {
           $("#prod_btn" + place).click(function () {

                var combine = "prod_title" + place;
                var userNameVal = $("#" + combine).val();
                var radVal = $('input:radio[name=prod_rad' + place +']:checked').val();
                $.post( 
                 "cart.php",
                 { uval : userNameVal,
                    rval : radVal },
                 function(data) {
                    $('#show_search2').html(data);
                 }

              );


           });
        }

        for (var i=0; i<ids.length; i++) 
        {

           f(ids[i]);
        }

    });
</SCRIPT>

this is the HTML

while ($i < $numR)
{
$prod_image_id = 'prod_image'.$i.'';
$prod_title_id = 'prod_title'.$i.'';
$prod_priceM_id = 'prod_priceM'.$i.'';
$prod_priceA_id = 'prod_priceA'.$i.'';
$prod_priceH_id = 'prod_priceH'.$i.'';
$prod_priceP_id = 'prod_priceP'.$i.'';
$prod_rad_id = 'prod_rad'.$i.'';
$prod_btn_id = 'prod_btn'.$i.'';

$prodID         = mysql_result($result, $i, "astm_product_ID");
$prodName       = mysql_result($result, $i, "astm_product_name");
$prodPic        = mysql_result($result, $i, "astm_product_image");

$mPrice         = mysql_result($result, $i, "astm_mill_finish_price");
$aPrice         = mysql_result($result, $i, "astm_anodised_price");
$hPrice         = mysql_result($result, $i, "astm_hanolok_price");
$pPrice         = mysql_result($result, $i, "astm_powdercoat_price");

    echo "<li>";
    echo "<DIV id='prod_container'>";
    echo "<DIV id = 'fp1'><center><IMG class = 'imagesize' src='images/fp1.png' id = '$prod_image_id'/></center></DIV>";
    echo "<DIV><p>$prodName<p><input type = 'hidden' id = '$prod_title_id' value = '$prodName' /></DIV>";
    echo "<DIV><input type='radio' value='$mPrice' name='$prod_rad_id'>Mill Finish - Php $mPrice</input></DIV>";
    echo "<DIV><input type='radio' value='$aPrice' name='$prod_rad_id'>Anodised - Php $aPrice</input></DIV>";
    echo "<DIV><input type='radio' value='$hPrice' name='$prod_rad_id'>Hanolok - Php $hPrice</DIV>";
    echo "<DIV><input type='radio' value='$pPrice' name='$prod_rad_id'>Powder Coat - Php $pPrice</input></DIV>";
    echo "<DIV><button type='button' id = '$prod_btn_id' onClick = 'fg_popup_form(\"fg_formContainer\",\"fg_form_InnerContainer\",\"fg_backgroundpopup\");'>Add to Cart</button></DIV>";
    echo "</DIV>";
    echo "</li>";

$i++;
}

The js simply gets the value of the radio button selected and the name of the product. It works fine. My problem is that I also want to get the text of the selected radio button. ".text()" is not working for me and I don't know why. Help Me Thanks! :)

Answer 1

Using a form to access the selected radio button

tl;dr here is a live demo: http://jsfiddle.net/g105b/wchyLcfc/

A really nice trick is how browsers expose the selected radio button of a form, by its name.

Consider this HTML, with a gender choice:

<form id="myForm">
    <label>
        <input type="radio" name="gender" value="m" />
        <span>Male</span>
    </label>

    <label>
        <input type="radio" name="gender" value="f" />
        <span>Female</span>
    </label>

    <label>
        <input type="radio" name="gender" value="o" />
        <span>Other</span>
    </label>
</form>

Because the form has an ID of myForm, in JavaScript you can access the currently selected radio button like this:

var myForm = document.getElementById("myForm");
var selectedRadio = myForm["gender"];

and from this, you can get the value of the radio box, or the text content of the containing label:

selectedRadio.value // m, f or o
selectedRadio.parentElement.textContent // Male, Female or Other

Answer 2

Assign custom Data-* attributes with the text which is to be displayed for the radio button and you can get the text of the radio button using a line of code in jquery as below:

HTML
    <input id="radio4" name="radios1" type="radio" value="4" data-value="radio 4" /> radio 4
    <input id="radio5" name="radios1" type="radio" value="4" data-value="radio 5"/> radio 5

Script:
        $("input[name=radios1]:checked").attr("data-value");

For details on Custom Data-* Attributes, visit : http://www.w3schools.com/tags/att_global_data.asp