Xtremax - Web Design

Well, had to do some prototyping for a NCC website recently.  Was working on a facilities booking page where the form elements had to change based on the type of facilities which the public needed to book.  Hmmm… well, this could be done by manipulating the style of the divs, i.e. display and visibility… in fact, that was how it was done.. till I got to try out JQuery….

Traditional Way of Scripting the dynamic form

<script language="javascript">

function showDiv(){

    var type = document.forms['facilitiesForm'].type.value;
    adventureDiv = document.getElementById(’adventure’);
    trainingDiv = document.getElementById(’training’);
    sportsDiv = document.getElementById(’sports’);
    waterDiv = document.getElementById(’water’);

    adventureDiv.style.visibility = ‘hidden’;
    adventureDiv.style.display = ‘none’;
    trainingDiv.style.visibility = ‘hidden’;
    trainingDiv.style.display = ‘none’;
    sportsDiv.style.visibility = ‘hidden’;
    sportsDiv.style.display = ‘none’;
    waterDiv.style.visibility = ‘hidden’;
    waterDiv.style.display = ‘none’;           
    if(type==’adventure’){
        adventureDiv.style.visibility = ‘visible’;
        adventureDiv.style.display = ‘block’;
    }else if(type==’training’){
        trainingDiv.style.visibility = ‘visible’;
        trainingDiv.style.display = ‘block’;
    }else if(type==’sports’){
        sportsDiv.style.visibility = ‘visible’;
        sportsDiv.style.display = ‘block’;
    }else if(type==’water’){
        waterDiv.style.visibility = ‘visible’;
        waterDiv.style.display = ‘block’;
    }
}

</script>

and it became:

JQuery way of scripting the form

function showDiv(){
    var type = document.forms['facilitiesForm'].type.value;   
    $("#adventure").hide();
    $("#training").hide();
    $("#sports").hide();
    $("#water").hide();   
    if(type==’adventure’){
        $("#adventure").show();
    }else if(type==’training’){
        $("#training").show();
    }else if(type==’sports’){
        $("#sports").show();
    }else if(type==’water’){
        $("#water").show();
    }else{
        $("#adventure").show();
    }
}
$(document).ready(function(){   
    $("#training").hide();
    $("#sports").hide();
    $("#water").hide();
});
</script>