How do I pass a JavaScript array with radio options to an another PHP file?

Question

I have made an online examination portal where questions are coming from the database using php and mysqli. I am loading those questions on the page using ajax by an onclick event. In the onclick function I have made an array which is storing the checked radio options by the users and loads the next Question.

In the last question button with onclick event which is save and next becomes hidden and a submit button appears which should take the radio option of that question,push it into the array and goes to the check.php file.I have completed every thing except the submit part where i cant insert the radio option in the array and send it to the php file.I have used json.stringify but it is not working.Any other method i should try? Please help.

Here is the whole HTML code:-

    <h3 class="header">ONLINE EXAM SOFTWARE</h3>

        <div style="float:right;">
            <p>welcome <?php echo $_SESSION['userUId']; ?> <br>Time Left</p>
            <span id="Countdown"></span><br>
            <div class="div5">
            <p>You are viewing <strong>English Language</strong> section</p><br>

            <p>Question Palette:</p>
            <div class="container">
            <div>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(1)" style="margin-right:16px">1</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(2)" style="margin-right:16px">2</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(3)" style="margin-right:16px">3</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(4)" style="margin-right:16px">4</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(5)" style="margin-right:16px">5</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(6)" style="margin-right:16px">6</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom"   onclick="updateQuestion(7)" style="margin-right:16px">7</button>
                <button type="button" class="btn btn-info custom"   onclick="updateQuestion(8)" style="margin-right:16px">8</button>
                <button type="button" class="btn btn-info custom"   onclick="updateQuestion(9)" style="margin-right:16px">9</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(10)" style="margin-right:16px">10</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(11)" style="margin-right:16px">11</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(12)" style="margin-right:16px">12</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(13)" style="margin-right:16px">13</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(14)" style="margin-right:16px">14</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(15)" style="margin-right:16px">15</button>
            </div><br>
            </div><br><br>
            Legend:<br>
            <div>
                <button type="button" class="btn btn-success btn-md"></button>Answered
                <button type="button" class="btn btn-danger btn-md" style="margin-left:16px"></button>Not Answered  
            </div><br>
            <div><button type="button" class="btn btn-warning btn-md"></button>Marked
                <button type="button" class="btn btn-info btn-md" style="margin-left:16px"></button>Not visited
                </div><br>
                <div>
                <button type="button" class="btn btn-info btn-sm">Profile</button>
                <button type="button" class="btn btn-info btn-sm">Question Paper</button>
            </div><br>
            <div>   
                <button type="button" class="btn btn-info btn-sm">Instruction</button>
                <button type="Submit" class="btn btn-info btn-sm">Submit</button>
            </div>
            </div>
        </div>
        <div class="div1">  
        <h4>Group</h4>
            <button type="button" class="btn btn-primary active">GROUP 1</button>
        </div>


        <div class="div2">
        <h5><strong>SECTIONS</strong></h5>  
            <button type="button" class="btn btn-primary active">English Language</button>
            <button type="button" class="btn btn-primary disabled">Numerical Ability</button>
            <button type="button" class="btn btn-primary disabled">Reasoning Ability</button>
        </div><br>
        <div class="div3">
            <p><b>Question type</b>:single<b>|</b><b>Marks</b>:<span id="one">1:00</span>|<b>Neg Marks</b>:<span id="another">0.25</span></p>
            <p style="position:absolute;top:10px;right:30px">Elapsed Time: <span id="countdown">1</span>
            seconds</p>
        </div><br>
        <div class="div4">
            <strong>Questions</strong><br>
            <div style="position:absolute;top:10px;right:10px">
            <div class="dropdown">view in:
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Language
            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">English</a></li>
            <li><a href="#">Hindi</a></li>
            <li><a href="#">Latin</a></li>
        </ul>
        </div>
        </div>
        <div class="div7">
            <div id="questBox">
        <?php 
            $sql = "SELECT * FROM questionpaper where qno= 1";
            $query = mysqli_query($conn, $sql);

            if($rows = mysqli_fetch_array($query)){ ?>
                    <span id="qno"><?php echo $rows['QNo'];?></span>
                    <p><?php
                    echo $rows['Question'];
                    $_SESSION['QNO'] = $rows['QNo'];
                    $l= $_SESSION['QNO']
                    ?></p>
                    <form>
                        <input type="radio" name="op" value="<?php echo $rows['opA']; ?>">A.<?php echo $rows['opA']; ?><br>
                        <input type="radio" name="op" value="<?php echo $rows['opB']; ?>">B.<?php echo $rows['opB']; ?><br>
                        <input type="radio" name="op" value="<?php echo $rows['opC']; ?>">C.<?php echo $rows['opC']; ?><br>
                        <input type="radio" name="op" value="<?php echo $rows['opD']; ?>">D.<?php echo $rows['opD']; ?><br>
                    </form>
            <?php }  ?> 
        </div>
        </div>

