JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<link rel="stylesheet" href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Add Publisher
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="col-lg-12">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Contact zzzz</legend>
<div class="col-lg-6">
<label class="control-label input-label" for="startTime">Publisher Name</label>
<input type="text" class="form-control name" type="text" name="startTime" />
<i class="icon-time"></i>
</div>
<div class="col-lg-6">
<label class="control-label input-label" for="startTime">Phone</label>
<input type="text" data-format="(ddd) ddd-dddd" class="form-control phone" type="text" name="startTime" />
<i class="icon-time"></i>
</div>
<div class="col-lg-6">
<label class="control-label input-label" for="startTime">Website</label>
<input type="text" class="form-control website" type="text" name="startTime" />
<i class="icon-time"></i>
...
JavaScript
$("#submit").click(function (e) {
e.preventDefault();
if ('localStorage' in window && window['localStorage'] !== null) {
try {
//Get stored data
var users = JSON.parse(localStorage.getItem('users'));
if (users === null) {
//If fields empty, throw error message
sweetAlert("Oops...", "One or more fields is missing data", "error");
}
//Create new user entry
user = {
name: $(".name").val(),
phone: $(".phone").val(),
website: $(".website").val(),
contact: $(".contact").val()
};
//Add new entry to stored array
users.push(user);
//Save array
localStorage.setItem("users", JSON.stringify(users));
alert("The data was saved.");
return true;
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!');
}
}
} else {
alert('Cannot store user preferences as your browser do not support local storage');
}
return false;
});