модуль для оценки изображений с помощью радио-кнопок, Joomla / PHP

Question

Форма должна показывать изображение, пусть кто-нибудь оценит его, а затем сохранит информацию. Однако, когда я нажимаю кнопку отправки, ничего не происходит. если я изменю рейтинг на текстовое поле, в котором пользователь вводит число, оно работает отлично, с переключателями он вообще перестает работать, и я не могу понять, почему!

<?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

Это происходит потому, что вы не можете получить доступ к выбранному значению радиокнопки, используя form.numbervote.value, и оно возвращает undefined.Однако вы можете получить все значения радиокнопки, используя document.rateForm.elements.numbervote, а затем перебрать значения, чтобы получить отмеченный переключатель.Ниже приведен рабочий код: -

//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();
}

}

Вы можете проверить Как получить значение переключателя .

Иногда действительно раздражает, когда простые вещи не работают, как мы ожидаем.Вы увидите много таких вещей, используя простой JavaScript и должны быть осторожны.В таких случаях используйте такие функции, как getCheckedRadio().