PHP questionnaire strategy
<p>I am designing a questionnaire, the code I've written is a combination of JS and PHP. I have the questions in one page but I want to ask each question on a separate page and the consecutive questions should be asked according to the answer the user select. what is the best strategy to do that? do I need to include SQL as well?
and at the end the answers will be written in a text file
the code I have is:</p>

<pre><code>&lt;?php
if($_POST['formSubmit'] == "Submit")
{
$errorMessage = "";

if(empty($_POST['name']))
{
    $errorMessage .= "&lt;li&gt;You forgot to enter your name!&lt;/li&gt;";
}

$varName = $_POST['name'];
$varLand1 = $_POST['landscape1']; $varLand2 = $_POST['landscape2'];
$varCom = $_POST['comment'];
$varAppx = $_POST['appx'];  
$clim = $_POST['landscape'];
$varMech = $_POST['mechanism'];
$varMechoth = $_POST['mech'];

if(empty($errorMessage)) 
{
    $fs = fopen("$varName.txt" ,"a+");
    fwrite($fs,$varName . "\n" . $varLand1 . ' ' .$varLand2 . "\n" . $clim .    "\n" . $varAppx . "\n" . $varCom . "\n" . $varMech .$varMechoth);
    fclose($fs);

    header("Location: t-y.html");
    exit;
    }
}
?&gt;
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd"&gt; 
&lt;html&gt;
&lt;head&gt;
&lt;script scr="jss.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;title&gt;Questionnaire&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;FONT FACE="Times New RomanPS"&gt;
        &lt;H1&gt;Questionnaire&lt;/H1&gt;
        &lt;P&gt;Please fill out this questionnaire:
             &lt;?php
            if(!empty($errorMessage)) 
            {
                echo("&lt;p&gt;There was an error with your form:&lt;/p&gt;\n");
                echo("&lt;ul&gt;" . $errorMessage . "&lt;/ul&gt;\n");
            } 
         ?&gt;
