So you may remember me from last week (college student) i'm now trying to get my radio buttons to remember what was entered when the page is refreshed or navigated back to. So i'm using text documents to save the answers which works a dream with everything on my site so far, however i'm having an issue getting them to send the data back to the radio buttons. Anyone know how to do this?
<?php
ob_clean();session_start();
if (isset($_GET['logout'])){
session_destroy();
}
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false) {
header("Location: index.php");
}
//Send Data
$tb1 = $_POST['radio1']."\r\n";
$tb2 = $_POST['radio2']."\r\n";
$tb3 = $_POST['rasio3']."\r\n";
$tb4 = $_POST['radio4']."\r\n";
$tb5 = $_POST['rasio5']."\r\n";
if (isset($_POST['submit'])){
$myFile=fopen("DATA/GIP1_Radio1.txt","w") or exit("Can’t open file!");
fwrite($myFile, $tb1);
fclose($myFile);
$myFile=fopen("DATA/GIP1_Radio2.txt","w") or exit("Can’t open file!");
fwrite($myFile, $tb2);
fclose($myFile);
$myFile=fopen("DATA/GIP1_Radio3.txt","w") or exit("Can’t open file!");
fwrite($myFile, $tb3);
fclose($myFile);
$myFile=fopen("DATA/GIP1_Radio4.txt","w") or exit("Can’t open file!");
fwrite($myFile, $tb4);
fclose($myFile);
$myFile=fopen("DATA/GIP1_Radio5.txt","w") or exit("Can’t open file!");
fwrite($myFile, $tb5);
fclose($myFile);
header( 'Location: http://www.murphy.sulmaxmarketing.com/GeneralImpressionPt2.php' ) ;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Impression Part 1</title>
<link href="CSS/boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS/master.css" rel="stylesheet" type="text/css">
<script src="JAVASCRIPT/respond.min.js"></script>
</head>
<body link="black">
<div class="gridContainer clearfix">
<div id="borderDiv">
<div id="navDiv">
<div id="backNavDiv">
<font color="#0099FF"><p align="left"><b> < Feedback</b></p></font>
</div>
<div id="logoutDiv">
<font color="#0099FF"><p align="right"><b>Logout > </b></p></font>
</div>
</div>
<div id="headerDiv">
<p>General Impression Part 1</p>
</div>
<div id="subHeaderDiv">
<p>CULTURE</p>
</div>
<form action="GeneralImpressionPt1.php" method="post" enctype="multipart/form-data" name"FileForm" id="FileForm">
<label for="FormField"></label>
<p>Is the CDP obvious - You Said / We Did Boards; Feedback Stations; Posters?</p>
<div id="radioBtnDiv">
<input type="radio" name="radio1" value="1"> 1<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio1" value="2"> 2<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio1" value="3"> 3<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio1" value="4"> 4<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio1" value="5"> 5<br>
</div>
<p>Are there any Speak Up Coaches on this site?</p>
<div id="radioBtnDiv">
<input type="radio" name="radio2" value="1"> 1<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio2" value="2" > 2<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio2" value="3"> 3<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio2" value="4"> 4<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio2" value="5"> 5<br>
</div>
<p>Are Focus Leader meetings happening?</p>
<div id="radioBtnDiv">
<input type="radio" name="radio3" value="1"> 1<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio3" value="2"> 2<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio3" value="3"> 3<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio3" value="4"> 4<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio3" value="5"> 5<br>
</div>
<p>Mention the Mental Tools – do people understand them?</p>
<div id="radioBtnDiv">
<input type="radio" name="radio4" value="1"> 1<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio4" value="2"> 2<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio4" value="3" > 3<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio4" value="4" > 4<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio4" value="5" > 5<br>
</div>
<p>Ask what ‘Never Harm’ means to the teams.</p>
<div id="radioBtnDiv">
<input type="radio" name="radio5" value="1"> 1<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio5" value="2"> 2<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio5" value="3"> 3<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio5" value="4"> 4<br>
</div>
<div id="radioBtnDiv">
<input type="radio" name="radio5" value="5"> 5<br>
</div>
<div id="loginBtnDiv">
<input id="submit" name="submit" type="submit" value="Next">
</div>
</form>
</div>
</div>
</body>
</html>
You should retrieve the information on documents and then try to check each radio button if it corresponds to input checked. For example:
if (isset($_POST['submit'])){
...
}else{
$filename = "DATA/GIP1_Radio1.txt";
$handle1 = fopen($filename,"r") or exit("Can’t open file!");
$radio1 = fread($handle, filesize($filename));
fclose($handle);
//The same for all files...
}
And then, in the html part, check if the input is the same as the stored in file:
<input type="radio" name="radio1" value="1" <?php if($radio1 == 1){ echo "checked"; ?>>
<input type="radio" name="radio1" value="2" <?php if($radio1 == 2){ echo "checked"; ?>>
...
Related
I have a form like below and I want to add vaidation for JQuery, I tried using html required attribute but it is not working, help me in this
The code is
//question 1
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
//question 2
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
//question 3
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>
This is the code and In this page the user has to select atleast one option for every question
First you need to name the grouped inputs that are alike the same name in your HTML.
Use .on(change function() then locate the input (element) you're using, $(this) and get its name.
Then we write a conditional to see if it is checked, if so remove any other instances of a check from that <input> names group.
EDIT: Function on each input to check the onchange and then if all instances of your inputs has one checked element we change the disabled attribute to false, unlocking the submit button.
You can add display messages if you like and css to the Jquery code by adding an empty <div id="msg"></div> where you want to display info, then call on the value of that div to place text there depending on the message you wish to convey.
//--> Remove the code below if you do want the user to only select one option per
//--> group and it is okay for them to select multiple options per group...
$(':checkbox').on('change', function() {
var th = $(this),
name = th.prop('name');
if (th.is(':checked')) {
th.attr('checked', 'checked');
$(':checkbox[name="' + name + '"]').not($(this)).prop('checked', false);
}
});
//--> This handles the locking of the submit button
function checkChecked(divId) {
var oneOfEachChecked = false;
$('#' + divId + ' input[type="checkbox"]').each(function() {
if ($(".check_answer1").is(":checked") && $(".check_answer2").is(":checked") && $(".check_answer3").is(":checked")) {
oneOfEachChecked = true;
$('#submit').prop('disabled', false);
$('#mash').show().text(' <--- Mash me now, I am unlocked!').css('background', 'lightgreen');
}
});
if (oneOfEachChecked === false) {
$('#submit').prop('disabled', true);
$('#mash').show().text(' X Sorry no go! X').css('background', '#FA3300');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="divs" id="check_answer1">
//question 1
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer2">
//question 2
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer3">
//question 3
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
</div>
<input id="submit" type="submit" name="submit" value="submit" disabled><span id="mash"></span>
</form>
So I am using a form multiple radio buttons, The purpose is for the user to rate different parts of the site with 10 questions.
The user presses "start rating" button and the 1st question appears, then the 2nd etc.
When he finishes all of the 10 questions a submit button appears.
The problem is that, when I'm trying to retrieve these values on PHP, I get nothing, its like the radio buttons hasn't been pressed at all.
Newbie in HTML.
HTML
<form name="f1" action="rate.php" method="POST">
<!--1η ερώτηση-->
<div class="question_div" id="question_div1">
<center><p class="questiontitle"><b>Ερώτηση 1 από 10</b></p></center>
<p>Νομίζω ότι θα ήθελα να χρησιμοποιώ αυτά τα παιχνίδια συχνά.</p>
<div class="answer_div">
<div class="answer_options">
<label class="opt_label">
<input type="radio" name="input1" id="input1_1" value="1" class="option">
<span class="opt_span"><b>1</b></span>
</label>
<label class="opt_label">
<input type="radio" name="input1" id="input1_2" value="2" class="option">
<span class="opt_span"><b>2</b></span>
</label>
<label class="opt_label">
<input type="radio" name="input1" id="input1_3" value="3" class="option">
<span class="opt_span"><b>3</b></span>
</label>
<label class="opt_label">
<input type="radio" name="input1" id="input1_4" value="4" class="option">
<span class="opt_span"><b>4</b></span>
</label>
<label class="opt_label">
<input type="radio" name="input1" id="input1_5" value="5" class="option">
<span class="opt_span"><b>5</b></span>
</label>
</div>
<div class="answer-options">
<div align="left" style="width:20%;
float:left;
margin-right:30px;">Διαφωνώ απολύτως</div>
<div align="right" style="width:20%;
float:right;
margin-left:30px;">Συμφωνώ απολύτως</div>
</div>
</div>
<button class="nextbtn" type="button" id="btn1" onclick="(function(){
document.getElementById('question_div1').style.display = 'none';
document.getElementById('question_div2').style.display = 'block';
return false;
})();return false;">Επόμενη Ερώτηση</button>
</div>
this is the start of the form and the 1st question, the other questions follow the same architecture.
PHP:
if(!empty($_POST["f1"])){
$q1 = $_POST['input1'];
$q2 = $_POST['input2'];
$q3 = $_POST['input3'];
$q4 = $_POST['input4'];
$q5 = $_POST['input5'];
$q6 = $_POST['input6'];
$q7 = $_POST['input7'];
$q8 = $_POST['input8'];
$q9 = $_POST['input9'];
$q10 = $_POST['input10'];
}
It's because you have the same <input type="radio" name="input1" id="input1_1" value="1" class="option"> with the same name value. Try removing the name a attribute in your <form> and do one radio first and in your php file do this:
HTML
<form method="POST" action='rate.php'>
<div> question </div>
<input type="radio" name="input1">
<input type="submit">
</form>
rate.php
<?php
if(isset($_POST['input1']) {
echo $_POST['input1'];
//do your code here
}
I'm new to php and html and I was wondering, how having a code like below:
<!DOCTYPE html>
<html>
<body>
<form>
<p>Question Number 1</p>
<input type="radio" name="question1" value="A">A<br>
<input type="radio" name="question1" value="B">B<br>
<input type="radio" name="question1" value="C">C<br>
<input type="radio" name="question1" value="D">D
<p>Question Number 2</p>
<input type="radio" name="question2" value="A">A<br>
<input type="radio" name="question2" value="B">B<br>
<input type="radio" name="question2" value="C">C<br>
<input type="radio" name="question2" value="D">D
<p>Question Number 3</p>
<input type="radio" name="question3" value="A">A<br>
<input type="radio" name="question3" value="B">B<br>
<input type="radio" name="question3" value="C">C<br>
<input type="radio" name="question3" value="D">D
<p>Question Number 4</p>
<input type="radio" name="question4" value="A">A<br>
<input type="radio" name="question4" value="B">B<br>
<input type="radio" name="question4" value="C">C<br>
<input type="radio" name="question4" value="D">D
</form>
</body>
</html>
I want to show a question one bye one with button next and with check if
a value is null. What should I use? PHP or Javascript.
$('input[type="radio"]').on('change', function(e) {
$('#'+e.target.name+'').hide();
var nextRadioGroupName = "question" + (parseInt(e.target.name.replace('question', '')) + 1);
$('#'+nextRadioGroupName+'').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form>
<div id = "question1">
<p>Question Number 1</p>
<input type="radio" name="question1" value="A">A<br>
<input type="radio" name="question1" value="B">B<br>
<input type="radio" name="question1" value="C">C<br>
<input type="radio" name="question1" value="D">D
</div>
<div id = "question2" style="display:none">
<p>Question Number 2</p>
<input type="radio" name="question2" value="A">A<br>
<input type="radio" name="question2" value="B">B<br>
<input type="radio" name="question2" value="C">C<br>
<input type="radio" name="question2" value="D">D
</div>
<div id = "question3" style="display:none">
<p>Question Number 3</p>
<input type="radio" name="question3" value="A">A<br>
<input type="radio" name="question3" value="B">B<br>
<input type="radio" name="question3" value="C">C<br>
<input type="radio" name="question3" value="D">D
</div>
<div id = "question4" style="display:none">
<p>Question Number 4</p>
<input type="radio" name="question4" value="A">A<br>
<input type="radio" name="question4" value="B">B<br>
<input type="radio" name="question4" value="C">C<br>
<input type="radio" name="question4" value="D">D
</div>
</form>
Firstly add a div element for per question group to easily show/hide them
Define change event with Jquery and find the next question group as iteration like "question1", "question2" etc.
Then show the next question group
i am working on e-commerce website and in products section i want to give a function to sort product by price range like 100 to 500 but i have no idea to connect html radio button with mysql that on click product get sort on screen.
[enter image description here][1]
This is html code for radio button
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
<ul class="radio">
<li><input type="radio" name="radio" id="r1" value="radio"/>
<label for="radio1">100-500</label></li>
<li><input type="radio" name="radio" id="r2" value="radio2"/>
<label for="radio2">600-1000</label></li>
<li><input type="radio" name="radio" id="r3" value="radio"/>
<label for="radio3">1100-1500</label></li>
<li><input type="radio" name="radio" id="r4" value="radio4"/>
<label for="radio4">1600-2000</label></li>
<li><input type="radio" name="radio" id="r5" value="radio5"/>
<label for="radio5">2100-2500</label></li>
</ul>
</form>
And this php and mysql code
<?php
$results1 = mysqli_query($db,"SELECT product_code, product_name, product_img_name, price FROM products where price> 500 ORDER BY id ASC");
if($results1){
$products_item = '<ul class="products">';
while($obj = $results1->fetch_object())
{
$products_item .= <<<EOT
<li class="product">
<form method="post" action="cart_update.php">
<div class="product-content"><h3>{$obj->product_name}</h3>
<div class="product-thumb"><img height="250px" src="../../img/{$obj->product_img_name}"></div>
<div class="product-info">
Price {$currency}{$obj->price}
<fieldset>
<label>
<span>size</span>
<select name="product_color">
<option value="Black">Medium</option>
<option value="Silver">Small</option>
</select>
</label>
<label>
<span>Quantity</span>
<input type="text" size="2" maxlength="2" name="product_qty" value="1" />
</label>
</fieldset>
<input type="hidden" name="product_code" value="{$obj->product_code}" />
<input type="hidden" name="type" value="add" />
<input type="hidden" name="return_url" value="{$current_url}" />
<div align="center"><button type="submit" class="add_to_cart">Add</button></div>
</div></div>
</form>
</li>
EOT;
}
}
?>
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