JS - creating table dynamically

Question

<!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <link href="mycss.css" rel="stylesheet" type="text/css">

        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>
    <body>

    <div class="container">

        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h4>REGISTER FORM</h4>
                <p><small>Please, fill in all the fields.</small></p>

                <form id="register-form">
                  <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Enter user name" required>
                  </div>

                  <div class="form-group">
                    <label for="dof">Date of Birth</label>
                    <input type="date" class="form-control" id="dof" placeholder="mm/dd/yyyy" required>
                  </div>

                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email">
                  </div>

                  <div class="form-group">
                    <label for="tel">Phone number</label>
                    <input type="tel" class="form-control" id="tel" placeholder="Enter Phone number">
                  </div>

                  <button id="save-button" class="btn btn-primary pull-right" onclick="save();">Save</button>
                </form>

            </div>      
        </div>

        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Date of Birth</th>
                            <th>Email</th>
                            <th>Phone number</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>      
        </div>

    </div>

    <script>
      $( function() {
        $( "#dof" ).datepicker();
      } );
    </script>

    <script type="text/javascript">
    function save() {
        var tbody = document.getElementsByTagName('tbody')[0];
        var name = document.getElementById('name').value;
        var dof = document.getElementById('dof').value;     
        var email = document.getElementById('email').value;
        var tel = document.getElementById('tel').value;

        var tr = document.createElement('tr');
        var columns = [name, dof, email, tel]

        for (var i = 0; i < columns.length; i++) {
            var td = document.createElement("td");
            var text = document.createTextNode(columns[i]);
            td.appendChild(text);
            tr.appendChild(td);
        }

        tbody.appendChild(tr);
    };      
    </script>

    </body>
    </html>

My save() function doesn't work.

P.S. Guys :) do not read it..this is for support service ;) It is annoying a lot.. I mean the popup that says that It looks like mostly code...bla bla

trincot · Accepted Answer · 2016-08-17 13:03:04Z

Your problem is that the form submits, thereby reloading the page and resetting everything.

This you can solve by calling preventDefault() on the event object. For that you have to change two things to the save function:

Add a function argument to capture the event object, let's call it e:
```
function save(e) {
```
Call preventDefault somewhere in the function, but it is common to put this near the end:
```
    e.preventDefault();
}
```

This is not all. Now you have to make sure the event object is passed to your function. There are at least two ways:

If you stick to the onclick attribute, then change it to include the special event object:
```
<button ... onclick="save(event);">
```
Many regard it better practice to not use the onclick attribute at all. In that case remove that attribute, and attach the event handler through JavaScript:
```
$('#save-button').click(save);
```
In that case the event object is passed automatically.

Further remarks

As you are using jQuery, why not use it consistently? You have many native DOM calls in your code, like document.getElementsByTagName, for which jQuery has much nicer equivalents.

Taking it all together your code could look like this:

$('#save-button').click(function (e) {
    var columns = [
        $('#name').val(),
        $('#dof').val(),   
        $('#email').val(),
        $('#tel').val()
    ];
    var $tr = $('<tr>');
    for (var i = 0; i < columns.length; i++) {
        $("<td>").text(columns[i]).appendTo($tr);
    }
    $('tbody:first').append($tr);
    e.preventDefault();
});

pov12ke12 · Accepted Answer · 2016-08-17 12:23:06Z

You need to load your created function, like that.

<script type="text/javascript">
    $(function(){
       save();
    });

    function save() {
        var tbody = document.getElementsByTagName('tbody')[0];
        var name = document.getElementById('name').value;
        var dof = document.getElementById('dof').value;     
        var email = document.getElementById('email').value;
        var tel = document.getElementById('tel').value;

        var tr = document.createElement('tr');
        var columns = [name, dof, email, tel]

        for (var i = 0; i < columns.length; i++) {
            var td = document.createElement("td");
            var text = document.createTextNode(columns[i]);
            td.appendChild(text);
            tr.appendChild(td);

        }

        tbody.appendChild(tr);

    };      
    </script>

It has worked, but only partially.. when I hit button I can see how the data is appeared in the table..but for very short time..then everything is disappeared

Collectives™ on Stack Overflow

JS - creating table dynamically

2 Answers 2

Further remarks

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Further remarks

Comments

1 Comment

Related