&lt;form action="index.php" method="post"&gt;

    &lt;p&gt;
    Name&lt;br&gt;
    &lt;input type="text" name="name" maxlength="50" value="&lt;?=$varName;?&gt;" /&gt;
    &lt;/p&gt;
    &lt;ul&gt;
    &lt;p&gt; 1 - Q1?
    &lt;p&gt;&lt;input type="checkbox" name="landscape1" value="urban"&gt; Urban&lt;br&gt;
    &lt;p&gt;&lt;input type="checkbox" name="landscape2" value="non-urban"&gt; non-Urban&lt;br&gt;
    &lt;p&gt; 2 - Q2?&lt;br&gt;
    &lt;input type="radio" name="landscape" value="Dry"&gt; Dry&lt;br&gt;
    &lt;input type="radio" name="landscape" value="Tropical"&gt; Tropical&lt;br&gt;
    &lt;input type="radio" name="landscape" value="Moderate"&gt; Moderate&lt;br&gt;
    &lt;input type="radio" name="landscape" value="Continental"&gt; Continental&lt;br&gt;
    &lt;input type="radio" name="landscape" value="Polar"&gt; Polar&lt;br&gt;
    &lt;p&gt; 3 - Q3? &lt;br&gt;
    &lt;input type="radio" id="mecha" name="mechanism" value="sub"     onclick="hideTextBox1()"/&gt; Subsidence&lt;br&gt;
    &lt;input type="radio" id="mecha" name="mechanism" value="earth" onclick="hideTextBox1()"/&gt; Earthquake&lt;br&gt;
    &lt;input type="radio" id="mecha" name="mechanism" value="volc" onclick="hideTextBox1()"/&gt; Volcanic&lt;br&gt;
    &lt;input type="radio" id="mecha" name="mechanism" value="&lt;?=$varMech;?&gt;" onclick="displayTextBox1()"/&gt; other&lt;br&gt;
    &lt;div id="otherTextBox1" style="display:none;visibility:hidden;"&gt;
    &lt;input type="text" name="mech" maxlength="20" value="&lt;?=$varMech;?&gt;"&gt;
    &lt;/div&gt;

    &lt;p&gt; 4 - Q3?&lt;br&gt;

    &lt;input name="choice" id="choice4" type="radio" value="four" onclick="hideTextBox()"/&gt;&lt;label for="choice4"&gt; No &lt;/label&gt;&lt;br&gt;
            &lt;input name="choice" id="choice5" type="radio" value="other" onclick="displayTextBox()"/&gt;&lt;label for="choice5"&gt; Yes &lt;/label&gt;
    &lt;br/&gt;
    &lt;div id="otherTextBox" style="display:none;visibility:hidden;"&gt;
    [mm/yr]&lt;br&gt;&lt;input type="text" name="appx" maxlength="3" value="&lt;?=$varAppx;?&gt;"&gt;
    &lt;/div&gt;
    &lt;br/&gt;
    &lt;p&gt; 5 - Q4

    &lt;p&gt; 6 - Q5

    &lt;p&gt; 7 - Q6


    &lt;p&gt;
    Comments:&lt;br&gt;
    &lt;textarea type="text" name="comment" cols=48 rows=4 maxlength="1000" value=" &lt;?=$varComment;?&gt;"&gt;&lt;/textarea&gt;
    &lt;/p&gt;                
    &lt;p&gt;&lt;input type="reset"&gt; &lt;input type="submit" name="formSubmit"  value="Submit" /&gt;
    &lt;/ul&gt;
       &lt;script&gt;
    function displayTextBox()
    {
        var objElement = document.getElementById('otherTextBox');
        otherTextBox.style.display = 'block';
        otherTextBox.style.visibility = 'visible';
    }

    function hideTextBox()
    {
        var objElement = document.getElementById('otherTextBox');
        otherTextBox.style.display = 'none';
        otherTextBox.style.visibility = 'hidden';
    }

    function validate()
    {
        var arrElements = document.getElementsByName('choice');
        var objElement;
        var boolContinue = false;
        var objOtherText;

        for(var i=0, _length=arrElements.length; i&lt;_length; i++)
        {
            objElement = arrElements[i];

            if(objElement.checked)
            {
                if(objElement.id == 'choice5')
                {
                    objOtherText = document.getElementById('othertext');

                    if(strTrim(objOtherText.value).length&gt;0)
                    {
                        boolContinue = true;
                        break;
                    }
                }
                else
                {
                    boolContinue = true;
                    break;
                }
            }
        }
        for(var i=0, _length=arrElements1.length; i&lt;_length; i++)
        {
            objElement1 = arrElements1[i];

            if(objElement1.checked)
            {
                if(objElement1.id == 'mecha')
                {
                    objOtherText1 = document.getElementById('othertext');

                    if(strTrim(objOtherText1.value).length&gt;0)
                    {
                        boolContinue = true;
                        break;
                    }
                }
                else
                {
                    boolContinue = true;
                    break;
                }
            }
        }
        if(boolContinue)
        {
            alert('Continue, user completed the information.')
        }
        else
        {
            alert('Ask user to complete the data.')
        }
    }

function displayTextBox1()
    {
    var objElement1 = document.getElementById('otherTextBox1');
        otherTextBox1.style.display = 'block';
        otherTextBox1.style.visibility = 'visible';
    }

    function hideTextBox1()
    {
        var objElement1 = document.getElementById('otherTextBox1');
        otherTextBox1.style.display = 'none';
        otherTextBox1.style.visibility = 'hidden';
    }

    function validate1()
    {
        var arrElements1 = document.getElementsByName('mechanism');
        var objElement1;
        var boolContinue = false;
        var objotherText1;

        for(var i=0, _length=arrElements1.length; i&lt;_length; i++)
        {
            objElement1 = arrElements1[i];

            if(objElement1.checked)
            {
                if(objElement1.id == 'mecha')
                {
                    objOtherText1 = document.getElementById('othertext');

                    if(strTrim(objOtherText1.value).length&gt;0)
                    {
                        boolContinue = true;
                        break;
                    }
                }
                else
                {
                    boolContinue = true;
                    break;
                }
            }
        }
        if(boolContinue)
        {
            alert('Continue, user completed the information.')
        }
        else&lt;?=$varMech;?&gt;
        {
            alert('Ask user to complete the data.')
        }
    }       
    /**
     * Removes all white space characters from the string.
     * 
     * @param: {String} String to trim.
     * 
     * @return {String} Trimed string.
    */
    function strTrim(strTrim) 
    {
        return strTrim.replace(/^\s+|\s+$/g, '');
    }
    &lt;/script&gt;
    &lt;/form&gt;
&lt;/FONT&gt; 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
