I have been stuck on this issue for a while now and none of the solutions I try really work. This is what I need: The user fills out a form with textboxes, checkboxes and a dropdown-menu. Once the user clicks "submit", a summary of all the input should be shown (either on a new page or at least in a new div so I can hide it until the form has been submitted).
This is the form (I left out some of the input fields):
<form id="myForm">
<div class="part1">
<p><label for="vorname">Vorname:</label>
<input type="text" id="vorname" />
</p>
<label for="nachname">Nachname:</label>
<input type="text" id="nachname" />
<p>
<label for="strasse">Strasse und Hausnummer:</label>
<input type="text" id="strasse" />
</p>
<p>
<ul class="artikel">
<li><input type="checkbox" id="checkbox1" value="jacken" /><label
for="jacken">Jacken</label</li>
<li>
<input type="checkbox" id="checkbox2" value="hemden" /><label
for="hemden">Hemden</label ></li>
<label for="gebiet">Wählen Sie ein Krisengebiet aus:</label>
<select id="optionen">
<option value="option1">Syrien</option>
<option value="option2">Ukraine</option><br>
<input type="submit" value="Absenden" onclick="showSummary(); return false">
</div>
</form>
And this is the JS:
function showSummary() {
var vorname = document.getElementById("vorname").value;
var nachname = document.getElementById("nachname").value;
var strasse = document.getElementById("strasse").value;
var zusammenfassung = "Vorname: " + vorname + "<br>" +
"Nachname: " + nachname + "<br>" +
"Straße: " + strasse + "<br>"
var checkbox1 = document.getElementById("checkbox1").checked;
var checkbox2 = document.getElementById("checkbox2").checked;
var optionen = document.getElementById("optionen").value;
document.getElementById("zusammenfassung").innerHTML = zusammenfassung;
}
You missed the div which have id= zusammenfassung, So add this tag <div id="zusammenfassung" >< /div> after form.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form id="myForm">
<div class="part1">
<p>
<label for="vorname">Vorname:</label>
<input type="text" id="vorname" />
</p>
<p>
<label for="nachname">Nachname:</label>
<input type="text" id="nachname" />
</p>
<p>
<label for="strasse">Strasse und Hausnummer:</label>
<input type="text" id="strasse" />
</p>
<p>
<label for="jacken">Jacken</label>
<input type="checkbox" id="checkbox1" value="jacken" />
</p>
<p>
<label for="hemden">Hemden</label>
<input type="checkbox" id="checkbox2" value="hemden" />
</p>
<p>
<label for="gebiet">Wählen Sie ein Krisengebiet aus:</label>
<select id="optionen">
<option value="option1">Syrien</option>
<option value="option2">Ukraine</option>
</select>
</p>
<p>
<input type="submit" value="Absenden" onclick="showSummary(); return false" />
</p>
</div>
</form>
<div id="zusammenfassung"></div>
<script>
function showSummary() {
var vorname = document.getElementById("vorname").value;
var nachname = document.getElementById("nachname").value;
var strasse = document.getElementById("strasse").value;
var checkbox1 = document.getElementById("checkbox1").checked;
var checkbox2 = document.getElementById("checkbox2").checked;
var optionen = document.getElementById("optionen").value;
var zusammenfassung =
"Vorname: " + vorname + "<br>" + "Nachname: " + nachname + "<br>" + "Straße: " + strasse + "<br>" + "checkbox1:" + checkbox1 + "<br>" + "checkbox1:" + checkbox1 + "<br>" + "Krisengebiet: " + optionen + "<br>";
document.getElementById("zusammenfassung").innerHTML = zusammenfassung;
}
</script>
</body>
</html>
and I also added code for other options. Please Run Snippets below