So i'm working on a website on which you can teach newcommers some codes we need to know. This is on the site: A table, within a form, where you have to write in the correct code in an input field at certain fruits, vegetables and bread (supermarkt things..).
So like this: Image - Cucumber - fill in code here
At the end, there is a check if you filled in the right code. But I want the input fields to change color, green if the answer is right and red if the answer is wrong.
This is what i got:
Index.html:
//Above here is the table
<?php
if(isset($_POST['komkommer'])){
/* Include PHP scripts first */
include_once 'phpscripts/plu.php';
include_once 'phpscripts/groentestore.php';
include_once 'phpscripts/functions.php';
/* Call the check functions */
groenteCheck();
}
else {
}
?>
A part of the form with the table (in index.php, loaded from an external php file):
<tr>
<td><img src="image/komkommer.jpg"></td>
<td>Komkommer</td>
<td><input type="text" autocomplete="off" name="komkommer" placeholder="..."></td>
</tr>
<tr>
<td><img src="image/rodekool.jpg"></td>
<td>Rode kool</td>
<td><input type="text" autocomplete="off" name="rodekool" placeholder="..."></td>
</tr>
And a part of the groenteCheck() in functions.php
if($komkommer != $plu_komkommer){
echo '<p>Komkommer was niet juist! Jij voerde '.$komkommer.' in!</p>';
}
if($rodekool != $plu_rodekool){
echo '<p>Rode kool was niet juist! Jij voerde '.$rodekool.' in!</p>';
}
I tried to: 1. Make a PHP variable in index.html called $komkommerCheck and set that to "standard". In the table added this: class=<?php echo '"'.$komkommerCheck.'"';?>>.
Then, in the if else statement, i set: $komkommerCheck = "correct" or $komkommerCheck = "wrong" ('wrong' and 'correct' are 2 classes, that makes the background color either red or green). But as soon as the check is done, the message "'<p>Komkommer was niet juist! Jij voerde '.$komkommer.' in!</p>';"
appears, but the class doesnt get changed in index.php
I'm sorry if this is a bit unclear, but help is very appriciated!
Thank you :)
If you want to change the input color with PHP that is obviously only going to happen server side, meaning after you submit the form. If you want to check to see if the input is correct as they type it, then you will need to be using JavaScript for this. Here is an example for you, up vote please since I'm coding this for you.
http://jsfiddle.net/qhdsk784/1/
JS HERE
$( document ).ready(function() {
$( "#carr" ).keyup(function() {
var get_value = $("#carr").val();
if(get_value == "stephen"){
$("#carr").addClass('green');
}
});
});
HTML HERE
<div>Enter <b>stephen</b> into the input to see change.</div>
<input type="text" name="carr" id="carr"value="">
CSS HERE
input{
color:#fff;
font-weight:bold;
padding:7px;
font-size:16px;
background-color:#FA0000;
}
input.green{
background-color:#479E00;
color:#fff;
font-weight:bold;
}