使用单选按钮，joomla / php评级图像的模块

Question

The form is supposed to show an image, let someone rate it then save the info. However, when I click the submit button nothing happens. if I change the rating to a text box where the user enters a number it works perfectly, with radio buttons it stops working at all and I cant figure out why!

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<script type="text/javascript">

    function trim(s){   
            var i;
            var returnString = "";
            for (i = 0; i < s.length; i++){   
                // Check that current character isn't whitespace.
                var c = s.charAt(i);
                if (c != " ") returnString += c;
            }
         return returnString;
    }
    //check is integer
    function isInteger(s){   
        var i;
        if(trim(s)==''){return false;}
        for (i = 0; i < s.length; i++){   
            var c = s.charAt(i);
            if (((c < "0") || (c > "9"))) return false;
        }
        return true;
    }
    function xmlhttpPost(strURL) {
                            var xmlHttpReqs = false;
                            if (window.XMLHttpRequest) {
                                xmlHttpReqs = new XMLHttpRequest();
                            }else if (window.ActiveXObject) {
                                xmlHttpReqs = new ActiveXObject("Microsoft.XMLHTTP");
                            }
                            xmlHttpReqs.open('POST', strURL, true);
                            xmlHttpReqs.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                            xmlHttpReqs.onreadystatechange = function() {
                                if (xmlHttpReqs.readyState == 4) {

                                    updatepage(xmlHttpReqs.responseText);
                                    setTimeout("window.location = 'index.php'",2000);
                                }
                            }
                            document.getElementById("load").innerHTML ="Loadding...";
                            xmlHttpReqs.send(getquerystring());
                        }
    function getquerystring() {
                            var form     = document.forms['rateForm'];
                            var numbervote = form.numbervote.value ;
                            var name = form.name.value ;
                            var folder = form.folder.value ;
                            qstr = 'w='+escape(numbervote)+'&w1='+escape(name)+'&w2='+escape(folder);
                            return qstr;
                        }
    function chck(){
                            xmlhttpPost("<?php echo JURI::root(); ?>modules/mod_image_ratting/saverate.php");
                        }
                        function updatepage(str){
                            document.getElementById("load").innerHTML =  str;
                            document.getElementById("load").style.visibility = "visible";
                        }
    function submitVote(){
        var form = document.rateForm;
        if(form.numbervote.value==''){
            document.getElementById('numbervoteErr').style.display='block';
            return false;
        }else if(!isInteger(form.numbervote.value)){
            document.getElementById('numbervoteErr').style.display='block';
            return false;
        }else if(form.numbervote.value > 10){
            document.getElementById('numbervoteErr').style.display='block';
            return false;
        }
        else{
            chck();
        }
    }

</script>

<form action="<?php echo JRoute::_( 'index.php' );?>" method="get" name="rateForm" id="rateForm" class="form-validate" >
    <table style="width:100%;border:0px;">
        <tr>
            <td>
                <?php if ($link) : ?>
                <a href="<?php echo $link; ?>" target="_self">
                <?php endif; ?>
                    <?php echo JHTML::_('image', $image->folder.'/resize/'.$image->name, $image->name); ?>
                <?php if ($link) : ?>
                </a>
                <?php endif; ?>
            </td>
        </tr>
        <?php
            //if($image->rates > 0){
                ?>
                <tr>
                    <td>
                        <?php JHTML::_( 'behavior.modal' ); ?>
                        <?php echo $image->rates;?> people liked this photo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="modal" href="index2.php?option=com_imageratting&task=viewrates&file=<?php echo  $image->name;?>&f=<?php echo htmlentities(urlencode($image->folder));?>" style="text-decoration:underline;">View Full Size Image</a>
                    </td>
                </tr>
                <?php
            //}
        ?>
        <tr>
            <td>
                <span>
                    <input type="radio" name="numbervote" value="1" checked /> 1<br />
                    <input type="radio" name="numbervote" value="2" /> 2<br />
                    <input type="radio" name="numbervote" value="3" /> 3<br />
                    <input type="radio" name="numbervote" value="4" /> 4<br />
                    <input type="radio" name="numbervote" value="5" /> 5<br />
                </span>
                <span>
                    <input type="button" value="Rate the image!" onclick="submitVote();"/>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <div id="load" style="color:red;font-size:11px;font-style:italic;"></div>
            </td>
        </tr>
        <tr>
            <td>
                <span style="display:none;color:red;font-size:11px;font-style:italic;" id="numbervoteErr"><?php echo 'Rating must be a number between 0 and 5';?></span>
            </td>
        </tr>

    </table>
    <input type="hidden" name="isSaveRate" value="1" />
    <input type="hidden" name="option" value="com_imageratting" />
    <input type="hidden" name="name" value="<?php echo $image->name; ?>" />
    <input type="hidden" name="folder" value="<?php echo $image->folder; ?>" />
    <input type="hidden" name="task" value="rate" />
</form>

Answer 1

This is happening because you cannot access a radiobutton's selected value using form.numbervote.value and it returns undefined. You can however get all the values of the radiobutton using document.rateForm.elements.numbervote and then looping through the values to get the checked radio button. Following is a working code:-

//Added this function
    function getCheckedRadio(radio_group) 
{
    for (var i = 0; i < radio_group.length; i++) 
    {
        var button = radio_group[i];
        if (button.checked) 
        {
            return button;
        }
    }
    return undefined;
}


//Corrected this function
    function submitVote()
{

var form = document.rateForm;
var checkedButton = getCheckedRadio(document.rateForm.elements.numbervote);
if (checkedButton) 
{
    selectedvalue = checkedButton.value;
}

        if(selectedvalue=='')
    {
    document.getElementById('numbervoteErr').style.display='block';
    return false;
}else if(!isInteger(selectedvalue)){
    document.getElementById('numbervoteErr').style.display='block';
    return false;
}else if(selectedvalue > 10){
    document.getElementById('numbervoteErr').style.display='block';
    return false;
}
else
    {
    chck();
}

}

You can check How to get selected radio button valiue.

It is sometimes really irritating when simple things don't work as we expect. You will see lots of such things using plain javascript and have to be careful. Reuse such functions like getCheckedRadio() in such cases.