单击加载ajax时未检查单选按钮

时间:2017-12-02 08:33:14

标签: javascript php ajax

我有2个文件首先包含单选按钮,必须在页面加载时选择。第二个是使用javascript将单选按钮id传输到第一页的php。

<html>
<head>
<script language="javascript">
function checked_attemped(question_id)
{
    var ajaxRequest;  
    try{
    ajaxRequest = new XMLHttpRequest();

    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    ajaxRequest.onreadystatechange = function(){

            if(ajaxRequest.readyState == 4)
            {
                var x = ajaxRequest.responseText;
                alert(x);// It shows the radio button id (option1) which is transfered from checked_attempted_option.php
                alert(document.getElementById(x)); // But it shows null 
                document.getElementById(x).checked=true; //Nothin Happen
                document.getElementById(option1).checked=true; //This is     working and radio button checked, but above line is not working. I want the     above line work.

        }
    }

    var queryString = "question_id=" + question_id;
ajaxRequest.open("GET", "checked_attempted_option.php" + queryString, true);
    ajaxRequest.send(null); 

}
</script>
</head>
<body>
<script language="javascript">
    window.onload=checked_attemped('1');
</script>
<input name="option1" id="option1" type="radio" value="option1">
</body>
</html>

这是将radiobutton id发送到上述文件的php文件

checked_attempted_option.php

        $question_id=$_GET['question_id'];
        $query="select * from question_attemped where question_id='$question_id'";
        $result=mysql_query($query) or die(mysql_error());
        $row=mysql_fetch_array($result);
        echo $row['answer'];

1 个答案:

答案 0 :(得分:0)

以下内容可能会对如何解决这个问题提供一些帮助 - 似乎工作正常但我还没有测试过任何数据库查找。您可以“按原样”运行此操作,只是为了查看操作中的效果。

<?php

    if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['question_id'] ) ){
        ob_clean();

        $qid=filter_input( INPUT_GET,'question_id',FILTER_SANITIZE_NUMBER_INT );


        /*
            You would do the database lookup here ~ but please investigate
            and start usin `prepared statements` as your code is vulnerable 
            to sql injection attack.


            ie:
            select * from question_attemped where question_id='$qid'

        */




        /* but for demonstration simply send a basic, predefined response */
        echo 'option' . $qid;

        exit();
    }

?>
<html>
    <head>
        <script>
            function checked_attemped(qid){
                var callback=function(r,h){
                    var input=document.getElementById( r );
                        if( input ) input.checked=true;
                };

                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 )callback.call( this, xhr.response, xhr.getAllResponseHeaders() );
                };
                xhr.onerror=function(e){
                    console.log(e);
                };
                xhr.open( 'GET', '?question_id='+qid, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send();
            }
        </script>
    </head>
    <body>
        <script language="javascript">
            window.onload=function(){
                [1,2,3,4,5].forEach(function(i){
                    setTimeout( function(){ checked_attemped(i); }, i * 1000 );
                });
            }
        </script>

        <input name="option1" id="option1" type="radio" value="option1">
        <input name="option2" id="option2" type="radio" value="option2">
        <input name="option3" id="option3" type="radio" value="option3">
        <input name="option4" id="option4" type="radio" value="option4">
        <input name="option5" id="option5" type="radio" value="option5">
    </body>
</html>
相关问题