Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Form output javascript

bewerkt zo 25 jan 2015 in Tutorials & Scripten Posts: 879







Form output van verschillende input elementen met behulp van javascript

Javascript:

<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;
}
}
// selectbox 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 />
Dit Topic is gesloten.