Home > Blockchain >  Hi, I am trying to get the user output to display in separate lines. Right now, the output displays
Hi, I am trying to get the user output to display in separate lines. Right now, the output displays

Time:11-15

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>

  • Related