This is what I have so far... the form accepts the user input and submits the information below the "submit" button BUT, I need each information for the output on its own newline. Please help
<script>
function generateInfo(form) {
document.getElementById("info").innerHTML =
form.elements["intro"].value " "
form.elements["first"].value " "
form.elements["last"].value " "
form.elements["phone"].value " "
form.elements["yearofbirth"].value " "
form.elements["email"].value ".";
form.reset();
form.elements["intro"].value
form.elements["first"].focus()
form.elements["last"].disabled = true
form.elements["phone"].value
form.elements["yearofbirth"].value
form.elements["email"].value;
} // end generateInfo
</script>
<body>
<form>
Student Council Registration:
<input type="text" id="intro" value="Spring 2022" readOnly>
<br>
First Name:
<input type="text" id="first" size="15" autofocus
onchange="this.form.elements['last'].disabled=false">
<br>
Last Name:
<input type="text" id="last" size="15" disabled>
<br>
Phone Number:
<input type="number" id="phone" maxLength="10" placeholder="xxx-xxx-xxxx">
<br>
Year Of Birth:
<input type="number" id="yearofbirth" size="4" placeholder="0000">
<br>
Email:
<input type="text" id="email" size="30" placeholder="[email protected]">
<br><br>
<input type="button" value="Submit"
onclick="generateInfo(this.form);">
</form>
<p id="info"></p>
</body>
CodePudding user response:
Add <br>
tags in between all the values you want to print.
CodePudding user response:
function generateInfo(form) {
document.getElementById("info").innerHTML =
form.elements["intro"].value "<br>"
form.elements["first"].value " <br> "
form.elements["last"].value "<br> "
form.elements["phone"].value "<br> "
form.elements["yearofbirth"].value "<br> "
form.elements["email"].value ". <br>";
form.reset();
form.elements["intro"].value
form.elements["first"].focus()
form.elements["last"].disabled = true
form.elements["phone"].value
form.elements["yearofbirth"].value
form.elements["email"].value;
} // end generateInfo
</script>
<body>
<form>
Student Council Registration:
<input type="text" id="intro" value="Spring 2022" readOnly>
<br>
First Name:
<input type="text" id="first" size="15" autofocus
onchange="this.form.elements['last'].disabled=false">
<br>
Last Name:
<input type="text" id="last" size="15" disabled>
<br>
Phone Number:
<input type="number" id="phone" maxLength="10" placeholder="xxx-xxx-xxxx">
<br>
Year Of Birth:
<input type="number" id="yearofbirth" size="4" placeholder="0000">
<br>
Email:
<input type="text" id="email" size="30" placeholder="[email protected]">
<br><br>
<input type="button" value="Submit"
onclick="generateInfo(this.form);">
</form>
<p id="info"></p>
</body>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>