Radio buttons are not clickable - php

When executed, the radio buttons are not working, which they were when they were introduced without PHP.
Here is my code:
<td><?php echo date('l');?></td>
<?php
while ($meal_num<=4)
{
echo '<td>';
echo $row[$meal_num+2];
echo '<form action="rating.php?hostel='.$hostel.'&meal_type='.$meal_num.'" method="POST"><br><br>';
?>
<span class="radiolabel" >
<input type="radio" name="radio1" id="radio-1" value="1" />
<label for="radio-1">1</label>
<input type="radio" name="radio1" id="radio-2" value="2"/>
<label for="radio-2">2</label>
<input type="radio" name="radio1" id="radio-3" value="3"/>
<label for="radio-3">3</label>
<input type="radio" name="radio1" id="radio-4" value="4"/>
<label for="radio-4">4</label>
<input type="radio" name="radio1" id="radio-5" value="5"/>
<label for="radio-5">5</label>
</span>
<span> <input type="submit" class="submitbutton1" value="OK"></span>
</form>
</td>
<?php
$meal_num=$meal_num+1;
}?>
</tr>
</table>

Probably because your radio inputs are in a while loop, so you recreate multiple sets of radio inputs with the same set of ids.
Try attributing a different value for "id" for each loop that's executed with an increment number.
For example:
$i = 1;
while (blabla) {
echo '<input type="radio" id="radio-'.$i.'" name="radio1" />';
$i++;
}
So the radios from one loop will not interfere with the radios from another loop.
After each radio you put, you increment the number so the id will never be the same (an id should be unique in a page).

Related

PHP Quiz System

