Dennis Dennis - 3 months ago 24
Javascript Question

JS - creating table dinamically

<!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. I would be very thankful for any ideas!

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

Answer

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:

  1. Add a function argument to capture the event object, let's call it e:

    function save(e) {
    
  2. 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:

  1. If you stick to the onclick attribute, then change it to include the special event object:

    <button ... onclick="save(event);">
    
  2. 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.

Comments