CODEWITHSUNDEEP
javascripthtmlcss
nemo_87
nemo_87

Reputation: 4791

New row in table is not added after closing modal in javaScript

I am trying to make simple thing. I have one page with button on the top, and empty html table under it. When I click the button modal pops up and I have additional text box and drop down with two more buttons, Cancel and Save. When I click Save button I want to show data from text box and drop down as a new row in table. But nothing really happens. Modal disappears, but no new row is added in table. When I tried to debug this, everything seems to be right, no exception was found, all the values are added correctly, but still nothing. I guess the problem is caused by modal, anybody knows how to fix this?

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 id="results" width="360">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
  </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" id="tbName" name="tbName">
        <p id="nameVal"></p>
        Test:<br>
        <select id="ddlTest">
          <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(return false;);">Save</button>
      </form>
    </div>
  </div>

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

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

      span.onclick = function() {
          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;
        }
        else
        {
            var table = document.getElementById("results");
            var name = document.getElementById("tbName").value;
            var e = document.getElementById("ddlTest");
            var selectedTest = e.options[e.selectedIndex].value;

            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();

            if(dd<10) {
                dd='0'+dd
            } 

            if(mm<10) {
                mm='0'+mm
            } 

            today = mm+'/'+dd+'/'+yyyy;

            //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 = today;
            cell2.innerHTML = name;
            cell3.innerHTML = selectedTest;
        }
    }
</script>
</body>
</html>

Upvotes: 0

Views: 94

Answers (3)

plvice
plvice

Reputation: 16

The best way is to remove onclick attribute from the button, and use code below:

btnSave.onclick = function() {
    validateForm();
    return false;
}

Works well and you will be having less spaghetti in your code.

You can also use addEventListener, if you need more features. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Upvotes: 0

Jeo
Jeo

Reputation: 313

I hope this helps you.

add this to your button role="button" type="button". Not sure but some browser treats button as "submit" type if inserted inside based on my experience with older maxthon browser.

<button id="btnSave" role="button" type="button" onclick="validateForm(return false;);">Save</button>

and you need to fix inline js function you are calling. You have typos you added ";" inside the return false and.. you may remove "return false".

try doing it like this below:

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

Upvotes: 1

Barni
Barni

Reputation: 57

That's bad:
<button id="btnSave" onclick="validateForm(return false;);">Save
You are trying to do:
<button id="btnSave" onclick="validateForm();return false;">Save

Best way is to return true/false inside validateForm function as a true result of validation.

Upvotes: 0

Related Questions