Multiphase Form (Whole Form Showing)

Hello All,
I have been developing a theme for my site from scratch and have made a custom template page for it named page-hire.php on there I have a form broken up into divs like this…

<progress id="progressBar" style="width: 100%;" value="0" max="100"></progress>
<form id="multiphase" onsubmit="return false">
<div id="phase1">
    <input id="firstname" name="firstname" type="text" placeholder="Your Firstname">
    <input id="lastname" name="lastname" type="text" placeholder="Your Lastname">
    <input id="email" name="email" type="text" placeholder="Your email">
    <input id="website" name="website" type="text" placeholder="Your Website: https://">
    <button onclick="processPhase1()">Continue</button>
</div>
<div class="clear"></div>
<div id="phase2">
<h3>Think about the budget you have and please be honest</h3>
<select id="budget" name="budget">
    <option value=""></option>ion value="">Please Select Your Budget</option>
    <option value="500to800">￡500 to ￡800</option>
    <option value="800to1500">￡800 to ￡1500</option>
    <option value="1500to2500">￡1500 to ￡2500</option>
    <option value="2500upwards">￡2500 plus</option>
</select>
<button onclick="processPhase2()">Continue</button>
</div>
<div class="clear"></div>

I also have a custom javascript file that I am calling just above the form! in that file i am using this code….

var fname, lname, email, website, budget, type, hosting, hear, webname, achieve, lookof, competitors;
function _(x){
    return document.getElementById(x);
}
function processPhase1(){
    fname = _("firstname").value;
    lname = _("lastname").value;
    email = _("email").value;
    website = _("website").value;
    if(fname.length > 2 && lname.length > 2 && email.length > 2){
        _("phase1").style.display = "none";
        _("phase2").style.display = "block";
        _("progressBar").value = 25;
    } else {
        alert("Please fill in all the fields");
    }
}
function processPhase2(){
    budget = _("budget").value;
    type = _("type").value;
	hosting = _("hosting").value;
    if(budget.length > 0 && type.length > 0 && hosting.length > 0){
        _("phase2").style.display = "none";
        _("phase3").style.display = "block";
        _("progressBar").value = 50;
    } else {
	alert("Please fill in all the fields");
    }
}

You can see that I am using style.display = “none”; & style.display = “block”; To show and hide each div section on the form.
However this is not working on the page. I have used firebug to check it but no errors are showing up there. Also the progress bar is showing up as 100% permanently for some strange reason.
No idea why all this is happening though so any help would be appreciated!
Many thanks.
– Phillip Dews