Recently, I came across a javascript code snippet that is designed to save birthday data in local storage and then display the data within a div element. The current functionality only shows nothing if the storage is empty. However, I require it to display a message like "Set your birthday first" if the local storage happens to be empty.
Below is the section where the data should be displayed:
Appreciate all the help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
</head>
<body>
<script>
$(function storeDates(form){
var operation = "A"; //"A"=Adding; "E"=Editing
var selected_index = -1; //Index of the selected list item
var tbClients = localStorage.getItem("tbClients");//Retrieve the stored data
tbClients = JSON.parse(tbClients); //Converts string to object
if(tbClients == null) //If there is no data, initialize an empty array
tbClients = [];
function Add(){
var client = JSON.stringify({
birthday : $("#birth_day").val(),
patientno:$("#patient_no").val()
});
tbClients.push(client);
localStorage.setItem("tbClients", JSON.stringify(tbClients));
return true;
}
function Edit(){
tbClients[selected_index] = JSON.stringify({
ID : $("#name").val(),
});//Alter the selected item on the table
localStorage.setItem("tbClients", JSON.stringify(tbClients));
alert("The data was edited.")
operation = "A"; //Return to default value
return true;
}
function Delete(){
tbClients.splice(selected_index, 1);
localStorage.setItem("tbClients", JSON.stringify(tbClients));
alert("Client deleted.");
}
function List(){
$("#tblList").html("");
$("#tblList").html(
"<thead>"+
" <tr>"+
" <th></th> "+
" </tr>"+
"</thead>"+
"<tbody>"+
"</tbody>"
);
for(var i in tbClients){
var cli = JSON.parse(tbClients[i]);}
$("#tblList tbody").append("<tr>"+
" <td ><span class='dayText'><b class='dayclass'>"+
"Birth day"+cli.birthday + "</td>" +
"</tr>");
$("#patient_number").append(cli.patientno );
}
$("#frmCadastre").bind("submit",function(){
if(operation == "A")
return Add();
else
return Edit();
});
List();
$(".btnEdit").bind("click", function(){
operation = "E";
selected_index = parseInt($(this).attr("alt").replace("Edit", ""));
var cli = JSON.parse(tbClients[selected_index]);
$("#deliveryday").val(cli.ID);
});
$(".btnDelete").bind("click", function(){
selected_index = parseInt($(this).attr("alt").replace("Delete", ""));
Delete();
List();
});
});
</script>
<FORM name="f1" id="frmCadastre" >
<section id="aligned">
<input type="text" id="birth_day" name="birth_day" placeholder=" Birth day :" autocomplete="off" tabindex="2" class="txtinput" required><br/><br/>
<input type="text" id="patient_no" name="patient_no" placeholder=" patient no" autocomplete="off" tabindex="2" class="txtinput" required><br/><br/>
<input type="submit" name="submit" id="btnSave" class="submitbtn" tabindex="7" onClick="storeDates(this.form); " />
</form>
<div id="tblList"></div>
<div id="patient_number"></div>
</body>
</html>