Reputation: 497
<!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
Upvotes: 0
Views: 75
Reputation: 350077
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.
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();
});
Upvotes: 1
Reputation: 23
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>
Upvotes: 1