CODEWITHSUNDEEP
javascripthtml
Marc
Marc

Reputation: 301

HTML formular JavaScript

I have a problem with JavaScript. When I push the "Add" button I want to create a table with the listings from the form.

So for example: New course: name: A, content: B => Add 

|name|content
|  A |   B

And every new record comes to the end of the table. Do you have an idea how can I do this? With PHP I would be easy but I want to do it with JavaScript.

My idea is to add this code into script: document . addEventListener( 'DOMContentLoaded', registerCallbacks ); function registerCallbacks( ) { var addButton = document.getElementById( 'add‘ ); addButton.addEventListener( 'click', function( evt ){ add( ); evt.preventDefault( ); } ); 

document.addEventListener('DOMContentLoaded', registerCallbacks);

function registerCallbacks() {
  var addButton = document.getElementById('add‘ );   addButton.addEventListener( '
      click ', function( evt ){ add( ); evt.preventDefault( ); } );
   <html>
    <body>
    
    <form id="new">
    <label for="name">Name of lecture: <br>
    <input class="text" type="text" id="name"></input><br> 
    <label for="content">Content: <br>
    <textarea class="text" id="content"></textarea><br> 
    <button id="add"> Add </button>
    </form>
        
        
    <script>
    
    </script>
    </body>
    
    </html>

Upvotes: 1

Views: 169

Answers (3)

Karan Singh Dhir
Karan Singh Dhir

Reputation: 751

Here's a way to achieve it:

var add_button = document.getElementById("add");
var name_field = document.getElementById("name");
var content_field = document.getElementById("content");
var table = document.getElementById("table");

add_button.addEventListener("click", function(e) {
  e.preventDefault();
  table.style = "display: block;";
  table.innerHTML += "<tr><td>" + name_field.value + "</td><td>" + content_field.value + "</td></tr>"
});
<head>
  <title>HTML Formular Table</title>
</head>

<body>

  <form id="new">
    <label for="name">Name of lecture: <br>
    <input class="text" type="text" id="name"></input><br> 
    <label for="content">Content: <br>
    <textarea class="text" id="content"></textarea><br> 
    <button id="add"> Add </button>
    </form>
    <table id="table" style= "display: none;">
            <tr>
              <th>Name</th>
              <th>Content</th>
            </tr>
    </table>

Upvotes: 0

nazmul.3026
nazmul.3026

Reputation: 1008

Hope this will work

 

 $(document).ready(function() {
  $("#add").click(function(){
    var name=document.getElementById("name").value;
    var content=document.getElementById("content").value;
     $("#table").find('tbody').append("<tr><td class='column'>"+name+"</td><td class='column'>"+content+"</td></tr>");  
  });
});
<html>
<head>
<title>Add New Row</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
  border: 1px solid ;
  background:#AEB6BF;
}
.column {
  border: 1px solid ;
  background:#EAEDED;
  
}
</style>

</head>
<body>


<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br> 
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br> 
<button id="add"> Add </button>

  <table id="table" class="head">
        <thead>
            <tr>
                <td>Name</td>
                <td>Content</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
</table>
<script>

</script>
</body>
</html>

Upvotes: 1

TessavWalstijn
TessavWalstijn

Reputation: 1736

So step one is to activate the button: 

// Here we call the function Add() if someone clicks the button.
<button id="add" onclick="Add()"> Add </button>

Now we want to add the Javascript function Add() to our script:

function Add() {
    // We request here all the information what the user fill out.
}

So here is a working snippet:

let table = document.getElementById("table");

function Add() {
  // We request here all the information what the user fill out.
  let name = document.getElementById("name").value,
      content = document.getElementById("content").value;
      
  // Add to table
  table.innerHTML += "<tr><td>" + name + "</td><td>" + content + "</td></tr>"
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 3px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"><br> 
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br> 
<button id="add" onclick="Add()"> Add </button>

<table id="table">
  <tr>
    <th>Lecture</th>
    <th>Content</th>
  </tr>
</table>

Upvotes: 3

Related Questions