Stop Submit button clearing field

Nah… I wouldn’t like the answers to be visible in the source code, because if all the answers became ‘public’, I’d probably want
to change the test questions regularly, whereas now I can just keep using the same test. Not that many users would think of checking the souce
code for answers, but anyway… Thanks for the suggestion.
Actually I did get reasonably near doing what I wanted - after clicking on submit, the user would see the answers marked correct or incorrect, but the dropdown menus
would all become blank (Submit, having “erased” (refreshed) the answers). I could always just type the “erased” answers, maybe just before the “correct” /“incorrect” ticks - not ideal - I would have preferred that the user, after clicking Submit, could see all the questions just like before starting the test, but now with the “correct” / “incorrect” ticks, and the drop down boxes still showing the original selected answers.
I fact, I was happy with my own particular workaround (I think based on the code at the start of this thread) until I saw another site which was very impressive in the way the user could easily redo incorrect answers, without having to click “page back”. I assume that site is possibly javascript. I might see if can find out when I see it again (the next time I see the person with the site password). Anyway, I assume the bottom line is that any javascript solution would reveal the answers in the source code - a good reason to prefer php ;o) But that javascript test that you suggest looks very good, and I’m sure would do the job perfectly, albeit with the answers available in source code…

Hi,

Denny told you how to do this already:
With a pure PHP solution, you would retrieve the answers from the $_POST array, evaluate them and echo “selected” in the correct place.

e.g. (pseudo code)

$answer1 = $_POST['question1'];

...

<select>
  <option value="A" <php? if($answer1=='A'){echo 'selected'} ?>>Answer A</option>  
  <option value="B" <php? if($answer1=='B'){echo 'selected'} ?>>Answer B</option>
  <option value="C" <php? if($answer1=='C'){echo 'selected'} ?>>Answer C</option>
  <option value="D" <php? if($answer1=='D'){echo 'selected'} ?>>Answer D</option>
</select>

Not necessarily. I was just trying to make my previous example simple.
What I would then do, is this:
Have the form fire off an AJAX request to a PHP script when it is submitted.
In the PHP script you could evaluate the answers, then return an array corresponding to right/wrong for each question.
Then with JS, iterate over the response and add a tick/cross correspondingly.
The user doesn’t see a page refresh, the page feels responsive and snappy and the answer’s aren’t visible anywhere.

This is personally, the way I would go about this.
I would then add a second-tier of server-side validation, so that those people without JavaScript can still use the site.

HTH

Ok, thanks for that. Actually, thinking again, it wouldn’t be a big deal if the answers were visible in the source code since, in this case, it’s just for making exercises as opposed to a test of the users’ level. Nevertheless, i like the way php code is “invisible”. I appreciate the help!

As you probably gather, I’m not a very proficient with php. I have been trying to implement
that code you posted:


$answer1 = $_POST['question1']; 

... 

<select> 
  <option value="A" <php? if($answer1=='A'){echo 'selected'} ?>>Answer A</option>   
  <option value="B" <php? if($answer1=='B'){echo 'selected'} ?>>Answer B</option> 
  <option value="C" <php? if($answer1=='C'){echo 'selected'} ?>>Answer C</option> 
  <option value="D" <php? if($answer1=='D'){echo 'selected'} ?>>Answer D</option> 
</select> 

And unfortunately I can’t get it to work in my project. Do you think you could help me to
implement it? <php? (in the above code) looks strange to me. Should it not be <?php ?

Or could you recommend a tutorial that would be specific to this kind of coding?

Thanks

It’s:

<?php your php code here ?>

Indeed. A typo :blush:

It would be a good idea of you posted the code for the whole form, not just a snippet.

Sure!

So you have a basic form:

index.php:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My quiz</title>
  </head>
  
  <body>
    <form action="" method="post">
      <p>Where does the Queen live?</p>
      <select name="question1">
        <option>Choose answer</option>
        <option value="a">New York</option>
        <option value="b">London</option>
        <option value="c">Dehli</option>
        <option value="d">My House</option>
      </select>
      
      <p><input type="submit"></p>
    </form>
  </body>
</html>

This form, when submitted, will post the form data back to itself.
However, when you do this, the page will be reloaded and the form elements (the select in this case) will be reset to their original values.

What we need to do to avoid this, is to catch the form data before displaying the form and then set the selected value of the select element accordingly.
The only caveat is that we don’t want to do this when the form first renders, as the user will have input no data.
We can get around this by adding a hidden input field.

<?php
if (isset($_POST['submitted'])){
	
	// The form has been submitted
	// We can do stuff here
}
?>

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My quiz</title>
  </head>
  
  <body>
    <form action="" method="post">
      <p>Where does the Queen live?</p>
      <select name="question1">
        <option>Choose answer</option>
        <option value="a">New York</option>
        <option value="b">London</option>
        <option value="c">Dehli</option>
        <option value="d">My House</option>
      </select>
      <input type="hidden" name="submitted" value="1">

      <p><input type="submit"></p>
    </form>
  </body>
</html>

Now we are in a position to retrieve whatever the user submitted from the $_POST array.

