Reputation: 1956

How to display/print out multiple inputs from a form as a table underneath with JS?

Background:

I have the following form. Once the [verify] button is hit, I can show only 1 "first name". I would like to print out the all the input fields (empty or full) when [verify] is pressed as a table like the form is in.

Research:

JS How to output values from function into HTML table

Questions:

How can I print the inputs of the form as a table like this:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        document.getElementById("verify").style.display = "none"; 
        document.getElementById("committed").style.display = "none"; 
    })
    function onVerify() {
        document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("first_name").value

        document.getElementById("verify").style.display = "block"; 
    }
    function onCommit() {
        document.getElementById("form").style.display = "none"; 
        document.getElementById("verify").style.display = "none";
        document.getElementById("committed").style.display = "block"; 
    }
    function onCancel() {
        document.getElementById("form").style.display = "block";
        document.getElementById("verify").style.display = "none";
        document.getElementById("name").value = ""
    }
</script>


    <style>
        h3 {text-align: center;}
        .right {
            text-align: right;
            margin-right: 1em;
            }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            }
    </style>

</head>

<h3>Personnel Details</h3>
<div class="center" id="form">
	<table>
    <tr>
      <td class="right">
	      <label>Salutation:</label>
      </td>
      <td>
        <select name="gender">
          <option value=""></option>
          <option value="male">Mr.</option>
          <option value="female">Ms.</option>                    
        </select>
      </td>
    </tr>
    <tr>
      <td class="right">
	      <label>First Name:</label>
      </td>
      <td>
    	  <input id="first_name">
      </td>
    </tr>
    <tr>
      <td class="right">
    	  <label>Middle Name:</label>
      </td>
      <td>
          <input id="middle_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Last Name:</label>
      </td>
      <td>
          <input id="last_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Email:</label>
      </td>
      <td>
          <input id="email">
      </td>    
	</tr>    <tr>
      <td class="right">
    	  <label>DOB:</label>
      </td>
      <td>
          <input type="date" name="issue_date" value="" min="1900-01-01" max="2100-12-31">
      </td>    
	</tr>         
    <tr>
      <td  colspan="2" style="text-align:center;">
        <div>
            <button onclick="onVerify()">Verify</button>
        </div>
      </td>
    </tr>
    
    
    
    </table>
</div>
<div id="verify">
    <br>
    <br>
    <div id="verifyName" class="center">
    </div>
    <div class="center">    
      <button  onclick="onCommit()">Commit</button>
      <button  onclick="onCancel()">Cancel</button>
   </div>

</div>
<div id="committed">
    Committed! :)
</div>
</html>

Upvotes: 0

Answers (2)

CanUver

Reputation: 1774

I chose each input with javascript. I took the value values in Input and sent them as innerHtml into the table that I created in html. It's the easiest way you can and can use it. Everything I've just written I've stated in the comment lines.

I added some css properties so that two tables can stand in the same order.That way, even if they're empty, they'll stand in the same line.

In fact, I've added every change and task I've made as a comment line. Good Luck!

h3 {
  text-align: center;
}

.right {
  text-align: right;
  padding-right: 1em;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* I added this because I want two paintings to come down.*/
}

tr> :nth-child(2) {
  /* with this, all the fields will now have a fixed width and will be sorted into two tables.*/
  min-width: 10rem;
}

.verify {
  /* I added this because the column is set to flex-direction for the center class.*/
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>STACKOVERFLOW</title>
</head>


<body>

  <h3>Personnel Details</h3>
  <div class="center" id="form">
    <table>
      <tr>
        <td class="right">
          <label>Salutation:</label>
        </td>
        <td>
          <select name="gender" id="salutation">
            <option value=""></option>
            <option value="male">Mr.</option>
            <option value="female">Ms.</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>First Name:</label>
        </td>
        <td>
          <input id="first_name" type="text">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Middle Name:</label>
        </td>
        <td>
          <input id="middle_name" type="text">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Last Name:</label>
        </td>
        <td>
          <input id="last_name" type="text">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Email:</label>
        </td>
        <td>
          <input id="email" type="email">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>DOB:</label>
        </td>
        <td>
          <input type="date" name="issue_date" value="" min="1900-01-01" max="2100-12-31" id="date">
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center;">
          <div>
            <button onclick="onVerify()">Verify</button>
          </div>
        </td>
      </tr>



    </table>
    <!-- Created -->
    <table id="table-output">
      <!-- Dynamicly Cretaed for javascript -->
    </table>
  </div>

  <div id="verify">
    <br>
    <br>
    <div id="verifyName" class="center">
    </div>
    <div class="verify">
      <!-- Changed center to verify  -->
      <button onclick="onCommit()">Commit</button>
      <button onclick="onCancel()">Cancel</button>
    </div>

  </div>
  <div id="committed">
    Committed! :)
  </div>




  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>



  <script>
    $(document).ready(function() {
      document.getElementById("verify").style.display = "none";
      document.getElementById("committed").style.display = "none";
    })

    function onVerify() {
      document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("first_name").value

      document.getElementById("verify").style.display = "block";
      getAllValues(); //  I'm running this function here because I want to see the table after verify is done.

    }

    function onCommit() {
      document.getElementById("form").style.display = "none";
      document.getElementById("verify").style.display = "none";
      document.getElementById("committed").style.display = "block";
    }

    function onCancel() {
      document.getElementById("form").style.display = "block";
      document.getElementById("verify").style.display = "none";
      document.getElementById("name").value = ""
    }

    //  I take value from all the inputs in my table and send it to another function. I suggest you divide your operations into functions, so that you can be more comfortable when you want to modify them, since they're all in the clear.
    function getAllValues() {
      const salutation = document.getElementById("salutation").value;
      const firstName = document.getElementById("first_name").value;
      const lastName = document.getElementById("last_name").value;
      const middleName = document.getElementById("middle_name").value;
      const email = document.getElementById("email").value;
      const date = document.getElementById("date").value;
      // Formating DATE
      let newDate = date.split("-").reverse().join(".");
      showTable(salutation, firstName, lastName, middleName, email, newDate);
    }


    // this function will select the second table that we have defined on the html side and display on the screen, and place the value values that we have received according to what structure we want.
    function showTable(salutation, firstName, lastName, middleName, email, date)  {
      let table = document.getElementById("table-output");
      table.innerHTML = ` 
       
      <tr>
        <td class="right">
          <label>Salutation:</label>
        </td>
        <td>
            ${salutation}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>First Name:</label>
        </td>
        <td>
          ${firstName}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Middle Name:</label>
        </td>
        <td>
          ${lastName}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Last Name:</label>
        </td>
        <td>
          ${middleName}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Email:</label>
        </td>
        <td>
          ${email}

        </td>
      </tr>
      <tr>
        <td class="right">
          <label>DOB:</label>
        </td>
        <td>
          ${date}
        </td>
      </tr>
      
       
       `


    }
  </script>

  <!-- JAVASCRIPT -->

