I created a simple quiz program using only php and there are 4 different question and radio buttons and when i click any of option then print the value of radio buttons like A or B or C or D I created 4 php variable, assigned the values by $_POST method and i want to print these values by echo. But Something is not being printed Please Help..
1. <style type="text/css"> body { background-color: grey; }
#computer , #politics { cursor: pointer; background:
linear-gradient(to right,blue,#bfbfe0); color: #fff; padding:
0px 0px 0px 5px; border-radius: 5px; width: 100%; }
.computer_qsnans , .politics_qsnans { display: ; }
</style> </head> <body>
<div class="main"> <form method="GET" action="index.php"> <div
id="computer"> <p>
<h1>
Technology
</h1> </p> </div>
<!-- Tecnical --> <div class="computer_qsnans"> <p>
<h4>
1.What is the full form of HTML
<div>
<input type="radio" name="tech_question_1" id="" value="A">
A) High Transparent Markup Laoyality
<input type="radio" name="tech_question_1" id="" value="B">
B) Hyper Text Markup Language
<input type="radio" name="tech_question_1" id="" value="C">
C) Hyper Text Mechanical Language
<input type="radio" name="tech_question_1" id="" value="D">
D) Hidro Terminate Markup Language
</div>
</h4> </p>
<p>
<h4>
2.What is upcoming android version
<div>
<input type="radio" name="tech_question_2" id="" value="A">
A) Pie
<input type="radio" name="tech_question_2" id="" value="B">
B) N
<input type="radio" name="tech_question_2" id="" value="C">
C) L
<input type="radio" name="tech_question_2" id="" value="D">
D) Q
</div>
</h4> </p> </div> <!-- Political -->
<div id="politics"> <p>
<h1>
Political
</h1> </p> </div>
<div class="politics_qsnans"> <p>
<h4>
1.The present Lok Sabha is the
<div>
<input type="radio" name="poli_question_1" id="" value="A">
A) 14th Lok Sabha
<input type="radio" name="poli_question_1" id="" value="B">
B) 15th Lok Sabha
<input type="radio" name="poli_question_1" id="" value="C">
C) 16th Lok Sabha
<input type="radio" name="poli_question_1" id="" value="D">
D) 17th Lok Sabha
</div>
</h4> </p>
<p>
<h4>
2.The minimum age to qualify for election to the Lok Sabha is
<div>
<input type="radio" name="poli_question_2" id="" value="A">
A) 25 years
<input type="radio" name="poli_question_2" id="" value="B">
B) 21 years
<input type="radio" name="poli_question_2" id="" value="C">
C) 18 years
<input type="radio" name="poli_question_2" id="" value="D">
D) 35 years
</div>
</h4> </p> </div>
<input type="submit" name="Submit" name="sbt" id="sbmt"> </form> </div><!--Main div end-->
</body> </html>
<?php if(isset($_GET['sbt'])) {
$answer1_for_qsn1 = $_GET['tech_question_1']; $answer2_for_qsn2 =
$_GET ['tech_question_2']; $answer3_for_qsn3 = $_GET
['poli_question_1']; $answer4_for_qsn4 = $_GET ['poli_question_2'];
echo $answer1_for_qsn1 ; echo $answer2_for_qsn2 ; echo
$answer3_for_qsn3 ; echo $answer4_for_qsn4 ;
}
?>
You are using $_GET, not $_POST
You are declaring name for button twice, so the first name will be the one that is sent with GET.
Fix:
<input type="submit" name="Submit" id="sbmt">
<?php if(isset($_GET['Submit'])) {
This worked for me when copying all your code and testing it.
EDIT: also send form to self since the if statement is in the same document as form.
<form method="GET" action="">
Make your form method POST and get your data with $_POST["tech_question_1"] instead of $_GET $_POST["sbt"] will not exist
<input type="submit" name="Submit" name="sbt" id="sbmt">
You have declared name twice. Thats why its not working
Related
I have an assessment form that has true and false radio button options. I have set the required field, however it is still submitting and proceeding to the results page even if no answer is chosen. What am I missing? Here is the code for the form:
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">Sometimes I feel and experience moments of anger "out of the blue".</div>
<div class="evaluation_answers">
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_1" value="True" required/>
<label class="radio_label" for="question_1">True</label>
</span>
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_2" value="False" />
<label class="radio_label" for="question_2">False</label>
</span>
<input type="radio" style="display: none;" name="question1" id="question1_none" checked="checked" value="" />
</div>
<input type="submit" value="Submit" class="submitbtn" />
</form>
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">Sometimes I feel and experience moments of anger "out of the blue".</div>
<div class="evaluation_answers">
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_1" value="True" required/>
<label class="radio_label" for="question_1">True</label>
</span>
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_2" value="False" />
<label class="radio_label" for="question_2">False</label>
</span>
</div>
<input type="submit" value="Submit" class="submitbtn" />
</form>
Remove the <input> the checked = "checked". You have made a invisible radio button that has already been selected, so the form is not "empty". None of the others will be selected if you do that.
I think you have unnecessarily complicated this
const myForm = document.querySelector('#assessment')
myForm.onsubmit = e =>
{
e.preventDefault()
console.clear()
console.log( Object.fromEntries( new FormData(myForm).entries() ) )
}
myForm.onreset = () =>
{
console.clear()
}
form > div {
margin : 1em
}
.evaluation_answers span {
border : 1px solid grey;
padding : .2em .4em;
}
.evaluation_answers label input {
position : fixed;
opacity : 0;
pointer-events : none;
}
.evaluation_answers label:nth-child(1) > input:checked + span {
background-color : lightgreen;
}
.evaluation_answers label:nth-child(2) > input:checked + span {
background-color : lightcoral;
}
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">
Sometimes I feel and experience moments of anger "out of the blue".
</div>
<div class="evaluation_answers">
<label>
<input type="radio" name="question1" value="True" required>
<span>True</span>
</label>
<label>
<input type="radio" name="question1" value="False">
<span>False</span>
</label>
</div>
<button>submit</button>
<button type="reset">reset</button>
</form>
I am a beginner in PHP. So I am working on a small task in which I want to make a form in which there are MCQS and there is a countdown timer above it of 10 minutes. When the count down timer is up the form should expire and should show the result automatically.
I have made the form as coded below but I don't know what to do so that I can add timer in this code so that the form expires and shows the result of the right selected answers.
<html>
<head>
<title>PHP Quiz</title>
</head>
<body>
<div id="page-wrap">
<h1>Final Quiz for Lip building</h1>
<form action="quiz.php" method="post" id="quiz">
<ol>
<li>
<h3>CSS Stands for...</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) Computer Styled Sections </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) Cascading Style Sheets</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) Crazy Solid Shapes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) None of the above</label>
</div>
</li>
<li>
<h3>Internet Explorer 6 was released in...</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
<label for="question-2-answers-A">A) 2001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
<label for="question-2-answers-B">B) 1998</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
<label for="question-2-answers-C">C) 2006</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
<label for="question-2-answers-D">D) 2003</label>
</div>
</li>
<li>
<h3>SEO Stand for...</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
<label for="question-3-answers-A">A) Secret Enterprise Organizations</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
<label for="question-3-answers-B">B) Special Endowment Opportunity</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
<label for="question-3-answers-C">C) Search Engine Optimization</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) Seals End Olives</label>
</div>
</li>
</ol>
<input type="submit" value="Submit Quiz" />
</form>
</div>
</body>
</html>
You need JavaScript for such behavior, let's say you use the following JS:
window.setTimeout(function() {
document.forms['form_name'].submit();
}, 2000);
form_name should be the name of your form. i.e
<form name = "form_name" ... >
</form>
This will delay the post in milliseconds (2 seconds) and then it should take you to another page where you can show the correct answers.
Fiddle
Is there a way to modify my database-powered quiz so that, if a user doesn't answer one or more questions, clicking the Submit button will trigger an alert? In other words, I want to force users to answer all the questions, even if they just guess. The scoring mechanism doesn't work correctly unless all the questions have a response.
Note that some questions (the last one in this example) may have multiple correct answers. I think all that matters is that at least one checkbox is selected.
<form action="" method="post" id="quiz">
<li id="q9">
<div class="Question">Scientists believe the universe is:</div>
<div class="Answer">
<label class="Wide" for="q9-A"><div class="Radio"><input type="radio" name="q9[]" id="q9-A" value="A" style="display: none;"> A. disappearing</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-B"><div class="Radio"><input type="radio" name="q9[]" id="q9-B" value="B" style="display: none;"> B. expanding</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-C"><div class="Radio"><input type="radio" name="q9[]" id="q9-C" value="C" style="display: none;"> C. contracting</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-D"><div class="Radio"><input type="radio" name="q9[]" id="q9-D" value="D" style="display: none;"> D. becoming bipolar</div></label></div>
</li>
<li id="q10">
<div class="Question">Check each item that can be found in our solar system.</div>
<div class="Answer" style="margin-top: 5px; background: #000; color: #fff; text-align: center;">
<label for="q10-A"><input type="checkbox" name="q10[]" id="q10-A" value="A">planet</label>
<label for="q10-B"><input type="checkbox" name="q10[]" id="q10-B" value="B">asteroid</label>
<label for="q10-C"><input type="checkbox" name="q10[]" id="q10-C" value="C">comet</label>
<label for="q10-D"><input type="checkbox" name="q10[]" id="q10-D" value="D">black hole</label>
<label for="q10-E"><input type="checkbox" name="q10[]" id="q10-E" value="E">neutrino star</label>
<label for="q10-F"><input type="checkbox" name="q10[]" id="q10-F" value="F">quasar</label>
</div>
</li>
</ol>
<input type="hidden" name="PreviousURL" id="url" />
<input type="hidden" name="user_token" value="54f3f5438292e" />
<input type="submit" value="Submit Quiz" />
</form>
Please check the complete solution to your question as below:
<form action="" method="post" id="quiz" onsubmit="return formValidate();">
<li id="q9">
<div class="Question">Scientists believe the universe is:</div>
<div class="Answer">
<label class="Wide" for="q9-A"><div class="Radio"><input type="radio" name="q9[]" id="q9-A" value="A"> A. disappearing</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-B"><div class="Radio"><input type="radio" name="q9[]" id="q9-B" value="B"> B. expanding</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-C"><div class="Radio"><input type="radio" name="q9[]" id="q9-C" value="C"> C. contracting</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-D"><div class="Radio"><input type="radio" name="q9[]" id="q9-D" value="D"> D. becoming bipolar</div></label></div>
</li>
<li id="q10">
<div class="Question">Check each item that can be found in our solar system.</div>
<div class="Answer" style="margin-top: 5px; background: #000; color: #fff; text-align: center;">
<label for="q10-A"><input type="checkbox" name="q10[]" id="q10-A" value="A">planet</label>
<label for="q10-B"><input type="checkbox" name="q10[]" id="q10-B" value="B">asteroid</label>
<label for="q10-C"><input type="checkbox" name="q10[]" id="q10-C" value="C">comet</label>
<label for="q10-D"><input type="checkbox" name="q10[]" id="q10-D" value="D">black hole</label>
<label for="q10-E"><input type="checkbox" name="q10[]" id="q10-E" value="E">neutrino star</label>
<label for="q10-F"><input type="checkbox" name="q10[]" id="q10-F" value="F">quasar</label>
</div>
</li>
</ol>
<input type="hidden" name="PreviousURL" id="url" />
<input type="hidden" name="user_token" value="54f3f5438292e" />
<input type="submit" value="Submit Quiz" />
</form>
<script type="text/javascript">
function formValidate(){
var qno = 2; // Total Questions, say. in your example it's 2 (9 and 10)
var i = 9; // Question No to start with, say. in your example it's 9
var qcount = (i+qno)-1;
for(i; i <= qcount; i++){
qid = 'q'+i+'[]';
var qidElement = document.getElementsByName(qid);
var checkcount = 0;
for(var j=0; j < qidElement.length; ++j){
if(qidElement[j].checked){
++checkcount;
}
}
if(checkcount == 0){
alert("Please select at least one Answer for Question no. "+i);
return false;
}
}
document.getElementById('quiz').submit();
}
</script>
Input values for qno & i in javascript function as per your requirement, as guided by me in the relevant comments beside them.
Let me know if there is any issue. Thanks! :)
If you need to force users to fill all fields you have to use one off those validation methods :
1- Client side: via java script , but user can bypass it by disable java script "not recommended".
2- Server side: user can't disable it , and the code related to your programming language .
3- Mix type: Via Ajax and that is the best choice
Example
A-Check request in server side and return results in JSON type .
B-Process returned data via JavaScript and display results in the form
Check this links will help you so much:
http://www.formget.com/form-validation-using-ajax/
http://www.w3schools.com/php/php_form_validation.asp
I have here a page with iframe. Inside the iframe, it will display all the questions in multiple choice. The problem is that I don't know how to get all the values of the checked radio buttons inside the iframe. The button is in the parent page (I haven't included it yet).
This is the screen capture of my page (questions.php):
This is my iframe code from questions.php:
<div class="question-display test">
<iframe src="questions/frame.php" height="500px" width="100%">
</iframe>
</div>
This is my frame.php (displaying all the questions)
<?php
include('config.php');
$view_questions=mysql_query("SELECT * FROM questions ORDER BY RAND()");
$count=mysql_num_rows($view_questions);
$i=1;
while($row=mysql_fetch_array($view_questions))
{
?>
<div class="questions-contents text-size test" style="margin-left: 10px;">
<p align="justify"><strong><?php echo $i;?>.)</strong> <?php echo $row['QUESTION'];?></p>
</div>
<div class="answer-indent" style="margin-left: 40px; margin-bottom: 20px;">
<label class="radio">
<input type="radio" name="<?php echo $row['QUESTION_NO'];?>" value="1" data-toggle="radio">
<class="color" style="color: gray;"><?php echo $row['ANSWER_1'];?></class="color">
</label>
<label class="radio">
<input type="radio" name="<?php echo $row['QUESTION_NO'];?>" value="2" data-toggle="radio">
<class="color" style="color: gray;"><?php echo $row['ANSWER_2'];?></class="color">
</label>
<label class="radio">
<input type="radio" name="<?php echo $row['QUESTION_NO'];?>" value="3" data-toggle="radio">
<class="color" style="color: gray;"><?php echo $row['ANSWER_3'];?></class="color">
</label>
<label class="radio">
<input type="radio" name="<?php echo $row['QUESTION_NO'];?>" value="4" data-toggle="radio">
<class="color" style="color: gray;"><?php echo $row['ANSWER_4'];?></class="color">
</label>
<label class="radio" style="display: none;" >
<input type="radio" name="<?php echo $row['QUESTION_NO'];?>" value="5" data-toggle="radio" checked>
</label>
</div>
<?php
$i++; }
?>
Before I make my frame.php inserted to iframe from the questions.php page, I have a php codes for checking the answers of the users (the checked radio buttons).
$questions = mysql_query("SELECT * FROM questions");
while($row=mysql_fetch_assoc($questions)){
if($_POST[$row['QUESTION_NO']]==$row["ANSWER"])
{
$score++;
}
elseif($_POST[$row['QUESTION_NO']]==5)
{
$unanswered++;
}
else
{
$wrong_score++;
}
}
Please help me, I'm doing this since yesterday but I didn't get it. I don't know how to do it.
You can give id to your iframe and access its elements.
document.getElementById('frameid').contentWindow.document.getElementById('abc')
Where abc is your radio button element.
Then you can do whatever you want to do with element.
But seriously, you can do the same thing in Div also with proper css.
I think you should give same name to all the checkboxes. And you can allot the question no. for their id
So the form will be
<div class="answer-indent" style="margin-left: 40px; margin-bottom: 20px;">
<label class="radio">
<input type="radio" name="question" id="<?php echo $row['QUESTION_NO'];?>" value="1" data-toggle="radio">
<class="color" style="color: gray;"><?php echo $row['ANSWER_1'];?></class="color">
</label>
<label class="radio">
<input type="radio" name="question" id="<?php echo $row['QUESTION_NO'];?>" value="2" data-toggle="radio">
<class="color" style="color: gray;"><?php echo $row['ANSWER_2'];?></class="color">
</label>
.
.
.
.
</div>
So we can get the checked box values using simple snippet.
showing below
<?php
$values = $_POST['question'];
// optional
foreach ($values as $selected){
echo $selected."<br />";
}
?>
Please try this
the iframe form action should be the iframe parent url
<form action="parenturl.php" method="POST">
When you dont add the action attribute to your form element the default action will
be submitting the form to the current page by GET method, so when you trying to
view the post data in the parent there is nothing to show because the data was posted to the
iframe itself and not to the parent.
so make sure you define the method and and action.
I have the following code :
<div id="choices">
<div>
<input type="radio" name="question-answers" id="question-answers-A" value="A" onclick="this.form.submit();" />
<label for="question-answers-A">$c[0] </label>
</div>
<div>
<input type="radio" name="question-answers" id="question-answers-B" value="B" onclick="this.form.submit();"/>
<label for="question-answers-B">$c[1]</label>
</div>
</div>
The form is submitted when a radio is selected.
Is there a way to do it without javascript? (without onClick)
Thanks.
Why not the traditional submit input ?
<form>
<input type="radio" name="r1">
<input type="radio" name="r2">
<input type="submit" value="send" />
</form>
The form is submitted when a radio is selected.
Javascript is the way to go or plain old html but it will not be submitted on change.
There is no way to detect when a radio button is clicked without using Javascript.
Here's an example of getting it to work without Javascript http://jsfiddle.net/DCHaT/8/
You rely on CSS and labels.
CSS:
button.transparent{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
visiblity:hidden;
border:none;
z-index:2;
background-color:transparent;
}
div.radio{
position:relative;
}
div.radio > label > input[type="radio"]{
position:relative;
z-index:1;
}
Code:
<form action="http://www.yahoo.com" method="GET">
<div class="radio">
<label for="radio_1">
<button type="submit" class="transparent" name="radio" value="1"></button>
<input type="radio" value="1" name="radio" id="radio_1"/>
Radio 1</label>
</div>
<div class="radio">
<label for="radio_2">
<button type="submit" class="transparent" name="radio" value="2"></button>
<input type="radio" value="2" name="radio" id="radio_2"/>
Radio 2</label>
</div>
</form>
You could use php
<div class="field form-inline radio">
<label class="radio" for="txtContact">Preferred Method of Contact</label>
<input class="radio" type="radio" name="contact" value="email" checked /> <span>Email</span>
<input class="radio" type="radio" name="contact" value="phone" /> <span>Phone</span>
</div>
$contact = $_POST['contact']
//Will return either "email" or "phone".
Use two submit buttons, and optionally style them to look like radio buttons. http://jsfiddle.net/trevordixon/FNzhb/3/
<form method="POST">
<button type="submit" name="question-answers" value="A">A</button>
<button type="submit" name="question-answers" value="B">B</button>
</form>
<style>
button {
border: none;
background: none;
padding-left: 10px;
cursor: pointer;
}
button:before {
content: '';
display: block;
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
}
button:active:before { content: '•'; }
</style>