Addy2311 Addy2311 - 10 days ago 5
HTML Question

How to insert data correctly from a form into a table

Hi I want to put my given data from the form in to my table but the data is always under ID :/

In my form I can input a name, birthday and a place and this should be stored in the table. And the ID should start with 1.
I'm not sure how to implement it.

I hope someone can help me.
This is my code:

enter image description here

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Artist</title>
</head>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css">
<body>
<form id="send">
<label>Name des Künstlers</label> <br>
<input id = "name" type="text" placeholder="Name des Künstlers"/> <br>

<label>Ort</label> <br>
<input id = "ort" type="text" placeholder="Woher stammt der Künstler"/> <br>

<label>Geburtsdatum</label> <br>
<input id="datum" type="text" placeholder="Wann ist der Künstler geboren?"/> <br>
</form>

<p>
<input type="checkbox" name="Favorit" value="Favorit"> Favorit <p>

<input type="button" id ="submit" name="senden" value="Senden">
<table id="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Geburtsort</th>
<th>Geburtsdatum</th>
<th>Favorit</th>
</tr>
</tbody>
</table>
</body>
</html>


JAVASCRIPT/JQUERY:

window.onload = function(){
var allArtists = [];


$('#submit').click(function(){
var artistName = $("#name").val();
var ort = $("#ort").val();
var datum = $("#datum").val();
allArtists.push([artistName,ort,datum])

var tableRef = document.getElementById('table').getElementsByTagName('tbody')[0];

// Insert a row in the table at the last row
var newRow = tableRef.insertRow(tableRef.rows.length);

// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);

// Append a text node to the cell
var newText = document.createTextNode(allArtists);
newCell.appendChild(newText);
});
};

Answer

You are already referencing jQuery and partially using it, so using jQuery for the rest too you can make a row template and map the values to it before appending it to the table, similar to the below.

You can add a lot more abstraction and turn each set of values into an artist object you pass around but to keep close to your sample I only did mimimum changes.

I did add favorites though as well but not sure how you want to display that.

window.onload = function() {
  var allArtists = [];

  $('#submit').click(function() {
    var $rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>');

    var artistName = $("#name").val();
    var ort = $("#ort").val();
    var datum = $("#datum").val();
    var favourite = $("[name=Favorit]").is(':checked');

    allArtists.push([artistName, ort, datum]);

    var rowId = allArtists.length;
    
    $rowTemplate.find('[data-id=id]').text(rowId);
    $rowTemplate.find('[data-id=name]').text(artistName);
    $rowTemplate.find('[data-id=geburtsort]').text(ort);
    $rowTemplate.find('[data-id=geburtsdatum]').text(datum);
    $rowTemplate.find('[data-id=favorite]').text(favourite);

    $("#table tbody").append($rowTemplate);
  });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send">
  <label>Name des Künstlers</label>
  <br>
  <input id="name" type="text" placeholder="Name des Künstlers" />
  <br>

  <label>Ort</label>
  <br>
  <input id="ort" type="text" placeholder="Woher stammt der Künstler" />
  <br>

  <label>Geburtsdatum</label>
  <br>
  <input id="datum" type="text" placeholder="Wann ist der Künstler geboren?" />
  <br>
</form>

<p>
  <input type="checkbox" name="Favorit" value="Favorit"> Favorit
  <p>

    <input type="button" id="submit" name="senden" value="Senden">
    <table id="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Geburtsort</th>
          <th>Geburtsdatum</th>
          <th>Favorit</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

Comments