output form elementen javascript

nuet

Ik heb een voorbeeld gemaakt hoe je form elementen kunt uitlezen mbv javascript en kunt ouputten; daar bij normaal inputveld, radio, multiple checkbox en selectbox
Graag even kritisch bekijken en zonodig kritische opmerkingen, misschien kan het efficienter??
De js:

<script>function changeText(){
// hidden fields values (vaste waarden)
var userInputbeforename = document.getElementById('beforename').value;
document.getElementById('output_beforename').innerHTML = userInputbeforename;	
var userInputbeforegender = document.getElementById('beforegender').value;
document.getElementById('output_beforegender').innerHTML = userInputbeforegender;
var userInputbeforefacility = document.getElementById('beforefacility').value;
document.getElementById('output_beforefacility').innerHTML = userInputbeforefacility;
var userInputbeforevakantieland = document.getElementById('beforevakantieland').value;
document.getElementById('output_beforevakantieland').innerHTML = userInputbeforevakantieland;
	
	
// inputveld Naam uitlezen (variabel)	
var userInputname = document.getElementById('name').value;
document.getElementById('output_name').innerHTML = userInputname;

// multiple checkboxes/facilities uitlezen (variabel)
var userInputfacility = Array.prototype.slice.call(document.querySelectorAll(".facility:checked")).map(function(el) {
        return el.value;
    }).join(', '); // comma achter elke waarde
document.getElementById('output_facility').innerHTML = userInputfacility;

// radio man/vrouw uitlezen (variabel)
var userInputgender = document.getElementsByName('gender');
    for (var i = 0, length = userInputgender.length; i < length; i++) {
        if (userInputgender[i].checked) {
            document.getElementById('output_gender').innerHTML = userInputgender[i].value;
            break;
        }
    }
// vakantieland uitlezen (variabel)
var userInputvakantieland = document.getElementById('land').value;
document.getElementById('output_vakantieland').innerHTML = userInputvakantieland;

return false;
	}
</script>

De HTML:

<form method="get" onsubmit="return changeText()">
	<h4>Output van form elementen mbv javascript</h4>
	<!-- waardes van de hidden fields -->
	<input type="hidden" name="beforename" id="beforename" value="Uw naam:" />
	<input type="hidden" name="beforegender" id="beforegender" value="Geslacht:" />
	<input type="hidden" name="beforefacility" id="beforefacility" value="Uw gekozen facilities:" />
	<input type="hidden" name="beforevakantieland" id="beforevakantieland" value="Uw favoriete vakantieland:" />

	
    Naam:<br /> <input type="text" name="name" id="name" />        
    <br /><br />
      Uw geslacht:<br />
    <input type="radio" name="gender" id="male" value="Man" />Man
    <input type="radio" name="gender" id="female" value="Vrouw" />Vrouw<br />
    <br />
    Welke faciliteiten prefereert u in uw accomodatie als u op vakantie bent:<br />
    <input type="checkbox" name="facility" class="facility" value="Zwembad">Zwembad
    <input type="checkbox" name="facility" class="facility" value="Sauna">Sauna
    <input type="checkbox" name="facility" class="facility" value="Fitnessruimte">Fitnessruimte
    <input type="checkbox" name="facility" class="facility" value="Solarium">Solarium
    <input type="checkbox" name="facility" class="facility" value="Airconditioning">Airconditioning<br />
    <br />
  
    Uw meest geliefde vakantieland:<br /> 
    <Select name="land" id="land">
	<option>Kies een land</option>
	<option>Spanje</option>
	<option>Italie</option>
	<option>Griekenland</option>
	<option>Frankrijk</option>
	<option>Duitsland</option>
	<option>Nederland</option>
	</Select>
    <br /><br />
    <input type="submit" style="cursor: pointer;" value="Output" />
</form>

<!-- hier komt de output -->
<h4>Uw gekozen antwoorden worden hieronder weergegeven:</h4>
<span id='output_beforename'></span>
<b id='output_name'></b><br />

<span id='output_beforegender'></span>
<b id='output_gender'></b><br />

<span id='output_beforefacility'></span>
<b id='output_facility'></b><br />

<span id='output_beforevakantieland'></span>
<b id='output_vakantieland'></b><br />

Voorbeeld

vinTage

Ik zou zelf eerder opteren voor ????n functie (ipv *tig variaties maken in de js function)

function blaat (input, output, showHere)
{
    //input is iets met -> this (id, classname, rel, attr, whatever
    //output...duidelijk
    //showHere ophalen uit this.attr of this.id, of this....whatever
}

Dit is natuurlijk de kinderachtigste uitleg die je kan verzinnen, maar als je een functie maakt, dan wil je dat die altijd werkt (evt met params) maar je wilt niet zelf (als newbee) functies aan gaan passen.

Ik ben nogal druk de laatste tijd (bootje) maar na de zomer vakantie ben ik weer into buisness om alle dagen weer fanatiek te (kunnen) devven.

nuet

Offtopic:
@vinTage
Wordt het weer kroatie dit jaar? Vorig jaar had je wat foto's laten zien toen de boot in volle restauratie was, ben benieuwd hoe ie er nu uitziet...

vinTage

Nu is de buitenkant in volle constructie.
Heb een nieuwe spiegel (waar de motor aan hangt) gestoken, ben zelf een benzine tank aan het maken, de boot is bijna kaal geschuurd tot op de orginele gelcoat om er weer een paar nieuwe mooie laagjes op te zetten.
Dan nog wat nieuw ijzerwerk en wat rubbertjes, om dan hopla weer naar Kroatie te gaan (1.5 maand weer :P)

ReneV

Wat een leven, koude maanden wat webdeveloping en warme maanden op de boot, ruilen