Werte aus Formular in modal holen und mit javaScript in die Tabellenzeile setzen

Ich versuche, diese einfache Sache zu tun, aber ich muss vermeiden, irgendetwas außer html, css und plain javaScript zu verwenden.Werte aus Formular in modal holen und mit javaScript in die Tabellenzeile setzen

Ich habe Modal mit Name Textfeld und einem Dropdown-Menü. Auf der Hauptseite habe ich eine HTML-Tabelle mit 3 Spalten: Erstellungsdatum, Name und Tests.

Wenn ich auf den Button Neu hinzufügen am oberen Rand der Seite klicke, erscheint Modal und ich möchte Werte in Formularsteuerelemente eingeben können, auf Speichern klicken und diese Werte in meiner Tabelle anzeigen.

Ich weiß, wie dies mit jQuery oder anderen moderneren Technologien zu tun, aber es ist nicht erlaubt. Also brauche ich Hilfe bei der Rückkehr zu den Grundlagen.

Hier ist mein 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>

Quelle

2016-08-10 nemo_87

eine id der Tabelle zuweisen

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

Jetzt in Ihrem validateForm Funktion, die Sie überprüft werden, ob das Formular valid.Once ist die Form, gilt assign die Werte, die in Eingaben des Formulars in die Tabelle wie folgt eingegeben werden.

 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"; 
     } 
    }

Um zu vermeiden, Postbacks als die Art der Taste als Taste erwähnen unten

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

Quelle

2016-08-10 09:14:25

Ja hatte ich ähnliche Idee, aber das Problem war, dass, wenn ich auf Hinzufügen Schaltfläche nichts zur Tabelle hinzugefügt wird. Modal verschwindet und wenn ich debugge, sehe ich, dass ich keine Ausnahmen habe, alle Werte korrekt sind, Debug-Pass-Erstellung neuer Zeile und Werte hinzufügen, aber auf der Seite nichts ... @ bhanu.cs –

Ihre Seite bekommt eine volle Seite Postback Klicken Sie auf Hinzufügen Schaltfläche? –

Nun, ich habe es nicht definiert ... Nur wenn es so standardmäßig ist. Ich habe versucht, Return false hinzuzufügen; aber es hat nicht geholfen ... @ bhanu.cs –

in Form einer Tabelle mit der erforderlichen Anzahl von Spalten definieren. Beim Klicken auf Speichern mit der Tabelle ID können Sie Zeilen einfügen

var table = document.getElementById("myTable"); 


var row = table.insertRow(0); 


var col1 = row.insertCell(0); 
var col2 = row.insertCell(1); 


col1.innerHTML = "Content to be added"; 
col2.innerHTML = "Content to be added";

Quelle

2016-08-10 09:15:14 Shyamala

Werte aus Formular in modal holen und mit javaScript in die Tabellenzeile setzen

Antwort

Verwandte Themen