</body>

</html>

Upvotes: 1

Ramon de Vries

Reputation: 1342

this should be it. all i did is add more lines in the onVerify() and the div's it needs to fill when submitted

    $(document).ready(function() {
        document.getElementById("verify").style.display = "none"; 
        document.getElementById("committed").style.display = "none"; 
    })
    function onVerify() {
    		document.getElementById("verifySalutation").innerHTML = document.getElementById("Salutation").value;
        document.getElementById("verifyName").innerHTML = document.getElementById("first_name").value;
        document.getElementById("verify-Middle-Name").innerHTML = document.getElementById("middle_name").value;
        document.getElementById("verify-Last-Name").innerHTML = document.getElementById("last_name").value;
        document.getElementById("verify-Email").innerHTML = document.getElementById("email").value;
				document.getElementById("verify-DOB").innerHTML = document.getElementById("date").value;
        document.getElementById("verify").style.display = "block"; 
    }
    function onCommit() {
        document.getElementById("form").style.display = "none"; 
        document.getElementById("verify").style.display = "none";
        document.getElementById("committed").style.display = "block"; 
    }
    function onCancel() {
        document.getElementById("form").style.display = "block";
        document.getElementById("verify").style.display = "none";
        document.getElementById("name").value = ""
}

h3 {text-align: center;}
        .right {
            text-align: right;
            margin-right: 1em;
            }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            }
            #verify table{
              display:flex;
              justify-content: center;
              align-items: center;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<h3>Personnel Details</h3>
<div class="center" id="form">
	<table>
    <tr>
      <td class="right">
	      <label>Salutation:</label>
      </td>
      <td>
        <select name="gender" id="Salutation">
          <option value=""></option>
          <option value="male">Mr.</option>
          <option value="female">Ms.</option>                    
        </select>
      </td>
    </tr>
    <tr>
      <td class="right">
	      <label>First Name:</label>
      </td>
      <td>
    	  <input id="first_name">
      </td>
    </tr>
    <tr>
      <td class="right">
    	  <label>Middle Name:</label>
      </td>
      <td>
          <input id="middle_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Last Name:</label>
      </td>
      <td>
          <input id="last_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Email:</label>
      </td>
      <td>
          <input id="email">
      </td>    
	</tr>    <tr>
      <td class="right">
    	  <label>DOB:</label>
      </td>
      <td>
          <input type="date" name="issue_date" value="" min="1900-01-01" max="2100-12-31" id="date">
      </td>    
	</tr>         
    <tr>
      <td  colspan="2" style="text-align:center;">
        <div>
            <button onclick="onVerify()">Verify</button>
        </div>
      </td>
    </tr>
    
    
    
    </table>
</div>
<div id="verify">
    <br>
    <br>
    <table>
    <tr>
      <td class="right">
	      <label>Salutation:</label>
      </td>
      <td>
        <div id="verifySalutation" class="center"></div>
      </td>
    </tr>
    <tr>
      <td class="right">
	      <label>First Name:</label>
      </td>
      <td>
    	  <div id="verifyName" class="center"></div>
      </td>
    </tr>
    <tr>
      <td class="right">
    	  <label>Middle Name:</label>
      </td>
      <td>
          <div id="verify-Middle-Name" class="center"></div>
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Last Name:</label>
      </td>
      <td>
          <div id="verify-Last-Name" class="center"></div>
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Email:</label>
      </td>
      <td>
          <div id="verify-Email" class="center"></div>
      </td>    
	</tr>    <tr>
      <td class="right">
    	  <label>DOB:</label>
      </td>
      <td>
          <div id="verify-DOB" class="center"></div>
      </td>    
	</tr>   
    </table>
    
    <div class="center">    
      <button  onclick="onCommit()">Commit</button>
      <button  onclick="onCancel()">Cancel</button>
   </div>

</div>
<div id="committed">
    Committed! :)
</div>
</html>

Upvotes: 0

How to display/print out multiple inputs from a form as a table underneath with JS?

Answers (2)

Related Questions