<button type="button" class="btn btn-info btn-md" id="mark" onclick="loadNextQues(1)">Mark for Review & Next</button>
            <button type="button" class="btn btn-info btn-md">Clear Response</button>
            <button type="submit" class="btn btn-info btn-md" id="save" style="position:absolute;right:20px;bottom:35px" onclick="loadNextQues(0)">Save and Next</button>
            <form action="check.php">
            <button type='submit' class="btn btn-info btn-md" id="water" style="visibility:hidden;position:absolute;right:20px;bottom:35px" onclick="Checkanswers()">submit</button>

Here is the whole javscript code:-

quesno=1;

function updateQuestion(q){
    quesno=q;
    console.log(quesno);
    url="http://localhost/assignments/load-questions.php?qno="+quesno;
    $.get(url,function(data,status){
        response=JSON.parse(data);
        console.log(response);
        var quest="<p>"+response.qno+" "+response.question+"</p>";
        quest+="<form>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opA +"'>A."+response.opA+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opB +"'>B."+response.opB+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opC +"'>C."+response.opC+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opD +"'>D."+response.opD+"<br>";
        quest+="</form>";
        document.getElementById("questBox").innerHTML=quest;
    });
    if(quesno == 15){
        document.getElementById("mark").style.visibility = 'hidden';
        document.getElementById("save").style.visibility = 'hidden';
        document.getElementById("water").style.visibility = 'visible';

    }
    else{
        document.getElementById("mark").style.visibility = 'visible';
        document.getElementById("save").style.visibility = 'visible';
        document.getElementById("water").style.visibility = 'hidden';
    }

}

var arr = new Array();
    function loadNextQues(flag){
        quesno++;

    var Selected = document.querySelectorAll('[name="op"]:checked');
    if (Selected != null) {
    Selected.forEach(function(radio) {
    arr.push(radio.value);
    });

    }
    console.log(arr);

    if(flag==1){
        //add css to the button for review
    }
    else{
        //add css for the button as answered
    }
        url="http://localhost/assignments/load-questions.php?qno="+quesno;
    $.get(url,function(data,status){
        response=JSON.parse(data);
        console.log(response);
        var quest="<p>"+response.qno+" "+response.question+"</p>";
        quest+="<form>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opA +"'>A."+response.opA+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opB +"'>B."+response.opB+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opC +"'>C."+response.opC+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opD +"'>D."+response.opD+"<br>";
        quest+="</form>";
        document.getElementById("questBox").innerHTML=quest;
    });

    if(quesno == 15){
        document.getElementById("mark").style.visibility = 'hidden';
        document.getElementById("save").style.visibility = 'hidden';
document.getElementById("water").style.visibility = 'visible';
    }

}

function Checkanswers(){
    var Selected = document.querySelectorAll('[name="op"]:checked');
    if (Selected != null) {
    Selected.forEach(function(radio) {
    arr.push(radio.value);
    });

    }
    $.post('check.php', {
    data: arr
    }, function(response) {
    console.log(response);
    });

}

Here is the PHP code:-

<?php
if(isset($_POST)){
    if(isset($_POST['data'])){
    $answers = $_POST['data'];
    echo $answers;
}}
?>

What is not working in detail? What is the expected answer and which answer are you getting at the moment? And welcome to StackOverflow! — Johannes, Apr 12 '19 at 21:33
The issue is most likely around giving `data: array`, which it appears you are not doing any sort of json translation or expecting it to be json, so I would imagine jQuery isn't going to be happy trying to turn that array into key value pairs. — Taplar, Apr 12 '19 at 21:40
Sometimes it helps to break the problem down into smaller chunks. Perhaps if you tried making a JSfiddle that included some checkboxes, pushed their values to an array, and showed the response value, it may help diagnose why post/JSON isn't working for you. — Dpeif, Apr 12 '19 at 21:41
Maybe this is what you need: [looping over an inputs array](https://stackoverflow.com/questions/18538227/how-to-loop-through-an-array-of-inputs-in-a-form#18538255). By adding brackets to the name of radio buttons belonging to a group (like `name="test1[]"`), you can easily handle these as an array in PHP. — , Apr 12 '19 at 22:01
Thank you all for your interest in my question but could you please be more in detail where and what should i change in my code.Actually i want to fetch the radio options of the last question clicked by the user and push it inside my empty array then send that array to the php file where it will be checked with the answer given in the database.I really want to know how do you send the above array to a another php file? — kaunish roy, Apr 13 '19 at 00:39
Because it s a js issue, could you put your whole html/js code in a fiddle ? https://jsfiddle.net/user/signup/ OR provide your whole html code ? — sylvain, Apr 13 '19 at 04:34
Okay i can provide the whole HTML code and js code. I would edit the above right now.Please look into it. — kaunish roy, Apr 13 '19 at 12:05

How do I pass a JavaScript array with radio options to an another PHP file?

0 Answers0