nemo_87 nemo_87 - 3 months ago 17
CSS Question

Get values from form in modal and put them into table row using javaScript

I am trying to do this simple thing but I need to avoid using anything but html, css and plain javaScript.

I have modal with Name text box and one drop down menu.
On the main page I have html table with 3 columns: Date Created, Name and Tests.

When I click button Add new on the top of the page, modal pops up and I want to be able to enter values in form controls, click Save button and show those values in my table.

I know how to do this by using jQuery or other more modern technologies, but it's not allowed. So I need help with getting back to basics.

Here is my code:

<html>
<head>
<title>Battery Test App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button id="btnAddNew">Add new</button>
<br>
<br>
<table border="1">
<tr>
<th>Date Created</th>
<th>Name</th>
<th>Tests</th>
</tr>
</table>
<div id="modalAddNewTest" class="modal">
<div class="modal-content">
<span class="close">x</span>
<form name="formTestInfo" method="post">
Name:<br>
<input type="text" name="tbName">
<p id="nameVal"></p>
<br>
<br>
Test:<br>
<select>
<option value="belbin">Belbin</option>
<option value="raven">Raven</option>
<option value="ppa">PPA</option>
<option value="ppaPlus">PPA+</option>
<option value="basicKnowledge">Basic Knowledge</option>
<option value="pct">PCT</option>
</select>
<br>
<br>
<button id="btnCancel">Cancel</button>
<button id="btnSave" onclick="validateForm()">Save</button>
</form>
</div>
</div>

<script>
var nameValidation;
var modal = document.getElementById('modalAddNewTest');
var btn = document.getElementById("btnAddNew");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

function validateForm() {
var x = document.forms["formTestInfo"]["tbName"].value;
if (x == null || x == "") {
nameValidation = "Name must be filled out";
document.getElementById("nameVal").innerHTML = nameValidation;
return false;
}
}
</script>
</body>
</html>

Answer

Assign an id to the table

<table border="1" id="myTable">
  <tr>
    <th>Date Created</th>
    <th>Name</th>
    <th>Tests</th>
  </tr>
</table>

Now in your validateForm function you are checking if the form is valid.Once the form is valid assign the values entered in inputs of the form to the table as follows.

     function validateForm() {
        var x = document.forms["formTestInfo"]["tbName"].value;
        if (x == null || x == "") {
            nameValidation = "Name must be filled out";
            document.getElementById("nameVal").innerHTML = nameValidation;
            return false;
        }
        else
        {
            var table = document.getElementById("myTable");

         //In the first step using InsertRow function you are creating a first row i.e tr 
        var row = table.insertRow(table.rows.length);

        //In the second step you create a cell i.e td dynamically
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        // Here in step 3 you can add data to your cells from the modal popup inputs(According to your logic)
        cell1.innerHTML = "Your Date Created";
        cell2.innerHTML = "Your name data from modal";
        cell3.innerHTML = "Your Test data from modal";
        }
    }

To avoid postback mention the type of button as button as below

<button type="button" id="btnSave" onclick="validateForm()">Save</button>