$answer1 = $_POST['question1'];

We can then use that value to echo the selected attribute accordingly:

<option value="a" <?php if($answer1=='a'){echo 'selected';} ?>>New York</option>   
<option value="b" <?php if($answer1=='b'){echo 'selected';} ?>>London</option> 
<option value="c" <?php if($answer1=='c'){echo 'selected';} ?>>Dehli</option> 
<option value="d" <?php if($answer1=='d'){echo 'selected';} ?>>My House</option>

We will also have to declare the variable $answer1, otherwise this will throw an error when the formfirst renders.

Here’s the complete code:

<?php
$answer1 = '';

if (isset($_POST['submitted'])){
  $answer1 = $_POST['question1'];
  echo "<p>You chose answer " . $answer1 . "</p>";
}
?>

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My quiz</title>
  </head>
  
  <body>
    <form action="" method="post">
      <p>Where does the Queen live?</p>
      <select name="question1">
        <option>Choose answer</option>
        <option value="a" <?php if($answer1=='a'){echo 'selected';} ?>>New York</option>   
        <option value="b" <?php if($answer1=='b'){echo 'selected';} ?>>London</option> 
        <option value="c" <?php if($answer1=='c'){echo 'selected';} ?>>Dehli</option> 
        <option value="d" <?php if($answer1=='d'){echo 'selected';} ?>>My House</option> 
      </select>
      <input type="hidden" name="submitted" value="1">

      <p><input type="submit"></p>
    </form>
  </body>
</html>

I hope that helps you somewhat.
By way of a disclaimer, I am no PHP master, so this is only meant to demonstrate a principle.
It should work ok on a single page with a few questions, but as soon as your site grows, it would be better to adopt a more maintainable approach (such as using controllers and views).

Also, now that we have some code to work with, Denny might have some suggestions for improvement.

You don’t need the hidden field. Use the $_SERVER variable instead. On first entry,

$_SERVER[‘REQUEST_METHOD’] == “GET”

on entry using the Submit button

$_SERVER[‘REQUEST_METHOD’] == “POST”

<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
	
	// The form has been submitted
	// We can do stuff here
}
?>

Good tip. I didn’t know you could do that.
Thanks :slight_smile:

Thanks for all that! I’ll let you know how it goes!

Hi again, sorry I’ve been a bit focused on other things lately…

I tried the suggested code but I can’t get it to do exactly what I want. When I select the correct answer ‘B’ in the below code,

I get an “ECHO” that corresponds to

 elseif  ($_POST['question1'] !== "B") 

This is the complete code


  <?php
$answer1 = '';

if ($_SERVER['REQUEST_METHOD'] == "POST"){
  $answer1 = $_POST['question1'];

 } 
?>

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My quiz</title>
  </head>
  
  <body>
  
<form method="post">
 
<p>1. &nbsp;
Mary &nbsp; 
<SELECT name="question1">
<OPTION value=na>
        <option value="a" <?php if($answer1=='a'){echo 'selected';} ?>>tell</option>   
        <option value="b" <?php if($answer1=='b'){echo 'selected';} ?>>said</option> 
        <option value="c" <?php if($answer1=='c'){echo 'selected';} ?>>told</option> 
        <option value="d" <?php if($answer1=='d'){echo 'selected';} ?>>says</option> 

 </SELECT>&nbsp;
that she would be late 


 <?php 
    
    // QUESTION ONE
   
      
     
	if ($_POST['question1'] == "B") {
 echo '  <td style="height:80px; align : middle">&nbsp; 1. </td> <td style="green">Correct!  <br /> </td> </tr><tr>' ;   
 
 }
 elseif  ($_POST['question1'] == "na")  {
   echo '<td>&nbsp; 1.</td><td> Please answer this question <br /></td> </tr><tr>';
 }
  
elseif  ($_POST['question1'] !== "B")  {
    echo '<td>&nbsp; 1.</td><td style="red"> Mary  said  that she would be late. <br /></td> </tr><tr>';
 }

 
 

 ?>
<input type="submit" value="Submit" />
</form>
  </body>
</html> 

  </body>
</html>
 

Thanks for any help.

Hi there,

Instead of !== try !=

Does that help?

Tried that ! = “B” , same result. Actually I think both forms are acceptable (! == and ! =) ?

When I try the code as a “user”, and select the various answers, I get the following echoed results:

“na” “please answer this question”
“A” “Mary said she would be late”
“B” “Mary said she would be late”
“C” “Mary said she would be late”
“D” “Mary said she would be late”

The selected answer does stay in in the dropdown box after submitting.

Basically everything works, except that selecting the correct answer “B” doesn’t echo out the “correct”

Hi,

The option values are all lower case. Try changing (for example) != “B” into != “b”
Apart from that, I’m away from the PC at the moment, so let me know if this doesn’t work and I will have a look later.

Brilliant! The solution was to change to lower case, from != “B”, to !=“b”.

Now, finally, on with adding some nice css styles…

You both have really helped me! Thanks a million!

Right, “B” is not equal to “b”! Glad it works!

No probs :slight_smile:
Glad it works