I am working on a PHP Quiz System which displays all questions on one page.
The following is my code.
PHP
$getQ = mysqli_query($condb, "select * from questions where eid = '$exam'");
if($getQ){
if(mysqli_num_rows($getQ)==0){
$summaryLink = 'examSummary.php?exam='.$exam;
redirect($summaryLink);
}
Form
<?php while($ans = mysqli_fetch_array($getQ)){ ?>
<div class="ques" id="ques">
<input type="hidden" name="exam" value="<?php echo $exam; ?>">
<input type="hidden" name="question" value="<?php echo $token; ?>">
<input type="hidden" name="qid" id="qid" value="<?php echo $ans['qid'];?>">
<input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">
<p>
<input type="radio" name="answer" value="1" id="answer" onChange="update();">
<label for="<?php echo $ans['option_1'];?>"><?php echo $ans['option_1'];?></label>
</p>
<p>
<input type="radio" name="answer" value="2" id="answer" onChange="update();">
<label for="<?php echo $ans['option_2'];?>"><?php echo $ans['option_2'];?></label>
</p>
<p>
<input type="radio" name="answer" value="3" id="answer" onChange="update();">
<label for="<?php echo $ans['option_3'];?>"><?php echo $ans['option_3'];?></label>
</p>
<p>
<input type="radio" name="answer" value="4" id="answer" onChange="update();">
<label for="<?php echo $ans['option_4'];?>"><?php echo $ans['option_4'];?></label>
</p>
<p>
<input type="radio" name="answer" value="5" id="answer" onChange="update();">
<label for="<?php echo $ans['option_5'];?>"><?php echo $ans['option_5'];?></label>
</p>
<div class="status2"></div>
What I want to do is, once the user select an answer for a questions, the selected option and few other hidden form data (qid, eid, sid) should be passed to updateAnswer.php
updateAnswer.php will update the selected answer to the database.
I tired the following jQuery. But it wont do anything.
<script>
function update() {
var radVal = $("input[type=radio][name=answer]:checked").val();
jQuery.ajax({
url: "updateAnswer.php",
data:'eid='+$("#eid").val()+'&sid='+$("#sid").val()+'&qid='+$("#qid").val()+'&answer='+$(radVal).val(),
type: "POST",
success:function(data){
$(".status2").html(data);
},
error:function (){}
});
}
</script>
The system should pass data to updateAnswer.php when a user clicks on an option(answer).
But with my current code, when a user clicks on an option won't do anything.
So, there are some mistakes in your code, first one is that the id should always be unique, so before your while loop take a variable and initialize it to zero and increment it on every iteration; You can use this variable and append after every id to make it unique. Like so -
<?php
$i = 0;
while(bla bla){
$i++;
?>
<!-- You can also use question id here ↓↓ which should be unique -->
<input type="hidden" name="qid" id="<?php echo "qid".$i; ?>" value="<?php echo $ans['qid'];?>">
<!-- session id will be the same -->
<input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">
<!-- same for others -->
<?php
}
?>
You also need to give this($i or question-id(whichever you choose)) as an attribute to radio buttons to identify which question id we need to get and on update function you need to pass the current checked element, like so -
<input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<!-- same for others -->
I've created a working snippet for your problem(without PHP and AJAX of course). I've given them unique id and values, I'm printing the desired values on the console. I've changed the AJAX code as well, you can use it in your code to check if it works. Comments are mentioned wherever necessary, see if it helps you.
function update(element) {
let answer = $(element).val(); // get the value of checked element
let id = $(element).attr('data-id'); // get id of the radio button clicked
let eid = $('#eid').val(); // exam id will be same for all the questions
let sid = $('#sid').val(); // session id will be same
let qid = $('#qid' + id).val(); // get question id
// send ajax request
/*jQuery.ajax({
url: "updateAnswer.php",
data: 'eid=' + eid + '&sid=' + sid + '&qid=' + qid + '&answer=' + answer,
type: "POST",
success: function(data) {
$('#status' + id).html(data); // show status on the related div
},
error: function() {}
});*/
console.clear();
console.log(`id: ${id}, eid: ${eid}, sid: ${sid}, qid: ${qid}`)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ques" id="ques1">
<input type="hidden" name="exam" value="some_exam" id="some_exam">
<input type="hidden" name="eid" value="some_examid" id="eid">
<!-- question id 1 (use php) -->
<input type="hidden" name="question" id="question1" value="question1">
<input type="hidden" name="qid" id="qid1" value="qid1">
<input type="hidden" name="sid" id="sid" value="some_session">
<p>
<!-- Give question id in data-id attribute (use php) and pass current element in update function -->
<input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="1">
<label>option_1_1</label>
</p>
<p>
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="1">
<label>option_1_2</label>
</p>
<p>
<input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="1">
<label>option_1_3</label>
</p>
<p>
<input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="1">
<label>option_1_4</label>
</p>
<p>
<input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="1">
<label>option_1_5</label>
</p>
<div class="status2" id="status1"></div>
---------------------------------------
<!-- Second question starts (incremet i)-->
---------------------------------------
<div class="ques" id="ques2">
<input type="hidden" name="exam" value="some_exam" id="some_exam">
<input type="hidden" name="eid" value="some_examid" id="eid">
<input type="hidden" name="question" id="question2" value="question1">
<input type="hidden" name="qid" id="qid2" value="qid2">
<input type="hidden" name="sid" id="sid" value="some_session">
<p>
<input type="radio" name="answer" value="option_2_1" class="answer" onChange="update(this);" data-id="2">
<label>option_2_1</label>
</p>
<p>
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="2">
<label>option_2_2</label>
</p>
<p>
<input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="2">
<label>option_2_3</label>
</p>
<p>
<input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="2">
<label>option_2_4</label>
</p>
<p>
<input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="2">
<label>option_2_5</label>
</p>
<div class="status2" id="status2"></div>

PHP radio button not posting correctly

I'm stuck in a bit of a pickle I can't figure out. Any help is appreciated.
I set up an HTML radio table
<div class="radio-group">
<label class="heading">Choose your game</label><br/>
<table>
<tr>
<td>
<input type="radio" name="radio" value="Radio 1"> Radio 1
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio" value="Radio 2"> Radio 2
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio" value="Radio 3"> Radio 3
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio" value="Radio 4"> Radio 4
</td>
</tr>
</table>
</div>
</br>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset"/>
</form>
</div>
My PHP page will POST the correct selection, but loads other stuff it shouldn't. How do I differentiate between the radio selections if there are all the same name? If I name it separately, you can click on every selection.
if (isset($_POST['submit'])) {
if(isset($_POST['radio']))
{echo '<iframe etc etc></iframe>;
}
else{echo '<iframe other></iframe>;}
}
You can check what value was posted and then make your echo statement based on that. Here's an example of two radio buttons in the same group and name
<input type="radio" name="radio" value="1"> Radio 1
<input type="radio" name="radio" value="2"> Radio 2
and here is the PHP to see which one has been submitted
if(isset($_POST['radio'])) {
$value = $_POST['radio'];
if($value == "1") {
echo "SOMETHING HERE FOR VALUE 1";
} elseif($value == "2") {
echo "SOMETHING HERE FOR VALUE 2";
}
}
Notice how the value is set to something simple like an integer, it makes it easier to check it later on and then display the appropriate or desired outcome for that selected button :)

How will I populate value in textarea and radio buttons

I have fetch data from database in $tableRe. Now I have to print values in textarea and also have to check the radio button.
Here is my code,
$sql = "select (address, gender) from stud table";
if($result=mysqli_query($conn,$sql)) {
while($row = mysqli_fetch_array($result)) {
$tableRe[]=$row;
}
}
<form>
Address : <br>
<textarea value="<?php echo $tableRe[0]['address']; ?>"></textarea><br>
Gender : <br>
<input type="radio" value="Male">Male
<input type="radio" value="Female">Female <br>
<input type="submit" value="Save">
</form>
Please help me regarding this. Thanks in advance.
You need to apply condition on checked HTML attribute.
Try this:
<form>
Address : <br>
<textarea><?php echo $tableRe[0]['address']; ?></textarea> <br/>
Gender : <br>
<input type="radio" value="Male" <?php echo $tableRe[0]['gender'] == 'Male' ? 'checked' : ''; ?> >Male
<input type="radio" value="Female" <?php echo $tableRe[0]['gender'] == 'Female' ? 'checked' : ''; ?>>Female <br>
<input type="submit" value="Save">
</form>
Value has to be placed between the openning and closing tags :
<texterea name="whatever">Textarea value goes here</textarea>
To set a radio/checkbox as selected/checked, you need to add to it a "checkded" attribute :
<!-- HTML4 -->
<input type="radio" name="whatever" value="value1" checked="checked" /> Label 1
<input type="radio" name="whatever" value="value2" /> Label 2
<input type="radio" name="whatever" value="value3" /> Label 3
<!-- HTML5 -->
<input type="radio" name="whatever" value="value1" checked /> Label 1
<input type="radio" name="whatever" value="value2" /> Label 2
<input type="radio" name="whatever" value="value3" /> Label 3

How to click radio button in table for handle multiple records?

I am creating a table of class attendance module in which teacher clicks on a radio button in front of student name to mark that if he/she is present,absent or on leave and when we submit the rows are saved in MySQL database.
This is how it looks like:
Problem:
when teacher clicks on radio button the first student attendance got marked and when teacher click on the second student's attendance it also get marked but the marked attendance of the first student get unmarked. The error is teacher can only mark one student attendance at a time but I want to add multiple students attendance in MySQL table .....
And this is my code
code:
<input type="hidden" name="class_id" value="<?php echo $row1['fk_class_id']; ?>" />
<input type="hidden" name="student_id" value="<?php echo $row1['student_id']; ?>" />
<tr>
<td>
<?php echo $row1['first_name'];?>
</td>
<td>
<?php echo $row1['last_name']; ?>
</td>
<td>
<?php echo $row1['gender']; ?>"
</td>
<td>
<input type="radio" name="att" value="P" />P
<input type="radio" name="att" value="A" />A
<input type="radio" name="att" value="L" />L
</td>
</tr>
Each row is required to be treated as independent value, thus you must have the form act in such a way.
<!-- row 1 -->
<input type="radio" name="row1" value="P" />P
<input type="radio" name="row1" value="A" />A
<input type="radio" name="row1" value="L" />L
<!-- row 2 -->
<input type="radio" name="row2" value="P" />P
<input type="radio" name="row2" value="A" />A
<input type="radio" name="row2" value="L" />L
The way that radio buttons behave with one another is through the name attribute.
Rename each group of att buttons based on per row.
you can put an array as the name with the student_id:
<input type="radio" name="att[<?php echo $row1['student_id']; ?>]" value="P" />P
<input type="radio" name="att[<?php echo $row1['student_id']; ?>]" value="A" />A
<input type="radio" name="att[<?php echo $row1['student_id']; ?>]" value="L" />L
the variable $_POST['att'] will be an array with student_ids as keys.
'att' =>
array
'student_1' => string 'P'
'student_2' => string 'A'
'student_3' => string 'L'

creating Dynamic controls in html with different names

I am creating radiobuttons in HTML .I am getting data from SQL Database.I am creating an attendence form in which there will be student name,Present Radio button ,Absent Radio button.
I put the Present and Absent Radio button in a single Group,(so that only one could be clicked.The problem is that I can't create more than one radio group..My code is
<html>
<tr>
<td><?php echo $i;?></td> // Serial Number
<td> <label><?php echo $att['std_name'];?></label></td> //student name
<td><input type="radio" name="std_r[]" id="std_r[]"></td> // for present
<td><input type="radio" name="std_r[]" id="std_c[]"></td> // for absent
<td><input type="hidden" value="<?php echo $att['rollnum'];?>" > </td> //hidden field that will take roll number of student on next page
</tr>
</html>
<?php
I want that for each student there should be seperate group of radio buttons.thats why i want to create buttons with different name.
Anyone who can help me with this
Thanks
I guess what you are asking is there are several students in the same page and each student with his own present/absent option.
You should do something like this:
<input type="radio" name="test[1]" value="present" />
<input type="radio" name="test[1]" value="absent" />
<input type="radio" name="test[2]" value="present" />
<input type="radio" name="test[2]" value="absent" />
<input type="radio" name="test[3]" value="present" />
<input type="radio" name="test[3]" value="absent" />
You may also specific the student_id as index, this will be easier for you do handle in PHP:
<input type="radio" name="test[33888]" value="present" />
<input type="radio" name="test[33888]" value="absent" />
<input type="radio" name="test[90909]" value="present" />
<input type="radio" name="test[90909]" value="absent" />

Categories